Welcome!
RESPONSIVE
WEB DESIGN
#McrFRED
30th April 2013
SPONSORS
SASS for responsive & modular CSS
Tom Jenkins
responsive = widgetised
Widgets:
Latest blog posts list
Image gallery
Contact form
-
Design from the components out, not the layout in
-
Widgets should have a distinct concept and purpose
Reading: Jonathan Snook's SMACSS
conflict of interests
Two goals for CSS:
1. Maintainable/modular (for developers)
- scalable, readable code
- modular, plug and play widgets
2. High performance (for users)
- minimise HTTP requests, file size
Two audiences, two mutually exclusive goals
SASS to the rescue!
Development:
Separate SASS file for each widget
Another for layouts
Pull in any CSS frameworks
Production:
one minified CSS file.
rewind - what is SASS?
CSS Pre-processor, lets you:
- Nest rules
- Use $variables
- Write @mixins (helper functions)
- @extend classes (OOCSS)
Compiles to regular ol' CSS.
@mixin example
compass - a SASS extension
-
CSS3 helpers (no more vendor prefixes!)
- compass watch - compiles SASS -> CSS on save
the grid problem
an easy solution - css frameworks
- Hard work already done
- No reinventing the wheel
- Often modular & customisable
use with SASS - just @import.
Some are even available as SASS (e.g. Foundation).
- Hard work already done
- No reinventing the wheel
- Often modular & customisable
one BIG problem with CSS frameworks...
...presentational classes - no!
A typical layout...
you might as well build your layouts with tables.
There, I said it.
presentational classes
- Are hard to reskin
- Make writing semantic, reusable code difficult
- limit 'responsive thinking'
- And if you want your columns to do anything but stack on smaller screens:
Fear not. SASS to the rescue, again.
approach 1: use a SASS grid library
SUSY - http://susy.oddbird.net
Zen Grids - http://zengrids.com
Helper @mixins, grid setup via $variables.
approach 2: @extend
the @extend idea
inheriting the styles of another selector
http://codepen.io/itsravenous/pen/cdGFm - Foundation grid example
@extend, SASS grids and file size
using @mixins from a SASS grid = repeated blocks of the same CSS
@extend, on the other hand, just generates one code block with lots of selectors.
But most servers will
gzip
your css (and other files) so go with whatever feels more you.
both @extend and @mixins afford the same awesome end result
all the readability of presentational classes...
...without them ending up in your markup
so when you reskin, you edit CSS (SASS), not HTML.
you can do this with your own selectors too, not just framework classes
I call this
"Presentational Semantics"
(TM, ©, ® #youheardithearfirst)
so go forth and be SASSy!
@include triangle
@extend .fancy-heading
@include
dinosaur(10em, green)
Cheers. Questions? Threats? Grab me now or tweet @itsravenous later
sass for modular and responsive
By itsravenous
