SCSS Boilerplate
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 themq()
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