Compare commits
No commits in common. "master" and "gh-pages" have entirely different histories.
6
Gemfile
@ -1,6 +0,0 @@
|
||||
source :rubygems
|
||||
|
||||
gem 'sinatra', '~> 1.3.2'
|
||||
gem 'attentive', :path => '../attentive'
|
||||
gem 'thin'
|
||||
|
||||
148
Gemfile.lock
@ -1,148 +0,0 @@
|
||||
PATH
|
||||
remote: ../attentive
|
||||
specs:
|
||||
attentive (0.0.1)
|
||||
backbone-rails
|
||||
coffee-script
|
||||
compass (~> 0.12.rc)
|
||||
haml
|
||||
naturalsort (~> 1.1.1)
|
||||
nokogiri
|
||||
pygments.rb
|
||||
rack (~> 1.4.0)
|
||||
rdiscount
|
||||
sinatra
|
||||
sprockets
|
||||
sprockets-sass
|
||||
sprockets-vendor_gems
|
||||
thor
|
||||
|
||||
GEM
|
||||
remote: http://rubygems.org/
|
||||
specs:
|
||||
actionmailer (3.2.2)
|
||||
actionpack (= 3.2.2)
|
||||
mail (~> 2.4.0)
|
||||
actionpack (3.2.2)
|
||||
activemodel (= 3.2.2)
|
||||
activesupport (= 3.2.2)
|
||||
builder (~> 3.0.0)
|
||||
erubis (~> 2.7.0)
|
||||
journey (~> 1.0.1)
|
||||
rack (~> 1.4.0)
|
||||
rack-cache (~> 1.1)
|
||||
rack-test (~> 0.6.1)
|
||||
sprockets (~> 2.1.2)
|
||||
activemodel (3.2.2)
|
||||
activesupport (= 3.2.2)
|
||||
builder (~> 3.0.0)
|
||||
activerecord (3.2.2)
|
||||
activemodel (= 3.2.2)
|
||||
activesupport (= 3.2.2)
|
||||
arel (~> 3.0.2)
|
||||
tzinfo (~> 0.3.29)
|
||||
activeresource (3.2.2)
|
||||
activemodel (= 3.2.2)
|
||||
activesupport (= 3.2.2)
|
||||
activesupport (3.2.2)
|
||||
i18n (~> 0.6)
|
||||
multi_json (~> 1.0)
|
||||
arel (3.0.2)
|
||||
backbone-rails (0.9.1)
|
||||
rails (>= 3.0.0)
|
||||
blankslate (2.1.2.4)
|
||||
builder (3.0.0)
|
||||
chunky_png (1.2.5)
|
||||
coffee-script (2.2.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.2.0)
|
||||
compass (0.12.1)
|
||||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.1)
|
||||
daemons (1.1.8)
|
||||
erubis (2.7.0)
|
||||
eventmachine (0.12.10)
|
||||
execjs (1.3.0)
|
||||
multi_json (~> 1.0)
|
||||
ffi (1.0.11)
|
||||
fssm (0.2.8.1)
|
||||
haml (3.1.4)
|
||||
hike (1.2.1)
|
||||
i18n (0.6.0)
|
||||
journey (1.0.3)
|
||||
json (1.6.5)
|
||||
mail (2.4.4)
|
||||
i18n (>= 0.4.0)
|
||||
mime-types (~> 1.16)
|
||||
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)
|
||||
rubypython (~> 0.5.3)
|
||||
rack (1.4.1)
|
||||
rack-cache (1.2)
|
||||
rack (>= 0.4)
|
||||
rack-protection (1.2.0)
|
||||
rack
|
||||
rack-ssl (1.3.2)
|
||||
rack
|
||||
rack-test (0.6.1)
|
||||
rack (>= 1.0)
|
||||
rails (3.2.2)
|
||||
actionmailer (= 3.2.2)
|
||||
actionpack (= 3.2.2)
|
||||
activerecord (= 3.2.2)
|
||||
activeresource (= 3.2.2)
|
||||
activesupport (= 3.2.2)
|
||||
bundler (~> 1.0)
|
||||
railties (= 3.2.2)
|
||||
railties (3.2.2)
|
||||
actionpack (= 3.2.2)
|
||||
activesupport (= 3.2.2)
|
||||
rack-ssl (~> 1.3.2)
|
||||
rake (>= 0.8.7)
|
||||
rdoc (~> 3.4)
|
||||
thor (~> 0.14.6)
|
||||
rake (0.9.2.2)
|
||||
rdiscount (1.6.8)
|
||||
rdoc (3.12)
|
||||
json (~> 1.4)
|
||||
rubypython (0.5.3)
|
||||
blankslate (>= 2.1.2.3)
|
||||
ffi (~> 1.0.7)
|
||||
sass (3.1.15)
|
||||
sinatra (1.3.2)
|
||||
rack (~> 1.3, >= 1.3.6)
|
||||
rack-protection (~> 1.2)
|
||||
tilt (~> 1.3, >= 1.3.3)
|
||||
sprockets (2.1.2)
|
||||
hike (~> 1.2)
|
||||
rack (~> 1.0)
|
||||
tilt (~> 1.1, != 1.3.0)
|
||||
sprockets-sass (0.7.0)
|
||||
sprockets (~> 2.0)
|
||||
tilt (~> 1.1)
|
||||
sprockets-vendor_gems (0.1.1)
|
||||
thin (1.3.1)
|
||||
daemons (>= 1.0.9)
|
||||
eventmachine (>= 0.12.6)
|
||||
rack (>= 1.0.0)
|
||||
thor (0.14.6)
|
||||
tilt (1.3.3)
|
||||
treetop (1.4.10)
|
||||
polyglot
|
||||
polyglot (>= 0.3.1)
|
||||
tzinfo (0.3.32)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
attentive!
|
||||
sinatra (~> 1.3.2)
|
||||
thin
|
||||
BIN
assets/.DS_Store
vendored
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 551 KiB After Width: | Height: | Size: 551 KiB |
|
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 53 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 40 KiB After Width: | Height: | Size: 40 KiB |
BIN
assets/images/.DS_Store
vendored
|
Before Width: | Height: | Size: 125 KiB |
|
Before Width: | Height: | Size: 551 KiB |
|
Before Width: | Height: | Size: 116 KiB |
|
Before Width: | Height: | Size: 25 KiB |
|
Before Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 34 KiB |
|
Before Width: | Height: | Size: 40 KiB |
|
Before Width: | Height: | Size: 43 B |
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 337 KiB |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 33 KiB |
|
Before Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 81 KiB |
|
Before Width: | Height: | Size: 43 B After Width: | Height: | Size: 43 B |
@ -1,2 +0,0 @@
|
||||
#= require attentive
|
||||
Attentive.Presentation.setup('#slides')
|
||||
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
|
Before Width: | Height: | Size: 337 KiB After Width: | Height: | Size: 337 KiB |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
@ -1,125 +0,0 @@
|
||||
$noise-bg: '';
|
||||
$base03: #002b36 !default; //darkest blue
|
||||
$base02: #073642 !default; //dark blue
|
||||
$base01: #586e75 !default; //darkest gray
|
||||
$base00: #657b83 !default; //dark gray
|
||||
$base0: #839496 !default; //medium gray
|
||||
$base1: #93a1a1 !default; //medium light gray
|
||||
$base2: #eee8d5 !default; //cream
|
||||
$base3: #fdf6e3 !default; //white
|
||||
$solar-yellow: #b58900 !default;
|
||||
$solar-orange: #cb4b16 !default;
|
||||
$solar-red: #dc322f !default;
|
||||
$solar-magenta: #d33682 !default;
|
||||
$solar-violet: #6c71c4 !default;
|
||||
$solar-blue: #268bd2 !default;
|
||||
$solar-cyan: #2aa198 !default;
|
||||
$solar-green: #859900 !default;
|
||||
|
||||
$solarized: dark !default;
|
||||
|
||||
@if $solarized == light {
|
||||
|
||||
$_base03: $base03;
|
||||
$_base02: $base02;
|
||||
$_base01: $base01;
|
||||
$_base00: $base00;
|
||||
$_base0: $base0;
|
||||
$_base1: $base1;
|
||||
$_base2: $base2;
|
||||
$_base3: $base3;
|
||||
|
||||
$base03: $_base3;
|
||||
$base02: $_base2;
|
||||
$base01: $_base1;
|
||||
$base00: $_base0;
|
||||
$base0: $_base00;
|
||||
$base1: $_base01;
|
||||
$base2: $_base02;
|
||||
$base3: $_base03;
|
||||
}
|
||||
|
||||
/* non highlighted code colors */
|
||||
$pre-bg: $base03 !default;
|
||||
$pre-border: darken($base02, 5) !default;
|
||||
$pre-color: $base1 !default;
|
||||
|
||||
|
||||
.highlight pre {
|
||||
//@include selection(adjust-color($base03, $lightness: 23%, $saturation: -65%), $text-shadow: $base03 0 1px);
|
||||
overflow: scroll;
|
||||
overflow-y: hidden;
|
||||
display: block;
|
||||
padding: .8em !important;
|
||||
overflow-x: auto;
|
||||
line-height: 1.45em;
|
||||
background: $base03 $noise-bg !important;
|
||||
color: $base1 !important;
|
||||
span { color: $base1 !important; }
|
||||
span { font-style: normal !important; font-weight: normal !important; }
|
||||
|
||||
.c { color: $base01 !important; font-style: italic !important; } /* Comment */
|
||||
.cm { color: $base01 !important; font-style: italic !important; } /* Comment.Multiline */
|
||||
.cp { color: $base01 !important; font-style: italic !important; } /* Comment.Preproc */
|
||||
.c1 { color: $base01 !important; font-style: italic !important; } /* Comment.Single */
|
||||
.cs { color: $base01 !important; font-weight: bold !important; font-style: italic !important; } /* Comment.Special */
|
||||
.err { color: $solar-red !important; background: none !important; } /* Error */
|
||||
.k { color: $solar-orange !important; } /* Keyword */
|
||||
.o { color: $base1 !important; font-weight: bold !important; } /* Operator */
|
||||
.p { color: $base1 !important; } /* Operator */
|
||||
.ow { color: $solar-cyan !important; font-weight: bold !important; } /* Operator.Word */
|
||||
.gd { color: $base1 !important; background-color: mix($solar-red, $base03, 25%) !important; display: inline-block; } /* Generic.Deleted */
|
||||
.gd .x { color: $base1 !important; background-color: mix($solar-red, $base03, 35%) !important; display: inline-block; } /* Generic.Deleted.Specific */
|
||||
.ge { color: $base1 !important; font-style: italic !important; } /* Generic.Emph */
|
||||
//.gr { color: #aa0000 } /* Generic.Error */
|
||||
.gh { color: $base01 !important; } /* Generic.Heading */
|
||||
.gi { color: $base1 !important; background-color: mix($solar-green, $base03, 20%) !important; display: inline-block; } /* Generic.Inserted */
|
||||
.gi .x { color: $base1 !important; background-color: mix($solar-green, $base03, 40%) !important; display: inline-block; } /* Generic.Inserted.Specific */
|
||||
//.go { color: #888888 } /* Generic.Output */
|
||||
//.gp { color: #555555 } /* Generic.Prompt */
|
||||
.gs { color: $base1 !important; font-weight: bold !important; } /* Generic.Strong */
|
||||
.gu { color: $solar-violet !important; } /* Generic.Subheading */
|
||||
//.gt { color: #aa0000 } /* Generic.Traceback */
|
||||
.kc { color: $solar-green !important; font-weight: bold !important; } /* Keyword.Constant */
|
||||
.kd { color: $solar-blue !important; } /* Keyword.Declaration */
|
||||
.kp { color: $solar-orange !important; font-weight: bold !important; } /* Keyword.Pseudo */
|
||||
.kr { color: $solar-magenta !important; font-weight: bold !important; } /* Keyword.Reserved */
|
||||
.kt { color: $solar-cyan !important; } /* Keyword.Type */
|
||||
.n { color: $solar-blue !important; }
|
||||
.na { color: $solar-blue !important; } /* Name.Attribute */
|
||||
.nb { color: $solar-green !important; } /* Name.Builtin */
|
||||
.nc { color: $solar-magenta !important;} /* Name.Class */
|
||||
.no { color: $solar-yellow !important; } /* Name.Constant */
|
||||
//.ni { color: #800080 } /* Name.Entity */
|
||||
.nl { color: $solar-green !important; }
|
||||
.ne { color: $solar-blue !important; font-weight: bold !important; } /* Name.Exception */
|
||||
.nf { color: $solar-blue !important; font-weight: bold !important; } /* Name.Function */
|
||||
.nn { color: $solar-yellow !important; } /* Name.Namespace */
|
||||
.nt { color: $solar-blue !important; font-weight: bold !important; } /* Name.Tag */
|
||||
.nx { color: $solar-yellow !Important; }
|
||||
//.bp { color: #999999 } /* Name.Builtin.Pseudo */
|
||||
//.vc { color: #008080 } /* Name.Variable.Class */
|
||||
.vg { color: $solar-blue !important; } /* Name.Variable.Global */
|
||||
.vi { color: $solar-blue !important; } /* Name.Variable.Instance */
|
||||
.nv { color: $solar-blue !important; } /* Name.Variable */
|
||||
//.w { color: #bbbbbb } /* Text.Whitespace */
|
||||
.mf { color: $solar-cyan !important; } /* Literal.Number.Float */
|
||||
.m { color: $solar-cyan !important; } /* Literal.Number */
|
||||
.mh { color: $solar-cyan !important; } /* Literal.Number.Hex */
|
||||
.mi { color: $solar-cyan !important; } /* Literal.Number.Integer */
|
||||
//.mo { color: #009999 } /* Literal.Number.Oct */
|
||||
.s { color: $solar-cyan !important; } /* Literal.String */
|
||||
//.sb { color: #d14 } /* Literal.String.Backtick */
|
||||
//.sc { color: #d14 } /* Literal.String.Char */
|
||||
.sd { color: $solar-cyan !important; } /* Literal.String.Doc */
|
||||
.s2 { color: $solar-cyan !important; } /* Literal.String.Double */
|
||||
.se { color: $solar-red !important; } /* Literal.String.Escape */
|
||||
//.sh { color: #d14 } /* Literal.String.Heredoc */
|
||||
.si { color: $solar-blue !important; } /* Literal.String.Interpol */
|
||||
//.sx { color: #d14 } /* Literal.String.Other */
|
||||
.sr { color: $solar-cyan !important; } /* Literal.String.Regex */
|
||||
.s1 { color: $solar-cyan !important; } /* Literal.String.Single */
|
||||
//.ss { color: #990073 } /* Literal.String.Symbol */
|
||||
//.il { color: #009999 } /* Literal.Number.Integer.Long */
|
||||
div { .gd, .gd .x, .gi, .gi .x { display: inline-block; width: 100%; }}
|
||||
}
|
||||
@ -1,183 +0,0 @@
|
||||
@import 'attentive';
|
||||
@import 'compass';
|
||||
//@import 'syntax';
|
||||
|
||||
$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;
|
||||
}
|
||||
|
||||
@mixin show-logo($logo) {
|
||||
background-image : image-url($logo);
|
||||
background-repeat : no-repeat;
|
||||
width : image-width($logo);
|
||||
height : image-height($logo);
|
||||
}
|
||||
|
||||
.compass {
|
||||
position : absolute;
|
||||
bottom : 0;
|
||||
left : 20px;
|
||||
@include show-logo($compass-logo);
|
||||
}
|
||||
|
||||
.sass {
|
||||
position : absolute;
|
||||
bottom : 10px;
|
||||
right : 20px;
|
||||
@include show-logo($sass-logo);
|
||||
}
|
||||
|
||||
//extendables
|
||||
|
||||
.rounded {
|
||||
@include border-radius(10px);
|
||||
}
|
||||
|
||||
// syntax overrides
|
||||
|
||||
.na {
|
||||
color : #19177C;
|
||||
}
|
||||
|
||||
.err {
|
||||
color : #008000;
|
||||
border : none;
|
||||
}
|
||||
|
||||
h1, h2, h3, li, p {
|
||||
font-family : Nunito, sans-serif;
|
||||
color : white;
|
||||
}
|
||||
|
||||
#slides {
|
||||
|
||||
@include transition-duration(0.5s);
|
||||
|
||||
.highlight {
|
||||
@extend .rounded;
|
||||
|
||||
background-color : $code-background;
|
||||
width : 90%;
|
||||
margin : 0 auto;
|
||||
margin-top : 20px;
|
||||
}
|
||||
|
||||
.slide {
|
||||
opacity : 0.4;
|
||||
|
||||
&.active { opacity : 1.0 }
|
||||
}
|
||||
|
||||
.style-big-list li {
|
||||
font-size : 60px;
|
||||
}
|
||||
|
||||
.style-medium-list li {
|
||||
font-size : 40px;
|
||||
}
|
||||
|
||||
.style-small-list li {
|
||||
font-size : 20px;
|
||||
}
|
||||
|
||||
.style-sprite-layout ul {
|
||||
width : 500px !important;
|
||||
}
|
||||
|
||||
.style-variable-why ul {
|
||||
width : 450px !important;
|
||||
margin : 0 auto;
|
||||
}
|
||||
|
||||
.style-better .highlight {
|
||||
width : 800px;
|
||||
}
|
||||
|
||||
.style-bad .highlight, .style-pallet .highlight {
|
||||
width : 700px;
|
||||
}
|
||||
|
||||
.style-variables .highlight {
|
||||
width : 500px;
|
||||
}
|
||||
|
||||
.style-mixins .highlight {
|
||||
width : 900px;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-top: 30px;
|
||||
font-size : 30px;
|
||||
width : 50%;
|
||||
margin : 0 auto;
|
||||
text-align : left;
|
||||
li {
|
||||
padding-top : 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.style-grid-slide-scss {
|
||||
.highlight {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
@extend .rounded;
|
||||
|
||||
background-color : $code-background;
|
||||
font-size : 90%;
|
||||
font-weight : bold;
|
||||
padding : 2px 10px;
|
||||
color : $body-color;
|
||||
}
|
||||
|
||||
.style-long {
|
||||
h1 {
|
||||
font-size : 60px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.style-important {
|
||||
h1 {
|
||||
color : $important-color;
|
||||
font-weight : normal;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@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;
|
||||
height : 500px;
|
||||
width : 700px;
|
||||
}
|
||||
|
||||
|
||||
.standard-grid {
|
||||
$show-baseline-grid-backgrounds: false;
|
||||
@include my-grid;
|
||||
|
||||
background-color : $code-background;
|
||||
margin : 0 auto;
|
||||
height : 500px;
|
||||
width : 700px;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 36 KiB After Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 81 KiB |
@ -1,8 +0,0 @@
|
||||
Attentive.configure do |c|
|
||||
c.title = "My presentation"
|
||||
|
||||
# add rack middleware here
|
||||
# require 'rack-livereload'
|
||||
# c.middleware << Rack::LiveReload
|
||||
end
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
!SLIDE
|
||||
# Welcome
|
||||
@ -1,151 +0,0 @@
|
||||
!SLIDE
|
||||
# Sass
|
||||
|
||||
!SLIDE
|
||||
# What is Sass?
|
||||
## Its a preprocesor
|
||||
|
||||
!SLIDE
|
||||
# What does it do?
|
||||
|
||||
* Variables `$foo`
|
||||
* Mixins `@mixin`
|
||||
* Functions
|
||||
* Selector Inheritance `@extend, &`
|
||||
* Control Directives `@if, @for, @each, @while`
|
||||
* Its a language!
|
||||
|
||||
!SLIDE variables
|
||||
# Variables
|
||||
|
||||
``` scss
|
||||
|
||||
$foo : #fffff;
|
||||
$bar : (1px * 2em) / 4px;
|
||||
|
||||
```
|
||||
|
||||
!SLIDE
|
||||
|
||||
# Lists
|
||||
|
||||
``` css
|
||||
border : 1px solid black;
|
||||
```
|
||||
|
||||
!SLIDE
|
||||
|
||||
``` scss
|
||||
$my-list : 1px solid black;
|
||||
$my-list2 : 1px, solid, black;
|
||||
$my-list3 : (1px solid black);
|
||||
|
||||
border : $my-list;
|
||||
|
||||
```
|
||||
|
||||
!SLIDE
|
||||
|
||||
# In ruby
|
||||
|
||||
``` ruby
|
||||
Sass::Script::List.new(['1px', 'solid', 'black'], ',')
|
||||
```
|
||||
|
||||
!SLIDE
|
||||
## List Functions
|
||||
|
||||
* `length($list)`
|
||||
* `nth($list, $n)`
|
||||
* `join($list1, $list2, [$separator])`
|
||||
* More coming soon!
|
||||
|
||||
|
||||
|
||||
!SLIDE mixins
|
||||
|
||||
# Functions and Mixins
|
||||
|
||||
``` scss
|
||||
|
||||
@function get-stops($colors, $stops) {
|
||||
$out:();
|
||||
@each $color in $colors {
|
||||
$i: index($colors, $color);
|
||||
$stop: 0% + nth($stops, $i);
|
||||
$out: append($out, $color $stop, 'comma');
|
||||
}
|
||||
@return $out;
|
||||
}
|
||||
|
||||
@mixin menu-level2-active {
|
||||
$args: get-stops($menu-active-colors, $menu-active-stops);
|
||||
@include background(linear-gradient($menu-active-direction, $args));
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
!SLIDE inheritance
|
||||
# Inheritance
|
||||
``` scss
|
||||
a {
|
||||
color : $link-color;
|
||||
|
||||
&:hover {
|
||||
color : $link-hover-color;
|
||||
}
|
||||
}
|
||||
```
|
||||
``` css
|
||||
a { color : blue; }
|
||||
a:hover { color : red; }
|
||||
```
|
||||
|
||||
!SLIDE extend
|
||||
## Extend
|
||||
``` scss
|
||||
|
||||
.foo {
|
||||
font-size : 10px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
@extend .foo;
|
||||
}
|
||||
|
||||
```
|
||||
``` css
|
||||
|
||||
.foo, .bar {
|
||||
font-size : 10px;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
!SLIDE
|
||||
## Extending with ruby
|
||||
|
||||
``` ruby
|
||||
def sprite(map, sprite, offset_x = ZERO, offset_y = ZERO)
|
||||
sprite = convert_sprite_name(sprite)
|
||||
verify_map(map)
|
||||
unless sprite.is_a?(Sass::Script::String)
|
||||
raise Sass::SyntaxError
|
||||
end
|
||||
url = sprite_url(map)
|
||||
position = sprite_position(map, sprite, offset_x, offset_y)
|
||||
Sass::Script::List.new([url] + position.value, :space)
|
||||
end
|
||||
Sass::Script::Functions.declare :sprite, [:map, :sprite]
|
||||
Sass::Script::Functions.declare :sprite, [:map, :sprite, :offset_x]
|
||||
Sass::Script::Functions.declare :sprite, [:map, :sprite, :offset_x, :offset_y]
|
||||
```
|
||||
|
||||
!SLIDE
|
||||
## Data types
|
||||
|
||||
* Bool
|
||||
* Color
|
||||
* List
|
||||
* Number
|
||||
* String
|
||||
@ -1,4 +0,0 @@
|
||||
!SLIDE
|
||||
# Best Practices
|
||||
|
||||
|
||||
@ -1,74 +0,0 @@
|
||||
!SLIDE
|
||||
# Colors
|
||||
|
||||
!SLIDE bad
|
||||
# This is bad
|
||||
|
||||
``` scss
|
||||
|
||||
$orange : rgb(138, 182, 225) !default;
|
||||
$blue : rgb(33,89,167) !default;
|
||||
$lighter-blue : rgb(138, 182, 225) !default;
|
||||
$gray : rgb(63,63,63) !default;
|
||||
$dark-gray : rgb(33,33,33) !default;
|
||||
$light-gray : rgb(109,109,109) !default;
|
||||
$lighter-gray : rgb(150,150,150) !default;
|
||||
$lightest-gray : rgb(188,188,188) !default;
|
||||
|
||||
.foo {
|
||||
color : $blue;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
!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 pallet
|
||||
# Pallets
|
||||
|
||||
``` scss
|
||||
// _pallet.scss
|
||||
$orange : rgb(138, 182, 225) !default;
|
||||
$blue : rgb(33,89,167) !default;
|
||||
$lighter-blue : rgb(138, 182, 225) !default;
|
||||
$gray : rgb(63,63,63) !default;
|
||||
$light-gray : rgb(109,109,109) !default;
|
||||
$lighter-gray : rgb(150,150,150) !default;
|
||||
$lightest-gray : rgb(188,188,188) !default;
|
||||
|
||||
// _colors.scss
|
||||
//text
|
||||
$text-color : $dark-gray;
|
||||
$text-compliment-color : $lightest-gray;
|
||||
$title-color : $gray;
|
||||
$primary-accent-color : $blue;
|
||||
$primary-accent-compliment-color : $lighter-blue;
|
||||
$secondary-accent-color : $orange;
|
||||
$ancillary-color : $light-gray;
|
||||
$ancillary-compliment-color : $lighter-gray;
|
||||
```
|
||||
|
||||
!SLIDE important long
|
||||
<img src="/assets/rage-face.png">
|
||||
# Only use your pallet colors to define your more descriptive color variables!
|
||||
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
!SLIDE variable-layout
|
||||
# Variables Definitions
|
||||
|
||||
!SLIDE bad-variables
|
||||
``` scss
|
||||
$height : 2px;
|
||||
// There are 100 lines before this
|
||||
.content_head {
|
||||
@include clearfix;
|
||||
|
||||
.hr {
|
||||
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 surprises
|
||||
|
||||
!SLIDE
|
||||
|
||||
``` scss
|
||||
/* Local Variables */
|
||||
$release-content-height : rhythm(2);
|
||||
$section-side-width : column-width(4) + $sidebar-width;
|
||||
$group-image-height : rhythm(6);
|
||||
|
||||
.show {
|
||||
h1 {
|
||||
@include header(3);
|
||||
@include trailer;
|
||||
color : $primary-accent-color;
|
||||
}
|
||||
// ... goes on for 100+ lines
|
||||
```
|
||||
@ -1,50 +0,0 @@
|
||||
!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
|
||||
|
||||
<img src='/assets/The_Parthenon_in_Athens.jpg' >
|
||||
|
||||
!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);
|
||||
}
|
||||
```
|
||||
<img src='/assets/play_button.png' >
|
||||
@ -1,51 +0,0 @@
|
||||
!SLIDE
|
||||
# Inheritance
|
||||
|
||||
!SLIDE
|
||||
# Inception rule!
|
||||
<img src="/assets/InceptionArch_Slusher.jpg" width='800px'>
|
||||
|
||||
!SLIDE
|
||||
<img src='/assets/36kou7.jpg' height='600px'>
|
||||
|
||||
!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
|
||||
|
||||
!SLIDE
|
||||
|
||||
## Selector layout
|
||||
|
||||
``` scss
|
||||
.release_title a{
|
||||
@extend h3;
|
||||
@include adjust-font-size-to(20px, 1);
|
||||
@include trailer;
|
||||
|
||||
text-decoration : none;
|
||||
display : block;
|
||||
|
||||
&:hover {
|
||||
color:$hover-color;
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -1,236 +0,0 @@
|
||||
!SLIDE
|
||||
# Compass
|
||||
## http://compass-style.org
|
||||
|
||||
!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 medium-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
|
||||
|
||||
# Sprite Layouts
|
||||
|
||||
!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
|
||||
|
||||
# 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 {
|
||||
background-position: 0 -40px;
|
||||
}
|
||||
a:target, a.glossy-target {
|
||||
background-position: 0 -60px;
|
||||
}
|
||||
a:active, a.glossy-active {
|
||||
background-position: 0 -20;
|
||||
}
|
||||
```
|
||||
|
||||
!SLIDE important
|
||||
|
||||
# Beware of your file size!
|
||||
|
||||
!SLIDE
|
||||
|
||||
# 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
|
||||
* 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
|
||||
|
||||
## 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
|
||||
|
||||
<div class='grid' ></div>
|
||||
|
||||
!SLIDE
|
||||
|
||||
<img src='/assets/rhythm_layout.png' width="700px">
|
||||
|
||||
!SLIDE medium-list
|
||||
|
||||
* Height : rhythms
|
||||
* Width : columns
|
||||
|
||||
!SLIDE
|
||||
|
||||
``` 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' >
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,39 +0,0 @@
|
||||
!SLIDE
|
||||
|
||||
# The future!
|
||||
|
||||
!SLIDE medium-list
|
||||
# Sass
|
||||
* Associative array data type (Hash)
|
||||
* Better list functions
|
||||
* `@content`
|
||||
|
||||
!SLIDE
|
||||
## @content
|
||||
``` scss
|
||||
@mixin do-something {
|
||||
font-size : 12px;
|
||||
color : red;
|
||||
@content;
|
||||
}
|
||||
|
||||
p {
|
||||
@include do-something {
|
||||
color : blue;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
``` css
|
||||
p {
|
||||
font-size : 12px;
|
||||
color : red;
|
||||
color : blue;
|
||||
}
|
||||
```
|
||||
|
||||
!SLIDE medium-list
|
||||
# Compass
|
||||
* Media query framework
|
||||
* A css hacks library
|
||||
* Extract blueprint from compass to a stand alone framework
|
||||
@ -1,26 +0,0 @@
|
||||
!SLIDE
|
||||
|
||||
## We need help!
|
||||
https://github.com/chriseppstein/compass
|
||||
|
||||
* Documentation
|
||||
* Stylesheet cleanup
|
||||
* Code Refactoring
|
||||
|
||||
!SLIDE small-list
|
||||
## Core Team
|
||||
|
||||
* Chris Eppstein - chriseppstein.github.com
|
||||
* Scott Davis (me) - scottdavis.github.com
|
||||
* Brandon Mathis - brandonmathis.com
|
||||
* Eric Meyer (The other one) - eric.oddbird.net
|
||||
* Anthony Short - anthonyshort.me
|
||||
|
||||
!SLIDE
|
||||
|
||||
# Charity
|
||||
### United Mitochondrial Disease Foundation
|
||||
### Please donate - http://umdf.org/compass
|
||||
|
||||
!SLIDE
|
||||
# Questions!
|
||||
@ -1,2 +0,0 @@
|
||||
.compass
|
||||
.sass
|
||||
@ -1,4 +0,0 @@
|
||||
- # this file gets included in the output, inside the <head> tags
|
||||
- # use it for including things like Web fonts
|
||||
%link{:href => 'http://fonts.googleapis.com/css?family=Nunito', :rel => 'stylesheet', :type => 'text/css'}/
|
||||
|
||||