/boilerplatinator

Boilerplate for building website using customized Bootstrap Media Queries and Grid system with SASS.

Primary LanguageSCSS

Boilerplatinator

Boilerplate for building website using customized Bootstrap Media Queries and Grid system with SASS.

Notes for new Installation:

  1. Download and Install Git

  2. Download and Install Node.js ( Choose: Recommended for Most Users )

  3. Create a file where you want to start your main project.

  4. Then 'Right Click' on any white/empty space inside this file then choose 'Git Bash Here'.

  5. A console will pop-up, then run this code to download the 'Boilerplatinator' then close the console after downloading

    $git clone https://github.com/saysonjerald/boilerplatinator.git

  6. Edit value of this property 'name', 'version' and 'description' inside the package.json file

  7. Rename the 'Boilerplatinator' folder into your project name.

  8. Open the 'Project Folder' folder then 'Right Click' on any white/empty space inside this file then choose 'Git Bash Here'.

    $npm install live-server -g

  9. Install Node Modules for this boilerplate.

    $npm install

  10. Delete the .git folder, sometimes it's hidden.

Notes for Development

  1. To activate LiveServer type:

    $npm run devserver

  2. To activate SASS Compiler :

    $npm run watch:sass

  3. I recommend to activate BOTH in one single CLI ( parallel mode ) :

    $npm run start

  4. Uncomment 'No Internet Script' in index.html if you have no internet connection

  5. Use CDN as much as you can or else I will kill YOU!

  6. Use BEM Architecture | Please make your life easier

Notes for Production

  1. Compile your SASS to CSS

    $npm run compile:sass

    output: sass/main.css

  2. Merge all your CSS into one CSS file to reduce HTTP Requests - this will make your website load faster

    $npm run concat:css

    output: css/style.concat.css

  3. This will make your website a higher chance to run on unsupported browsers.

    $npm run prefix:css

    output: css/style.prefix.css

  4. Compressing the CSS File will make CSS execute faster on browsers

    $npm run compress:css

    output: css/style.css

  5. Run all Scripts above using this command - I recommend to run this command for production purposes

    $npm run build:css

    output: css/style.css

Media Queries

  • Grid breakpoints
xxxs: 0,
xxs: 320px,
xs: 568px,
sm: 667px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1440px,
xxxl: 1600px
  • Container Max-Width
xxxs: 319px,
xxs: 414px,
xs: 568px,
sm: 608px,
md: 738px,
lg: 868px,
xl: 1092px,
xxl: 1330px,
xxxl: 1540px

Note: Don't be afraid to modify or add containers and breakpoint.

  • Media Query
//max-width
@include respond-below($breakpoint-value){
    property: value;
}

//min-width
@include respond-above($breakpoint-value){
    property: value;
}

//between min and max width
@include respond-between($lower, $upper){
    property: value;
}

END