Responsive with SASS and compass
?Download as PPT, PDF?
1 like?1,445 views
Responsive Web Design presentation for Drupal User Group Toronto. Presented by Romain Nirennold from Therefore Interactive.
Responsive with SASS and 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 ¨C 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