A light weight Sass boilerplate for creating & customizing themes quickly.
ShadesSCSS Logo
ShadesSCSS is a light weight, very easy to use Sass boilerplate. All you have to do is set basic values for configuration and compile to create a new theme. ShadesSCSS doesnt get in your way. It gives you just enough to get going and leaves you to go crazy with your designs 🕺

All you need

Sass logo

Shades is built primarily with Sass. Sass helps extend CSS by making available, useful programming concepts that helps build scalable, modular CSS designs.

Grunt JS Logo

Grunt is a Javascript based task runner and an essential part of Shades. Its used to carry out several pre-processing and post-processing tasks on important files.


First Steps

If you have no interest in setting up and configuring shades, you may just include the default Shades css and use as is. Its light weight (approximately 42kb), has a lot to get you going and at thesame time doesnt get in your way.

<link rel="stylesheet" href="assets/src/css/boilerplate.min.css">

Or you can use the unminified version. As stated above you would need to make use of Sass and Grunt to use this package efficiently.
If you aleady have Sass installed proceed, else please head over to the official guide and install Sass on your system.

If you already have Node installed, go ahead to clone the project

git clone

Install the dev dependencies by running

npm install

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to work with a Gruntfile as well as install and use additonal Grunt plugins.
You will find the project's grunt.js file in the root with these preconfigured tasks

  • concat - Which concatenate files.
  • uglify - Minify JS files
  • sass - Compile Sass to CSS
  • postcss - Apply several post-processors to CSS. In this case, autoprefixer and pixrem.
  • cssmin - Compress CSS files



Creating new themes

Below you find the directoy structure

    |   \---css
    |       +---themes
    |       |   |   boilerplate.scss
    |       |   |   
    |       |   +---base
    |       |   |       _global_variables.scss
    |       |   |       _mixins.scss
    |       |   |       _normalize.scss
    |       |   |       _reset.scss
    |       |   |       
    |       |   \---components
    |       |           _buttons.scss
    |       |           _forms.scss
    |       |           _grid.scss
    |       |           _helpers.scss
    |       |           _scaffolding.scss
    |       |           _tables.scss
    |       |   
    |       \---vendor
                boilerplate.css         ─┐
            |--> // Generated from boilerplate.scss
                boilerplate.min.css     ─┘
                vendor.min.css            --> // Merged and minified all files in the vendor folder

To create a new theme, all you have to do is ;

  1. Make a copy of boilerplate.scss in the assets/build/css/themes themes folder and rename to your desired theme name e.g theme1.scss
  2. Easily initialise your design preferences in the theme variables ↓
  3. Add your customised, project specific css/sass code below the variables(or as a partial if you wish).
  4. Run

Your theme file (theme1.css) will be generated in the assets/src/css folder along with the minified version and source map. You can repeat this step for as many themes as you want to build.
All you have to do is take power with the theme variables ↓ config and create multiple themes with similar look but different color schemes or multiple themes with components that look entirely different.
Shades makes it easy

Grids & Layout


Shades has 5 major container sizes

<div class="x-small-container">Extra Small</div>
<div class="small-container">Small</div>
<div class="medium-container">Medium</div>
<div class="container">Large</div>
<div class="full-container">Full Width</div>
Extra Small Small Medium Large Full
600px 768px 1000px 1200px 100%


Shades operates a 12 column grid system.
If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

<div class="full-container">
    <div class="row">
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>
        <div class="col m1"> 1 </div>

    <div class="row">
        <div class="col m8"> 8 </div>
        <div class="col m4"> 4 </div>

    <div class="row">
        <div class="col m4"> 4 </div>
        <div class="col m4"> 4 </div>
        <div class="col m4"> 4 </div>

    <div class="row">
        <div class="col m6"> 6 </div>
        <div class="col m6"> 6 </div>

So, to create the layout you want, create a container (<div class="container">). Next, create a row (<div class="row">). To specify the desired number of columns, use class (tags with appropriate .col ) in combination with the device size and number of column(s) e.g .m4.
Note that the number of column(s) m4 should always add up to 12 for each row.

