create-materialize-sass-project

About

create-materialize-sass-project is an easy-to-use Node.js CLI module that allows you to generate a quick Materialize.css project.

• Complete website creation
• Custom human-readable colors following the Materialize syntax
• Custom ready-to-go sections
• Responsive design breakpoints

Installation

Use NPM to install.

$ npm install create-materialize-sass-project -g

Usage

Executes the package and pass a project name to launch the CLI

$ create-materialize-sass-project example_project

You can also directly pass parameters to skip the questionning.

Optional arguments:

Parameter	Default	Description
-y --yes	/	Skip the prompt and use the default values
-t -–title	'New Materialize website'	Title of the website
-d -–description	'Generated with @skiwa-materialize-boilerplate'	Meta description
-u -–url	'www.example.com'	URL of the website
-l --lang	'en'	Default language
--direction	'ltr'	Default read direction
-o -–opengraph	y	Insert the OpenGraph meta tags in the index
-c --colors	/	Custom colors as hex #AABBCC. Call it several times for multiple colors
-s --sections	/	Custom sections of the website. Call it several times for multiple sections
-j --jquery	y	Use JQuery
-h --htaccess	y	Generates a htaccess file
-r --robots	y	Generates a robots.txt file
--sitemap	y	Generates a sitemap file

Colors must be written as hexadecimal #AABBCC. Sections and colors should be separated by spaces when prompted.

Custom colors

Each custom color specified by the user will be converted to a name/pair value, using the Color namer package for a human-readable name.

When the .scss files is generated, custom classes are created, following the Materialize.css syntax.

For example :

What are the main custom colors ? (Separate with space)
> #293462 #216583 #00818a #f7be16

will generate, in the /sass/main.scss file :

/*------------------------------------*\
    $GLOBAL
\*------------------------------------*/
$rhino: #293462;
$elm: #216583;
$blue-lagoon: #00818a;
$lightning-yellow: #f7be16;
 
.rhino{background-color: $rhino !important;}
.rhino-text{color: $rhino !important;}
.elm{background-color: $elm !important;}
.elm-text{color: $elm !important;}
.blue-lagoon{background-color: $blue-lagoon !important;}
.blue-lagoon-text{color: $blue-lagoon !important;}
.lightning-yellow{background-color: $lightning-yellow !important;}
.lightning-yellow-text{color: $lightning-yellow !important;}

Custom sections

Each custom section will be added to the HTML and will have its own isolated bloc in the scss file, so that the code remains clear and structured.

For example :

What are the main custom sections ? (Separate with space)
> Portfolio Showcase About Contact

will generate, in the index.html file :

<header></header>
  <main>
    <div class="section-portfolio"></div>
    <div class="section-showcase"></div>
    <div class="section-about"></div>
    <div class="section-contact"></div>
  </main>
<footer></footer>

and in the sass/main.scss file :

 
/*------------------------------------*\
    $PORTFOLIO
\*------------------------------------*/
.section-portfolio{
 
}
 
 
 
/*------------------------------------*\
    $SHOWCASE
\*------------------------------------*/
.section-showcase{
 
}
 
...
 

Project workflow

Will all its steps of the project goes this way:

1. CLI prompt
2. Structure and folders creation
3. Main files creation (index.html, js and css files)
4. Materialize assets retrieval. Downloads and archive from the official website, unzips it and puts it in the correct folders
5. JQuery retrieval
6. Colors conversion into human-friendly names, using the color-namer library
7. Stylesheet :
   • Custom colors variables and classes
   • Default sections (global, header, main, footer)
   • Custom sections
   • Responsive design section, with breakpoints presets
8. HTML file generation
9. Htaccess, sitemap and robots.txt files generation

Links

• Personal website
• GitHub
• NPM Repository