diff --git a/.sass-cache/21994e5998254a2f4b4a20080dd2af85c72ade8e/application.css.scssc b/.sass-cache/21994e5998254a2f4b4a20080dd2af85c72ade8e/application.css.scssc
index d2e73c2..9be0aa7 100644
Binary files a/.sass-cache/21994e5998254a2f4b4a20080dd2af85c72ade8e/application.css.scssc and b/.sass-cache/21994e5998254a2f4b4a20080dd2af85c72ade8e/application.css.scssc differ
diff --git a/assets/images/36kou7.jpg b/assets/images/36kou7.jpg
new file mode 100644
index 0000000..d0caa67
Binary files /dev/null and b/assets/images/36kou7.jpg differ
diff --git a/assets/images/InceptionArch_Slusher.jpg b/assets/images/InceptionArch_Slusher.jpg
new file mode 100644
index 0000000..5e0f75f
Binary files /dev/null and b/assets/images/InceptionArch_Slusher.jpg differ
diff --git a/assets/images/inception_meme.gif b/assets/images/inception_meme.gif
new file mode 100644
index 0000000..35d42e8
Binary files /dev/null and b/assets/images/inception_meme.gif differ
diff --git a/assets/images/susy-compass-grid-example.jpg b/assets/images/susy-compass-grid-example.jpg
new file mode 100644
index 0000000..0ad3b84
Binary files /dev/null and b/assets/images/susy-compass-grid-example.jpg differ
diff --git a/assets/javascripts/application.js.coffee b/assets/javascripts/application.js.coffee
index f396f03..5f47e50 100644
--- a/assets/javascripts/application.js.coffee
+++ b/assets/javascripts/application.js.coffee
@@ -1,3 +1,3 @@
#= require attentive
-Attentive.setup('#slides')
\ No newline at end of file
+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 f359877..a9a2c79 100644
--- a/assets/stylesheets/application.css.scss
+++ b/assets/stylesheets/application.css.scss
@@ -2,8 +2,17 @@
@import 'compass';
//@import 'syntax';
-$body-color : rgb(33,33,33);
-$code-background : lighten(mix($body-color, white), 30%);
+$dark-gray : rgb(33,33,33);
+$red : rgb(255, 0, 0);
+$white : white;
+$lighter-gray : lighten(mix($dark-gray, $white), 30%);
+
+$body-color : $dark-gray;
+$code-background : $lighter-gray;
+$important-color : $red;
+
+$compass-logo : 'dark-logo.png';
+$sass-logo : 'sass.gif';
body {
background-color: $body-color;
@@ -20,28 +29,23 @@ body {
position : absolute;
bottom : 0;
left : 20px;
- @include show-logo('dark-logo.png');
+ @include show-logo($compass-logo);
}
.sass {
position : absolute;
bottom : 10px;
right : 20px;
- @include show-logo('sass.gif');
+ @include show-logo($sass-logo);
}
-.style-big-list {
- li {
- font-size : 60px;
- }
+//extendables
+
+.rounded {
+ @include border-radius(10px);
}
-.style-variable-why {
- ul {
- width : 450px !important;
- margin : 0 auto;
- }
-}
+// syntax overrides
.na {
color : #19177C;
@@ -52,10 +56,6 @@ body {
border : none;
}
-.rounded {
- @include border-radius(10px);
-}
-
h1, h2, h3, li, p {
font-family : Nunito, sans-serif;
color : white;
@@ -79,6 +79,18 @@ h1, h2, h3, li, p {
&.active { opacity : 1.0 }
}
+ .style-big-list li {
+ font-size : 60px;
+ }
+
+ .style-sprite-layout ul {
+ width : 500px !important;
+ }
+
+ .style-variable-why ul {
+ width : 450px !important;
+ margin : 0 auto;
+ }
.style-better .highlight {
width : 800px;
@@ -124,7 +136,7 @@ h1, h2, h3, li, p {
.style-important {
h1 {
- color : rgb(255, 0, 0);
+ color : $important-color;
font-weight : normal;
}
@@ -132,3 +144,11 @@ h1, h2, h3, li, p {
}
+.grid {
+ background-color : $code-background;
+ margin : 0 auto;
+ height : 500px;
+ width : 700px;
+ @include grid-background(16, 20px, 10px, 20px, 5px, $force-fluid: true);
+}
+
diff --git a/presentation/07_inheiritance.slides b/presentation/07_inheiritance.slides
index 0edc007..9f5b79d 100644
--- a/presentation/07_inheiritance.slides
+++ b/presentation/07_inheiritance.slides
@@ -1,2 +1,32 @@
!SLIDE
-# Inheritance
\ No newline at end of file
+# Inheritance
+
+!SLIDE
+# Inception rule!
+
+
+!SLIDE
+
+
+!SLIDE
+# Well you can but it gets messy
+``` scss
+.foo {
+ width: 5px;
+ .bar {
+ height: 20px;
+ .baz {
+ color : red;
+ .what-comes-after-baz {
+ border : green solid 1px;
+ &.something {
+ @extend .float-left;
+ }
+ }
+ }
+ }
+}
+```
+
+!SLIDE
+# And slow
\ No newline at end of file
diff --git a/presentation/08_compass.slides b/presentation/08_compass.slides
new file mode 100644
index 0000000..7d4df4c
--- /dev/null
+++ b/presentation/08_compass.slides
@@ -0,0 +1,145 @@
+!SLIDE
+# Compass
+
+!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 big-list
+
+* Fewer http requests.
+* You don't have a bunch of individual images to manage.
+* Customizable
+* ITS 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 big-list sprite-layout
+
+# Layouts
+
+* Vertical (default)
+* Horizontal
+* Diagonal
+* Smart
+
+
+!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, a.glossy-hover {
+ background-position: 0 -40px;
+}
+a:target, a.glossy_target, a.glossy-target {
+ background-position: 0 -60px;
+}
+a:active, a.glossy_active, a.glossy-active {
+ background-position: 0 -20;
+}
+```
+
+!SLIDE important
+
+# Beware of your file size!
+
+!SLIDE
+
+# We support all CSS3 properties with vendor prefix's and new ones are being added all the time.
+
+!SLIDE big-list
+
+# Layout tools
+
+* Vertical rhythm
+* Grids
+* And more!
+
+!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
+
+
+
+