It adds a lot of other functionalities. All of the layout is built using flexbox.

Check the Features to know more.

• Description
• Usage
• Features
• Installation
• Scripts
• ToDos
• Contact

This template uses the following:

• Modern CSS

• BEM Methodology

• Custom 4 column grid

• SASS

  • variables
  • nesting
  • parials and imports
  • mixins
  • functions
  • extends

• 7-1 project structure for SASS Files -

  • base/
  • components/
  • layout/
  • pages/
  • themes/
  • abstracts/
  • vendors/

A build script is created to accomodate older browser compatibility

The framework is easy to use. Just add the css/style.css file to your project directory and You're good to go.

1. Define .container class to you parent element for
2. Define .row class to your grid container
3. Define .col-* for different column sizes. Checkout feature for different available options.

To tweak the framework, please checkout installation

• removes padding,margin etc.
• set the default width to 62.5% to build a rem based layout
• container width - 144rem (1440px)

• You can mix and match the 12 provided columns to achieve the desired layout col-1 , col-2 ........ col-12
• 5 different sizes are available to accommodate different display sizes
  • x-small -> Usage: col-xs-1 ... col-xs-12
  • small -> Usage: col-sm-1 ... col-sm-12
  • medium -> Usage: col-md-1 ... col-md-12
  • large -> Usage: col-lg-1 ... col-lg-12
  • x-large -> Usage: col-xl-1 ... col-xl-12

Default colors - default, primary, secondary, success, info,warning, danger, muted, white, black

1. Text colors - Just append the default color to the text class to get the desired color. Ex: text-primary

• Light, dark, lighter and darker versions are also available. Ex: text-default-light, text-default-lighter, text-default-dark, text-default-darker

2. Background colors - Just append the default color to the bg class to get the desired color. Ex: bg-primary

1. Add base styles to headers. h1 ... h6, p, subtitle, lead, small
2. Font weights: font-weight-thin , font-weight-light, font-weight-regular, font-weight-bold, font-weight-black

Need to add btn class first.

1. Primary button - btn--primary
2. Secondary button - btn--secondary
3. Underlined button - btn--underlined

hr--light , hr--blue, hr--primary

d-flex , flex-column, flex-row, justify-content-start etc. Please look at utls/_display.scss to know more

• There are 12 margin sizes available for each side. Each size equals ```rem``
• Usage
  • For margin left - ml-1 ... ml-12
  • For margin right - mr-1 ... mr-12
  • For margin top - mt-1 ... mt-12
  • For margin bottom - mb-1 ... mb-12
  • For margin top and bottom, there is a helper: my-1...my-12
  • For margin left and right, there is a helper: mx-1...mx-12

• There are 12 padding sizes available for each side. Each size equals ```rem``
• Usage
  • For padding left - pl-1 ... pl-12
  • For padding right - pr-1 ... pr-12
  • For padding top - pt-1 ... pt-12
  • For padding bottom - pb-1 ... pb-12
  • For padding top and bottom, there is a helper: py-1...py-12
  • For padding left and right, there is a helper: px-1...px-12

1. Clone the project to your local directory

git clone https://github.com/KaushikShivam/bootgrid.git

2. The project uses NPM for managing dependencies. Run npm install to install all the required dependencies

npm install

3. Run the watch script to view live changes to your CSS

npm run watch:sass

4. Open the index.html file in your browser to view the website in all its glory (Live-server is recommended to view live changes automatically)

The project uses AutoPrefixer, Node-sass, npm-run-all etc to build the following scripts:

1. Watch live changes to the sass

"watch:sass": "node-sass sass/main.scss css/style.css -w"

Run npm run watch:sass to run the script

1. Compile sass files

"compile:sass": "node-sass sass/main.scss css/style.comp.css"

2. Add prefixes automatically to the modern CSS rules (supports last 10 years - Can be configured)

"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css"

3. Adds compression

"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed"

4. Final Build process

"build:css": "npm-run-all compile:sass prefix:css compress:css"

Run npm run build:css to run the build script

• Inputs
• Button
• Margin utils
• padding utils
• navbar
• pagination

You can contact me at:

• Portfolio
• Email
• Linkedin
• Twitter
• Medium
• Angellist