create-materialize-sass-project

    1.0.4 • Public • Published

    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

    Install

    npm i create-materialize-sass-project

    DownloadsWeekly Downloads

    1

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    26.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • skiwa