From 70b011e44a0d309efbc0a9e51b084066e6687e6f Mon Sep 17 00:00:00 2001 From: Scott Davis Date: Wed, 21 Mar 2012 13:09:22 -0400 Subject: [PATCH] added more detail to presentation --- Gemfile.lock | 2 + assets/.DS_Store | Bin 6148 -> 6148 bytes assets/javascripts/application.js.coffee | 1 - assets/stylesheets/application.css.scss | 30 +++++- presentation/02_sass.slides | 8 +- presentation/05_variables.slides | 21 +--- presentation/06_math.slides | 7 +- presentation/07_inheiritance.slides | 4 +- presentation/08_compass.slides | 120 +++++++++++++++++------ 9 files changed, 138 insertions(+), 55 deletions(-) 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 9eecc6a10892af54c7e9905601dc2cb93f1f5209..fb5d98fa8f74bf0448826851cdbb8cb75b32de2e 100644 GIT binary patch delta 291 zcmZoMXfc=|#>B)qu~2NHo}wTt0|Nsi1A_nqLn=eDXHI_d#Dvw0KQJ=tf+W}&G8u9i z5*gBAl1VxFNkDO+Y6dqT)&OG0|Nj{nCi5^hOPiYLC>WVo*6Ju!o0}WxD3};q)Yfux zaBvEAPhQ1nP>*6-S#VKaPJUiG$OItfX2=5CQwGGv49N^dKzj=qN+1qG*vWVUWaob{ z0J1>3ih-&s8FE1GW5@uKsaSLcL3FWz^lg5~SjV!Nor9kP7z9Ahcjn3bB9B`mu~2NHo}wTl0|NsP3otOGG88A37Z*%SSk1^d*@CHA+T2V>!NSC> zR!5=Q+}uD%!Nl02ww9BFgHvF} 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 + + +