Supported Device Sizes are;

  • s (for phones - screens less than 768px wide)
  • m (for tablets - screens equal to or greater than 768px wide)
  • l (for small laptops - screens equal to or greater than 992px wide)
  • xl (for laptops and desktops - screens equal to or greater than 1200px wide)
.col .s12 .m6 .l6
.col .s12 .m6 .l6
.col .s12 .m6 .l3 .xl3
.col .s12 .m6 .l3 .xl3
.col .s12 .m6 .l3 .xl3
.col .s12 .m6 .l3 .xl3

Offsetting columns

Move columns to the right using .offset-#* classes. These classes increase the left margin of a column by * columns on # device option:

.col .m4
.col .m4 .offset-m4


Root font size is set to 1rem on the html element, so font sizes are generally set to cascade from the root. A grunt postcss task - pixrem generates pixel fallbacks for rem units

Headings all have the same line-height and margins. I know this is the point where i list a bunch of header text and blockquotes to make the page look cooler but im not gonna do that.

Some Useful text helpers

Class What it does
aligns text to the left
aligns text to the right
aligns text to the center
justifies text within its container like this - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sets text's font weight to light - 300
Sets text's font weight to normal - 400
Sets text's font weight to heavy - 600
Sets text's font style to italic
Adds text decoration line through to text
Sets text casing to UPPERCASE
Sets text's color to your themes primary color
Sets text's color to your themes default body color
Sets text's color to your themes chosen shade of gray. Useful for reducing text importance
Sets text's color to your themes chosen success color
Sets text's color to your themes chosen error color
Sets text's color to your themes chosen warning color
Sets text's color to white


Really!!! You expect me to show you what lists look like? FOH 🙄


Button elements, links with a button class, and input elements should all render exactly the same.

<input type="submit" value="Submit">
<input type="button" value="Input">
<a class="button">Link</a>

Secondary Buttons

Adding an secondary-button class will display a secondary color.

<button class="secondary-button">Button</button>

Muted Buttons

Adding a muted-button class will create ghost/outline buttons.

<button class="muted-button">Button</button>

Link Styled Buttons

Adding a link-button class to an existing main button or secondary button to create link styled buttons.

<button class="link-button">Button</button>

Inverted Buttons

Adding a inverted class to an existing main button or secondary button to create an inverted styled buttons.

<button class="inverted">Button</button>

In _buttons.scss, you can create new button styles by using the new button style mixin new-button-style ($button-color, $border-color, $background, $states-button-color, $states-border-color, $states-background) . All $states-* variables refer to the various states of the button (:hover, :active, :focus)

 @include new-button-style ($button-background, $button-background, none, white, $button-background, $button-background);

Button Sizes

You can specify diffrent button sizes by adding the related class

<button class="small">Small</button>
<button class="large">Large</button>
<button class="huge">Huge</button>

In _buttons.scss, you can create new button sizes by using the new button size mixin new-button-size ($font-size, $padding) .

 @include new-button-size (0.73rem, 0.4rem 0.4rem)

Disabled Buttons

Adding a disabled attribute will fade the buttons.

<button disabled >Button</button>

Round Buttons

Adding a round-button class will create rounded buttons.

<button class="round-button">Button</button>

Square Buttons

Adding a square-button class will create square buttons.

<button class="square-button">Button</button>

Full Width Buttons

Adding a full-button class will create full-width, block level buttons. Button styles can be combined.

<button class="full-button">Button</button>


Forms have full-width. Labels, selects, inputs, & textareas are block styled.

    <label for="full-name">Name</label>
    <input type="text" id="full-name" placeholder="Full name">

    <label for="email">Email</label>
    <input type="email" id="email" placeholder="Email address">

    <label for="disabled-field">Disabled</label>
    <input type="text" id="disabled-field" value="You cant edit this" disabled>

    <label for="error-field">Error Field</label>
    <input type="text" id="error-field" class="has-error" placeholder="Correct your input">

    <label for="country-code">Select Country</label>
    <select name="country-code" id="country-code">
        <option>American Samoa</option>

    <label class="radio">
        <input id="gender-male" name="gender" value="" type="radio">
    <label class="radio">
         <input id="gender-female" name="gender" value="" type="radio">

    <label for="address">Address</label>
    <textarea id="address"></textarea>

    <label class="checkbox">
        <input type="checkbox"> Remember me

    <input type="button" value="Submit">


