diff --git a/Gemfile.lock b/Gemfile.lock
index b4aa12a..1110cb1 100644
--- a/Gemfile.lock
+++ b/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)
diff --git a/assets/.DS_Store b/assets/.DS_Store
index 9eecc6a..fb5d98f 100644
Binary files a/assets/.DS_Store and b/assets/.DS_Store differ
diff --git a/assets/javascripts/application.js.coffee b/assets/javascripts/application.js.coffee
index 5f47e50..82951a1 100644
--- a/assets/javascripts/application.js.coffee
+++ b/assets/javascripts/application.js.coffee
@@ -1,3 +1,2 @@
#= require attentive
-
Attentive.Presentation.setup('#slides')
\ No newline at end of file
diff --git a/assets/stylesheets/application.css.scss b/assets/stylesheets/application.css.scss
index 1910088..69e04c9 100644
--- a/assets/stylesheets/application.css.scss
+++ b/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 {
}
}
-
-.grid {
+@mixin my-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;
+}
\ No newline at end of file
diff --git a/presentation/02_sass.slides b/presentation/02_sass.slides
index 9e27f05..cc06d85 100644
--- a/presentation/02_sass.slides
+++ b/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
diff --git a/presentation/05_variables.slides b/presentation/05_variables.slides
index 2af36d5..7eeb38b 100644
--- a/presentation/05_variables.slides
+++ b/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 */
-$release-content-width : 760px;
-$release-content-border-size : 6px;
-$release-content-top-margin : 9px;
+/* Local Variables */
$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;
-
+$section-side-width : column-width(4) + $sidebar-width;
$group-image-height : rhythm(6);
-.contents .show {
+.show {
h1 {
@include header(3);
@include trailer;
diff --git a/presentation/06_math.slides b/presentation/06_math.slides
index 85677ae..9d6ad7f 100644
--- a/presentation/06_math.slides
+++ b/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
+
+
+
!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);
}
-```
\ No newline at end of file
+```
+
\ No newline at end of file
diff --git a/presentation/07_inheiritance.slides b/presentation/07_inheiritance.slides
index 8af07f4..df15782 100644
--- a/presentation/07_inheiritance.slides
+++ b/presentation/07_inheiritance.slides
@@ -6,10 +6,10 @@
!SLIDE
-
+
!SLIDE
-# Well you can but it gets messy
+## Well you can but it gets messy
``` scss
.foo {
width: 5px;
diff --git a/presentation/08_compass.slides b/presentation/08_compass.slides
index 3bb6b2d..c93c363 100644
--- a/presentation/08_compass.slides
+++ b/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)
-* Horizontal
-* Diagonal
-* Smart
+!SLIDE
+## Vertical (default)
+
+!SLIDE
+## Horizontal
+
+
+!SLIDE
+## Diagonal
+
+
+!SLIDE
+
+## Smart
+
!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
+
+
+!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!
-https://github.com/chriseppstein/compass
+
-* Documentation
-* Stylesheet cleanup
-* Code Refactoring
+!SLIDE medium-list
-!SLIDE
-## Core Team
-
-* Chris Eppstein
-* Scott Davis (me)
-* Brandon Mathis
-* Eirc Myer (The other one)
-* Anthony Short (newest member)
+* Height : rhythms
+* Width : columns
!SLIDE
-# Charity
-### United Mitochondrial Disease Foundation
-### Please donate - http://umdf.org/compass
+``` 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
+
+
+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
+
+
+