sass_compass_unleashed/presentation/06_math.slides
2012-03-23 15:55:41 -04:00

51 lines
778 B
Plaintext

!SLIDE
# Math
## is your best friend
!SLIDE long
# *Almost* everything a designer does can be converted into some sort of mathmatical layout... *ALMOST*
!SLIDE
<img src='/assets/The_Parthenon_in_Athens.jpg' >
!SLIDE
# Layout
``` scss
$wrapper-width : 960px;
$sidebar-width : 50px;
$main-content-width : $wrapper - $sidebar;
.wrapper {
width : $wrapper-width;
}
.sidebar {
width : $sidebar-width;
}
.content {
width : $main-content-width;
}
```
!SLIDE
# Ranges
``` scss
@for $i from 1 through 4 {
h#{$i} {
@include header($i);
}
}
```
!SLIDE
# Image dimensions
``` scss
.play {
left: ($width / 2) - (global-sprite-width(play_movie) / 2);
top: ($height / 2) - (global-sprite-height(play_movie) / 2);
}
```
<img src='/assets/play_button.png' >