more slides

assets/stylesheets/application.css.scss

@@ -30,6 +30,19 @@ body {
   @include show-logo('sass.gif');
 }
 
+.style-big-list {
+  li {
+    font-size : 60px;
+  }
+}
+
+.style-variable-why {
+  ul {
+    width  : 450px !important;
+    margin : 0 auto;
+  }
+}
+
 .na {
   color : #19177C;
 }

presentation/02_sass.slides

@@ -11,9 +11,9 @@
 * Variables `$foo`
 * Mixins `@mixin`
 * Functions
-* Selector Interitance `@extend, &`
+* Selector Inheritance `@extend, &`
 * Control Directives `@if, @for, @each, @while`
-* Its a language
+* Its a language!
 
 !SLIDE variables
 # Variables
@@ -47,3 +47,40 @@
 }
 
 ```
+
+!SLIDE inheritance
+# Inheritance
+``` scss
+
+a {
+
+  color : $link-color;
+
+  &:hover {
+    color : $link-hover-color;
+  }
+
+}
+
+```
+
+!SLIDE extend
+## Extend
+``` scss
+
+.foo {
+  font-size : 10px;
+}
+
+.bar {
+  @extend .foo;
+}
+
+```
+``` css
+
+.foo, .bar {
+  font-size : 10px;
+}
+
+```

presentation/03_best_praticies.slides

@@ -0,0 +1,4 @@
+!SLIDE
+# Best Practices
+
+

presentation/04_colors.slides

@@ -1,27 +1,6 @@
 !SLIDE
 # Colors
 
-!SLIDE better
-## This is ok, but we can do better
-``` scss
-// dark gray
-$text-color                      : rgb(33,33,33) !default;
-// lightest gray
-$text-compliment-color           : rgb(188,188,188) !default;
-//h1, h2
-$title-color                     : rgb(63,63,63) !default;
-// blue
-$primary-accent-color            : rgb(33,89,167) !default;
-// blue on dark
-$primary-accent-compliment-color : rgb(138, 182, 225) !default;
-//orange - link color
-$secondary-accent-color          : rgb(199, 105, 0) !default;
-// light gray
-$ancillary-color                 : rgb(109,109,109) !default;
-// lighter gray
-$ancillary-compliment-color      : rgb(150,150,150) !default;
-```
-
 !SLIDE bad
 # This is bad
 
@@ -42,8 +21,26 @@ $lightest-gray : rgb(188,188,188) !default;
 
 ```
 
-!SLIDE
+!SLIDE better
-# But it isn't always bad
+## This is ok, but we can do better
+``` scss
+// dark gray
+$text-color                      : rgb(33,33,33) !default;
+// lightest gray
+$text-compliment-color           : rgb(188,188,188) !default;
+//h1, h2
+$title-color                     : rgb(63,63,63) !default;
+// blue
+$primary-accent-color            : rgb(33,89,167) !default;
+// blue on dark
+$primary-accent-compliment-color : rgb(138, 182, 225) !default;
+//orange - link color
+$secondary-accent-color          : rgb(199, 105, 0) !default;
+// light gray
+$ancillary-color                 : rgb(109,109,109) !default;
+// lighter gray
+$ancillary-compliment-color      : rgb(150,150,150) !default;
+```
 
 !SLIDE pallet
 # Pallets

presentation/05_variables.slides

@@ -0,0 +1,64 @@
+!SLIDE variable-layout
+# Variables Definitions
+
+!SLIDE bad-variables
+``` scss
+// 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;
+    margin-bottom : 10px;
+    display       : block;
+    @extend .float-right;
+  }
+
+  .release_identifiers {
+    @extend .float-right;
+    text-align  : right;
+    font-family : $ancillary-font;
+  }
+}
+```
+
+!SLIDE important
+
+#Always define your variables at the top of each file!
+
+!SLIDE big-list variable-why
+
+* Easy to find
+* Easy to update
+* No suprises
+
+!SLIDE
+
+``` scss
+/* Local Variaibles */
+$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);
+$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 {
+  h1 {
+    @include header(3);
+    @include trailer;
+    color  : $primary-accent-color;
+  }
+  // ... goes on for 100+ lines
+```

presentation/06_math.slides

@@ -0,0 +1,45 @@
+!SLIDE
+# Math
+## Is your best friend
+
+!SLIDE long
+# *Almost* every thing a designer does can be converted into some sort of mathmatical layout... *ALMOST*
+
+!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 demensions
+``` scss
+.play {
+  left: ($width / 2) - (global-sprite-width(play_movie) / 2);
+  top: ($height / 2) - (global-sprite-height(play_movie) / 2);
+}
+```

presentation/07_inheiritance.slides

@@ -0,0 +1,2 @@
+!SLIDE
+# Inheritance