Welcome!


RESPONSIVE
WEB DESIGN

#McrFRED 
30th April 2013


SPONSORS




SASS for responsive & modular CSS

Tom Jenkins

@itsravenous


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).




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


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

sass for modular and responsive

  • 1,897
Loading comments...