Responsivewith

Sass & Compass

Introduction

Summary

- What are Sass and Compass?

- How to install and run?

- Toolkit extension

- SVG Background

- Vertical Rhythm

- Singularity

- Breakpoint

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

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

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’

Toolkitresponsive web design tool

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)

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

Vertical Rhythm

Margin and padding:

- Use the function rhythm()

- Calculate a value in em using the font-size of the text of the container

SingularityGrid framework for responsive design

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

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

- Media types: 'not screen'...

- Multiple feature: types, orientation, resolution

Breakpoint

Breakpoint

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