/scss.boilerplate

SCSS boilerplate setup for responsive layouts

Primary LanguageJavaScript

SCSS Boilerplate

Build Status Build status Greenkeeper badge

modular styling skeleton and compiling setup with gulp

Table of Contents:

MediaQueries

Small (=All)

no MQ to use

progressive enhancement - load this for all clients

Medium

sreen and (min-width: 640px)

for all tablet devices

Large

screen and (min-width: 1024px)

for the desktop view

The MQ mixin

@mixin mq($name) {
    @if( $mq == $name ) {
        @content;
    }
}

usage:

body {
    @include mq('desktop') { color: red; }
    @include mq('mobile') { color: red; }
}

OR

@include mq('desktop') {
    body {
        color: red;
    }
}

FILES

/inc

This is the order in wich they will be included into the _main.scss

_/inc/reset.scss
html5 doctor css reset - http://html5doctor.com/html-5-reset-stylesheet

_/inc/variables.scss
Yes... This is the File were we put all variables
We could also put it in /_main.scss but i think configuration should be seperated from the code

_/inc/mixins.scss
Here are the functional definitions of the mixins and the functions

_/inc/helpers.scss
helpers like clearfix, border box model, and margin auto ...
These classes can be uses either as normal CSS-class or as an @extend argugment

/mq

_/mq/mobile.scss, _/mq/tablet.scss, _/mq/dektop.scss

The mobile file could also be named "all.scss" because it is loaded for every device
=> mobile first

These are the MQ-specific files. Each MQ in it's own file because of two reasons:

  • We need to set the context per $mq variable
    This variable is recognized by the mq() mixin used in _main.scss and /modules/*.scss
    See MQ-mixin

  • Because we have the MQ's in seperate files
    we can set the media queries directly in the <link>-Tag in our HTML header.
    This prevents that mobile devices have to load the full CSS code for all MQ
    ( WOW! very fast! such performance! )

<link rel="alternate" media="only screen and (min-width: 640px)" href="/css/tablet.css">  
<link rel="alternate" media="only screen and (min-width: 1024px)" href="/css/desktop.css">

TODOS:

  • try to use node-sass-chokidar with gulp-sass
  • Clean Documentation
  • split open and closed versions
  • extend the mixins
  • test/improve the ability for Backbone/Foundation Boilerplate implementation
  • update the doc (mq's changed ... import flow improved)
  • find solution for importflow (reset, shame, ...) maybe put it in all/mobile MQ
  • seperated files VS. full.scss