Sass boilerplate

sass is awesome

Getting Started

Sass is used to extend your CSS, allowing you to use useful concepts like variables and nesting, as well as compartmentalizing and organizing the code. Npm is used to watch for changes and process those Sass files into regular CSS files, as well as minifying and adding prefixes for cross-browser compatibility.

Clone or download the boilerplate

git clone https://github.com/midnightgamer/sass boilerplate.git

Install all development dependencies

npm i

Start a dev live-server and watch on all of your sass file

npm start

Directory Structure

The project contains the a very big folder structure , first of all 7-in-1 structure of sass , css for author stylesheet and vendor for third party files.

After Building the project we got a whole new folder named src with compiled css and required files in there so dont have to bather about sass file while publishing. 

project-folder
├── css/
│   ├── style.css
├── js/
│   └── script.js
├── images/
│   └── favicon.png
├── index.html
|── sass/
    |── abstract/
    │    |── _variables.scss
    │    |── _mixins.scss
    │    └── _colors.scss
    ├── base/
    │   ├── _base.scss
    │   ├── _typography.scss
    │   ├── _animation.scss
    │   └── _utilities.scss
    └── components/
    │    ├── _tooltip.scss
    │    └── _form.scss
    └── layout
    │     └──_grid.scss
    │
    └── Pages
    │       └──_home.scss
    └── vendors
    │       └──_anyVendorFile.scss
    └── theme
    │       └──_anyDarkTheme.scss
    └── main.scss
.gitignore
README.md
package.json
Description about sass folders
  • abstract/ - contains global mixins, functions, helper selectors, etc.
  • base/ - contains global styles, such as resets, typography, colors, etc.
  • components/ - contains each self-contained component in its own .scss partial
  • layout/ - contains styling for larger layout components; e.g. nav, header, footer, etc.
  • pages/ - contains page-specific styling, if necessary
  • themes/ - contains styling for different themes
  • vendors/ - contains 3rd-party styles, mixins, etc.
  • main.scss - output file that brings together all of the above parts

Grid

We provide simple and responsive 4 column grid layout.

Col 1-of-2
<div class=" row">
   <div class="col-1-of-2"></div>
   <div class="col-1-of-2" ></div>
</div>
col-1-of-2
col-1-of-2
Col 1-of-3
<div class=" row">
   <div class="col-1-of-3"></div>
   <div class="col-1-of-3" ></div>
   <div class="col-1-of-3" ></div>
</div>
col-1-of-3
col-1-of-3
col-1-of-3
Col 1-of-4
<div class=" row">
   <div class="col-1-of-4"></div>
   <div class="col-1-of-4" ></div>
   <div class="col-1-of-4" ></div>
   <div class="col-1-of-4" ></div>
</div>
col-1-of-4
col-1-of-4
col-1-of-4
col-1-of-4
Mixed Columns
<div class="row">
   <div class="col-1-of-2"></div>
   <div class="col-1-of-2"></div>
</div>

<div class="row">
   <div class="col-1-of-3"> </div>
   <div class="col-2-of-4"></div>
</div>

<div class="row">
   <div class="col-1-of-2"> </div>
   <div class="col-1-of-4"></div>
   <div class="col-1-of-4"></div>
</div>
col-1-of-2
col-1-of-2
col-1-of-3
col-2-of-3
col-1-of-2
col-1-of-4
col-1-of-4

Mixins

One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk

  1. Pseudo

    When using ::before and ::after you'll always need these three, so we're saving three lines of code every time you use this.

    See the Pen RzwqYp by Pankaj Jaiswal (@midnightgamer) on CodePen.

  2. Keyframes and Animation

    Quickly define animation properties and add them to your elements. Currently, the animation CSS property still needs vendor prefixes, so this will also add that to the mix.

    See the Pen OeJrgB by Pankaj Jaiswal (@midnightgamer) on CodePen.

  3. ADD VENDOR PREFIXES TO ANY CSS PROPERTY

    These days many web developers use PostCSS and Autoprefixer to add vendor prefixes to CSS properties that don’t come with sufficient browser support. However, there are still many developers who rather use Sass for that purpose. You can use the following mixin to add vendor prefixes to any CSS property

    See the Pen EBxBXz by Pankaj Jaiswal (@midnightgamer) on CodePen.

Npm Scripts

NPM scripts are, well, scripts. We use scripts to automate repetitive tasks. For example, building your project, minifying Cascading Style Sheets (CSS) and JavaScript (JS) files. Scripts are also used in deleting temporary files and folders, etc,

This Sass boilerplate have some useful npm script that you need to work with sass or even with html and css

  1. Web Server with Sass compilation

    This script simply create Dev Server which reload on evey change and compile your all sass file when there is change in sass code

    "start": "npm-run-all --parallel devserver watch:sass"

    This script is made up of 2 other script i.e deveserver and watch:sass

  2. Compile sass

    This script simply compile sass code to css only once , this script is useful if you closed your server and have to compile some sass only for once.

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

    usage : "compile:sass": "node-sass [input.scss] [output.css]",

    You guys can make changes in script according to your need.

  3. Auto Vendor Prefixer

    This script simply take your compiled css file and add vendor prefixes as per our demand.

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

    usage : postcss [input.css] [OPTIONS] [-o|--output output.css]

  4. Compress CSS

    This script simply take your chosen css file and minify it.

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

    usage : node-sass [input.css] [-o|--output output.css] [OPTIONS]

  5. Build

    This script do all the task mention above in script section , It compile sass to css fist then add vendor prefixes then minify it all task with one script.

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

    New directory will create containing all your html , css and js. Coming soon

Code copied!