This is a template to build a multipage web app (MPA) with Svelte and Materialize CSS.
First clone this repo (replace myapp
with the name of your app):
git clone https://github.com/aletome/svelte-materialize-template.git myapp
cd myapp
If you don't want to keep all history of this project, delete .git
hidden folder and init your new repo:
git init
Finally install all dependencies:
npm install
That's all! You are ready to go!
To start webpack in dev mode with hot reload:
npm run dev
Visit localhost:8585 to see your app in the browser.
To generate production bundle:
npm run build
This command create in public
folder index.html
, bundle.css
and bundel-xxxxx.js
, where xxxxx
is a hash that changes every build.
If you need to change Materialize CSS default color palette use materialize-custom.scss
.
In the exampe below I changed primary, secondary, success, error and link colors.
// 1. Custom Colors
// ==========================================================================
@import '../node_modules/materialize-css/sass/components/color-variables';
//Place here color scheme you want
$primary-color: color("teal", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
$secondary-color: color("pink", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;
@import '../node_modules/materialize-css/sass/materialize.scss';
To create a new:
src/Pages
folder. The name of the folder will be the name of html page.main.js
(the name main.js
is mandatory): this is the entry point of the new page;newpage.svelte
(where newpage
is a name you prefer): this is the svelte component file.main.js
file import the newpage.svelte
file (import App from './newpage.svelte';
).