Regular Table

            <td>Requires call</td>
            <th>3 People</th>
            <th>2 Approved</th>
Name Status Age Gender Notes
John Approved 22 Male None
Jamie Approved 32 Male Requires call
Jill Denied 22 Female None
3 People 2 Approved

Striped Table

Add a striped-table class for alternating row background colors.

<table class="striped-table">
  <!-- Content here -->
Name Status Age Gender Notes
John Approved 22 Male None
Jamie Approved 32 Male Requires call
Jill Denied 22 Female None



Shades has a robust set of padding helpers that would overide any previous padding.

  • The general syntax is padding-[amount] for including the padding of the amount sepecified on all sides of the element. Or padding-[side]-[amount] for including the padding of the amount sepecified on just the side specifed on the element e.g
    .padding-20 or .padding-right-20
  • You can remove padding from either all sides of an element by adding .no-padding or from one side by adding no-padding-[side] e.g .no-padding-right
  • When specifying a side to effect a padding, use any of the following top, right,bottom, left
  • When specifying a padding amount to effect a padding, use any integer of multiples of 5, ranging from 5 to 100 (5 -> 100) e.g .padding-20, .padding-35, .padding-right-75


All information regarding padding above apply to margin also.


See the full list of supported text helpers in the typography section above ↑.

Vertical Centering

You can vertically center an element with the vertical-center class. This can be used to vertically center both elements and text as shown below. It makes use of Flexbox so be sure to check for compatibilty issues.

<div class="vertical-center demo_v_center">
    <div class="vertical-center">Vertically centered</div>
Vertically centered


Add a .circle-image class for circlar images.

<img src="#" class="circle-image" alt="circlar Image">
Example of circlar-image CSS class

Add a .rounded-image class for rounded images.

<img src="#" class="rounded-image" alt="rounded Image">
Example of rounded-image CSS class

Add a responsive-image class for responsive images.

<img src="#" class="responsive-image" alt="Responsive Image">
Example of responsive-image CSS class

More helpers

Class What it does
.float-left float: left
.float-right float: right
.block display: block
.inline-block display: inline-block
.inline display: inline
.show display: block !important
.hide display: none !important

Refer to _helpers.scss to make use of more helpers


Refer to setup for how to create new themes. For a quick setup, when creating a new theme configure these vairables in your new theme scss file. These are core variables that can be used to easily create/diversify your theme.
If you intend adding more variables, included them in the _global_variables.scss which contains other variables used by shades.


// Theme Specific Variables/Config
$background: white; 
$alternate-background: #fafafa;

// Colors //

$primary-color: #49B1FE;
$secondary-color: #ea9433;; 
$accent-color: #cdcdcd;
$alternate-color: #404040;
$link-color: $primary-color;
$link-hover-color: darken($link-color, 15%);
$highlight: #ffeea8;
$error: #D33C40;
$color-error: $error;
$bq-border: 16px solid #f0f0f0;

// Typography //

// Body font
$font-color: #404040;
$font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif;

// Headings
$heading-font-color: #404040;
$heading-font-family: 'Kalam', cursive, Helvetica Neue, Helvetica, Arial, sans-serif;

// Borders //
$border-radius: 4px;

// Buttons //

$button-background: $primary-color;
$button-background-hover: darken($button-background, 10%);
$button-color: #ffffff;
$button-font-weight: 400;
$button-font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, sans-serif;
$button-font-size: 1rem;
$button-border-width: 1px;
$button-border-style: solid;
$button-border-color: $button-background;
$button-border-radius: $border-radius;
$button-text-transform: none;

// Accent buttons
$accent-button-background: $secondary-color;
$accent-button-color: #ffffff;
$accent-button-color-hover: #ffffff;

// Muted Buttons
$muted-border: 1px solid $accent-color;
$muted-border-hover: 1px solid darken($accent-color, 30%);
$muted-background: transparent;
$muted-background-hover: transparent;
$muted-color: darken($accent-color, 50%);
$muted-color-hover: darken($accent-color, 50%);

// Round Buttons
$round-buttons: 40px;