Responsive
with
Sass & Compass
Introduction
Summary
- What are Sass and Compass?
- How to install and run?
- Toolkit extension
- SVG Background
- Vertical Rhythm
- Si...
SASS & Compass
Sass: Extension of CSS3 adding rules, variables, mixins, selectors,
functions...
Compass: Open-source CSS A...
Install & Run
Pre-requirements: having Ruby Gems installed (pre-installed on Mac).
In the terminal:
> sudo gem install com...
Install & Run
Pre-requirements: having Sass and Compass installed.
In the terminal:
> gem install extension-name
In config...
Toolkitresponsive web design tool
SVG Background
Mixin generating SVG background images with PNG fallbacks.
How?
- create a directory for images containing ...
Vertical Rhythm
“The spacing and arrangement of text as the reader descends the page – is
contributed to by three factors:...
Vertical Rhythm
Margin and padding:
- Use the function rhythm()
- Calculate a value in em using the font-size of the text ...
SingularityGrid framework for responsive design
Singularity
- Set a grid as a global layout context
- $grids: number of columns, $gutters: space between columns
- Symmetr...
Singularity
Singularity
Singularity
Singularity
BreakpointMedia queries in sass
Breakpoint
- Mixing that makes writing media queries in Sass simple
- Single and pairs ($pair: 456px 794px;) queries
- Med...
Breakpoint
Breakpoint
thanks!
SASS
http://www.youtube.com/watch?v=fbVD32w1oTo&list=PL2CB1F80266E986EA
http://sassmeister.com/
Compass
http://www...
Responsive with SASS and compass
Upcoming SlideShare
Loading in …5
×

Responsive with SASS and compass

1,373 views

Published on

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

Published in: Technology, Art & Photos
  • Be the first to comment

Responsive with SASS and compass

  1. 1. Responsive with Sass & Compass
  2. 2. Introduction
  3. 3. Summary - What are Sass and Compass? - How to install and run? - Toolkit extension - SVG Background - Vertical Rhythm - Singularity - Breakpoint
  4. 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. 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. 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. 7. Toolkitresponsive web design tool
  8. 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)
  9. 9. 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
  10. 10. Vertical Rhythm Margin and padding: - Use the function rhythm() - Calculate a value in em using the font-size of the text of the container
  11. 11. SingularityGrid framework for responsive design
  12. 12. 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...)
  13. 13. Singularity
  14. 14. Singularity
  15. 15. Singularity
  16. 16. Singularity
  17. 17. BreakpointMedia queries in sass
  18. 18. 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
  19. 19. Breakpoint
  20. 20. Breakpoint
  21. 21. 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

×