added more detail to presentation
This commit is contained in:
Scott Davis
parent
c52b0ba18d
commit
70b011e44a
@ -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)
|
||||
|
||||
BIN
assets/.DS_Store
vendored
BIN
assets/.DS_Store
vendored
Binary file not shown.
@ -1,3 +1,2 @@
|
||||
#= require attentive
|
||||
|
||||
Attentive.Presentation.setup('#slides')
|
||||
@ -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;
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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' >
|
||||
@ -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;
|
||||
|
||||
@ -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)
|
||||
<img src='/assets/vert.png' >
|
||||
|
||||
!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!
|
||||
https://github.com/chriseppstein/compass
|
||||
<img src='/assets/rhythm_layout.png' width="700px">
|
||||
|
||||
* 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
|
||||
<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' >
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user