added more detail to presentation

Gemfile.lock

@@ -6,6 +6,7 @@ PATH
       coffee-script
       compass (~> 0.12.rc)
       haml
+      naturalsort (~> 1.1.1)
       nokogiri
       pygments.rb
       rack (~> 1.4.0)
@@ -76,6 +77,7 @@ GEM
       treetop (~> 1.4.8)
     mime-types (1.17.2)
     multi_json (1.1.0)
+    naturalsort (1.1.1)
     nokogiri (1.5.2)
     polyglot (0.3.3)
     pygments.rb (0.2.7)

assets/javascripts/application.js.coffee

@@ -1,3 +1,2 @@
 #= require attentive
-
 Attentive.Presentation.setup('#slides')

assets/stylesheets/application.css.scss

@@ -84,6 +84,14 @@ h1, h2, h3, li, p {
     font-size : 60px;
   }
 
+  .style-medium-list li {
+    font-size : 40px;
+  }
+
+  .style-small-list li {
+    font-size : 20px;
+  }
+
   .style-sprite-layout ul {
     width : 500px !important;
   }
@@ -120,6 +128,12 @@ h1, h2, h3, li, p {
     }
   }
 
+  .style-grid-slide-scss {
+    .highlight {
+      font-size: 16px !important;
+    }
+  }
+
   code {
     @extend .rounded;
     
@@ -145,9 +159,11 @@ h1, h2, h3, li, p {
   }
 
 }
-
+@mixin my-grid {
-.grid {
   @include grid-background(16, 20px, 10px, 20px, 5px, $force-fluid: true);
+}
+.grid {
+  @include my-grid;
 
   background-color : $code-background;
   margin           : 0 auto;
@@ -155,3 +171,13 @@ h1, h2, h3, li, p {
   width            : 700px;
 }
 
+
+.standard-grid {
+  $show-baseline-grid-backgrounds: false;
+  @include my-grid;
+
+  background-color : $code-background;
+  margin           : 0 auto;
+  height           : 500px;
+  width            : 700px;
+}

presentation/02_sass.slides

@@ -51,17 +51,17 @@
 !SLIDE inheritance
 # Inheritance
 ``` scss
-
 a {
-
   color : $link-color;
 
   &:hover {
     color : $link-hover-color;
   }
-
 }
-
+```
+``` css
+a { color : blue; }
+a:hover { color : red; }
 ```
 
 !SLIDE extend

presentation/05_variables.slides

@@ -3,12 +3,12 @@
 
 !SLIDE bad-variables
 ``` scss
+$height : 2px;
 // There are 100 lines before this
 .content_head {
   @include clearfix;
   
   .hr { 
-    $height       : 2px;
     padding-top   : (rhythm(1) / 2) - $height;
     width         : 100%;
     border-bottom : $height solid $secondary-accent-color;
@@ -33,28 +33,17 @@
 
 * Easy to find
 * Easy to update
-* No suprises
+* No surprises
 
 !SLIDE
 
 ``` scss
-/* Local Variaibles */
+/* Local Variables */
-$release-content-width       : 760px;
-$release-content-border-size : 6px;
-$release-content-top-margin  : 9px;
 $release-content-height      : rhythm(2);
-
+$section-side-width          : column-width(4) + $sidebar-width;
-$section-side-width          : column-width(4);
-$section-side-height         : 24;
-$section-side-li-padding     : 10px; 
-
-$control-border-height       : 1px;
-$control-box-height          : 2;
-$control-top-box-leader      : 1;
-
 $group-image-height          : rhythm(6);
 
-.contents .show {
+.show {
   h1 {
     @include header(3);
     @include trailer;

presentation/06_math.slides

@@ -5,6 +5,10 @@
 !SLIDE long
 # *Almost* every thing 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
@@ -42,4 +46,5 @@ $main-content-width : $wrapper - $sidebar;
   left: ($width / 2) - (global-sprite-width(play_movie) / 2);
   top: ($height / 2) - (global-sprite-height(play_movie) / 2);
 }
-```
+```
+<img src='/assets/play_button.png' >

presentation/07_inheiritance.slides

@@ -6,10 +6,10 @@
 <img src="/assets/InceptionArch_Slusher.jpg" width='800px'>
 
 !SLIDE
-<img src='/assets/36kou7.jpg' height='700px'>
+<img src='/assets/36kou7.jpg' height='600px'>
 
 !SLIDE
-# Well you can but it gets messy
+## Well you can but it gets messy
 ``` scss
 .foo {
   width: 5px;

presentation/08_compass.slides

@@ -26,7 +26,7 @@
 
 # Sprites!
 
-!SLIDE big-list
+!SLIDE medium-list
 
 * Fewer http requests.
 * You don't have a bunch of individual images to manage.
@@ -51,7 +51,9 @@
 .my-icons-delete,
 .my-icons-edit,
 .my-icons-new,
-.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; }
+.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; }
@@ -59,15 +61,26 @@
 .my-icons-save   { background-position: 0 -96px; }
 ```
 
-!SLIDE big-list sprite-layout
+!SLIDE
 
-# Layouts
+# Sprite Layouts
 
-* Vertical (default)
+!SLIDE
-* Horizontal
+## Vertical (default)
-* Diagonal
+<img src='/assets/vert.png' >
-* Smart
 
+!SLIDE
+## Horizontal
+<img src='/assets/horizontal.png' >
+
+!SLIDE
+## Diagonal
+<img src='/assets/diagonal.png' >
+
+!SLIDE
+
+## Smart
+<img src='/assets/smart.png' >
 
 !SLIDE
 
@@ -102,13 +115,13 @@ a {
 a {
   background-position: 0 0;
 }
-a:hover, a.glossy_hover, a.glossy-hover {
+a:hover, a.glossy-hover {
   background-position: 0 -40px;
 }
-a:target, a.glossy_target, a.glossy-target {
+a:target, a.glossy-target {
   background-position: 0 -60px;
 }
-a:active, a.glossy_active, a.glossy-active {
+a:active, a.glossy-active {
   background-position: 0 -20;
 }
 ```
@@ -119,16 +132,38 @@ a:active, a.glossy_active, a.glossy-active {
 
 !SLIDE
 
-# We support all CSS3 properties with vendor prefix's and new ones are being added all the time.
+# We support most CSS3 properties with vendor prefix's.
+
+!SLIDE big-list
+
+* Gradients
+* Shadows
+* Box model
+* Transitions
+* Much more
 
 !SLIDE big-list
 
 # Layout tools
 
+* Grid
 * Vertical rhythm
-* Grids
 * 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
@@ -145,27 +180,54 @@ a:active, a.glossy_active, a.glossy-active {
 
 !SLIDE
 
-## We need help!
+<img src='/assets/rhythm_layout.png' width="700px">
-https://github.com/chriseppstein/compass
 
-* Documentation
+!SLIDE medium-list
-* Stylesheet cleanup
-* Code Refactoring
 
-!SLIDE
+* Height : rhythms
-## Core Team
+* Width  : columns
-
-* Chris Eppstein
-* Scott Davis (me)
-* Brandon Mathis
-* Eirc Myer (The other one)
-* Anthony Short (newest member)
 
 !SLIDE
 
-# Charity
+``` scss
-### United Mitochondrial Disease Foundation
+$release-content-height            : rhythm(2);
-### Please donate - http://umdf.org/compass
+
+$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' >
+