sass_compass_unleashed/presentation/08_compass.slides

!SLIDE
# Compass
## http://compass-style.org

!SLIDE

* Stylesheet framework
* Considered Sass standard library
* Standalone application
* Has the ability to have application integrations (Rails, Django, etc.)

!SLIDE

## Currently the only application integration supported by the core team is Rails

!SLIDE big-list

## Features

* Sprites
* CSS3
* Layout tools
* And much more

!SLIDE

# Sprites!

!SLIDE medium-list

* Fewer HTTP requests.
* You don't have a bunch of individual images to manage.
* Customizable.
* IT'S EASY!

!SLIDE

# This EASY!

``` scss

@import "my-icons/*.png";
@include all-my-icons-sprites;

```

!SLIDE
## BAM!
``` scss
.my-icons-sprite,
.my-icons-delete,
.my-icons-edit,
.my-icons-new,
.my-icons-save   { 
  background: url('/images/my-icons-s34fe0604ab.png') no-repeat; 
}

.my-icons-delete { background-position: 0 0; }
.my-icons-edit   { background-position: 0 -32px; }
.my-icons-new    { background-position: 0 -64px; }
.my-icons-save   { background-position: 0 -96px; }
```

!SLIDE

# Sprite Layouts

!SLIDE
## Vertical (default)
<img src='/assets/vert.png' >

!SLIDE
## Horizontal
<img src='/assets/horizontal.png' >

!SLIDE
## Diagonal
<img src='/assets/diagonal.png' >

!SLIDE

## Smart
<img src='/assets/smart.png' >

!SLIDE

# Magic Selectors

* my-buttons/glossy.png
* my-buttons/glossy_hover.png
* my-buttons/glossy_active.png
* my-buttons/glossy_target.png

!SLIDE

# Example

``` scss
@import "my-buttons/*.png";

a {
  @include my-buttons-sprite(glossy)
}
```

!SLIDE

# BAM!

``` scss
.my-buttons-sprite, a {
  background: url('/my-buttons-sedfef809e2.png') no-repeat;
}

a {
  background-position: 0 0;
}
a:hover, a.glossy-hover {
  background-position: 0 -40px;
}
a:target, a.glossy-target {
  background-position: 0 -60px;
}
a:active, a.glossy-active {
  background-position: 0 -20;
}
```

!SLIDE important

# Beware of your file size!

!SLIDE

# We support most CSS3 properties with vendor prefixes.

!SLIDE big-list

* Gradients
* Shadows
* Box model
* Transitions
* Much more

!SLIDE big-list

# Layout tools

* Grid
* Vertical rhythm
* And more!

!SLIDE
<div class='standard-grid' ></div>

!SLIDE grid-slide-scss

``` scss
.grid {
  @include grid-background($total, $column, $gutter, $baseline, 
                           $offset, $column-color, $gutter-color, 
                           $baseline-color, $force-fluid)
}
```


!SLIDE

# Vertical rhythm

## The spacing and arrangement of text as the reader descends the page.

!SLIDE

## "Just as regular use of time provides rhythm in music, so regular use of space provides rhythm in typography, and without rhythm the listener, or the reader, becomes disorientated and lost." - 24ways.org

!SLIDE

<div class='grid' ></div>

!SLIDE

<img src='/assets/rhythm_layout.png' width="700px">

!SLIDE medium-list

* Height : rhythms
* Width  : columns

!SLIDE

``` scss
$release-content-height            : rhythm(2);

$section-side-width                : column-width(4);

$primary-image-caption-line-height : floor($base-line-height / 2); 

$group-image-height                : rhythm(6);

.contents .show {
  h1 {
    @include header(3);
    @include padding-leader;
    @include trailer;
    color  : $primary-accent-color;
  }
// etc ...
```

!SLIDE
<img src='/assets/vert_rhythm_bad.jpg' >

http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typography-in-your-designs/

!SLIDES

# Extensions

* fancy-buttons
* sassy-buttons
* susy
* blueprint
* twitter-bootstrap
* etc...

!SLIDE 

<img src='/assets/fancy-buttons.png' >