Responsive Web Design presentation for Drupal User Group Toronto. Presented by Romain Nirennold from Therefore Interactive.

1. Responsive
with
Sass & Compass

2. Introduction

3. Summary
- What are Sass and Compass?
- How to install and run?
- Toolkit extension
- SVG Background
- Vertical Rhythm
- Singularity
- Breakpoint

4. SASS & Compass
Sass: Extension of CSS3 adding rules, variables, mixins, selectors,
functions...
Compass: Open-source CSS Authoring Framework.
- add various mixins to Sass
- documentation: http://compass-style.org

5. Install & Run
Pre-requirements: having Ruby Gems installed (pre-installed on Mac).
In the terminal:
> sudo gem install compass (install the lastest version)
> compass create project-name (add directories and files)
> cd project-directory
> compass install compass
> compass watch sass-directory
*new project / *existing project

6. Install & Run
Pre-requirements: having Sass and Compass installed.
In the terminal:
> gem install extension-name
In config.rb file:
> require ‘extension-name’
In .scss file:
> @import ‘extension-name’

7. Toolkitresponsive web design tool

8. SVG Background
Mixin generating SVG background images with PNG fallbacks.
How?
- create a directory for images containing SVG and PNG
Result?
- use SVG for background images
- generate a PNG sprite (ex: IE8 or old android browsers)
- use parameters (ex: $with-dimensions: false)

10. Vertical Rhythm
“The spacing and arrangement of text as the reader descends the page – is
contributed to by three factors: font size, line height and margin or padding.”
Font-size and line-height:
- Define a base font-size and line-height
- When font-size changes, line-height is recalculated

11. Vertical Rhythm
Margin and padding:
- Use the function rhythm()
- Calculate a value in em using the font-size of the text of the container

12. SingularityGrid framework for responsive design

13. Singularity
- Set a grid as a global layout context
- $grids: number of columns, $gutters: space between columns
- Symmetric (12), asymmetric (8 4) and responsive grids
- Use the “grid-span” mixin: grid-span(span, location)
+ Output style: method of width calculation to align items
+ Span: how many columns you want to span
+ Location: mixin to add a grid inside the general context
- Various options and tools to use (grid-toggle, different outputs...)

14. Singularity

15. Singularity

16. Singularity

17. Singularity

18. BreakpointMedia queries in sass

19. Breakpoint
- Mixing that makes writing media queries in Sass simple
- Single and pairs ($pair: 456px 794px;) queries
- Media types: 'not screen'...
- Multiple feature: types, orientation, resolution

20. Breakpoint

21. Breakpoint

22. thanks!
SASS
http://www.youtube.com/watch?v=fbVD32w1oTo&list=PL2CB1F80266E986EA
http://sassmeister.com/
Compass
http://www.youtube.com/playlist?list=PL45DD77A4CCA76ED3
Compass Extensions
https://github.com/Team-Sass/toolkit
https://github.com/Team-Sass/breakpoint
https://github.com/Team-Sass/Singularity