Compare commits
1 Commits
Author | SHA1 | Date | |
---|---|---|---|
|
e9c3ee34fa |
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
.sass-cache/
|
@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
# What is Sass?
|
# What is Sass?
|
||||||
## Its a preprocesor
|
## It's a preprocesor
|
||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
# What does it do?
|
# What does it do?
|
||||||
@ -13,7 +13,7 @@
|
|||||||
* Functions
|
* Functions
|
||||||
* Selector Inheritance `@extend, &`
|
* Selector Inheritance `@extend, &`
|
||||||
* Control Directives `@if, @for, @each, @while`
|
* Control Directives `@if, @for, @each, @while`
|
||||||
* Its a language!
|
* It's a language!
|
||||||
|
|
||||||
!SLIDE variables
|
!SLIDE variables
|
||||||
# Variables
|
# Variables
|
||||||
@ -46,7 +46,7 @@
|
|||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
|
|
||||||
# In ruby
|
# In Ruby
|
||||||
|
|
||||||
``` ruby
|
``` ruby
|
||||||
Sass::Script::List.new(['1px', 'solid', 'black'], ',')
|
Sass::Script::List.new(['1px', 'solid', 'black'], ',')
|
||||||
@ -123,7 +123,7 @@ a:hover { color : red; }
|
|||||||
```
|
```
|
||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
## Extending with ruby
|
## Extending with Ruby
|
||||||
|
|
||||||
``` ruby
|
``` ruby
|
||||||
def sprite(map, sprite, offset_x = ZERO, offset_y = ZERO)
|
def sprite(map, sprite, offset_x = ZERO, offset_y = ZERO)
|
||||||
|
@ -43,10 +43,10 @@ $ancillary-compliment-color : rgb(150,150,150) !default;
|
|||||||
```
|
```
|
||||||
|
|
||||||
!SLIDE pallet
|
!SLIDE pallet
|
||||||
# Pallets
|
# Palettes
|
||||||
|
|
||||||
``` scss
|
``` scss
|
||||||
// _pallet.scss
|
// _palette.scss
|
||||||
$orange : rgb(138, 182, 225) !default;
|
$orange : rgb(138, 182, 225) !default;
|
||||||
$blue : rgb(33,89,167) !default;
|
$blue : rgb(33,89,167) !default;
|
||||||
$lighter-blue : rgb(138, 182, 225) !default;
|
$lighter-blue : rgb(138, 182, 225) !default;
|
||||||
@ -69,6 +69,6 @@ $ancillary-compliment-color : $lighter-gray;
|
|||||||
|
|
||||||
!SLIDE important long
|
!SLIDE important long
|
||||||
<img src="/assets/rage-face.png">
|
<img src="/assets/rage-face.png">
|
||||||
# Only use your pallet colors to define your more descriptive color variables!
|
# Only use your palette colors to define your more descriptive color variables!
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
!SLIDE
|
!SLIDE
|
||||||
# Math
|
# Math
|
||||||
## Is your best friend
|
## is your best friend
|
||||||
|
|
||||||
!SLIDE long
|
!SLIDE long
|
||||||
# *Almost* everything a designer does can be converted into some sort of mathmatical layout... *ALMOST*
|
# *Almost* everything a designer does can be converted into some sort of mathmatical layout... *ALMOST*
|
||||||
@ -40,7 +40,7 @@ $main-content-width : $wrapper - $sidebar;
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
!SLIDE
|
!SLIDE
|
||||||
# Image demensions
|
# Image dimensions
|
||||||
``` scss
|
``` scss
|
||||||
.play {
|
.play {
|
||||||
left: ($width / 2) - (global-sprite-width(play_movie) / 2);
|
left: ($width / 2) - (global-sprite-width(play_movie) / 2);
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
# Inheritance
|
# Inheritance
|
||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
# Inception rule!
|
# Inception Rule!
|
||||||
<img src="/assets/InceptionArch_Slusher.jpg" width='800px'>
|
<img src="/assets/InceptionArch_Slusher.jpg" width='800px'>
|
||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
@ -5,13 +5,13 @@
|
|||||||
!SLIDE
|
!SLIDE
|
||||||
|
|
||||||
* Stylesheet framework
|
* Stylesheet framework
|
||||||
* Considered sass standard library
|
* Considered Sass standard library
|
||||||
* Standalone application
|
* Standalone application
|
||||||
* Has the ability to have application integrations (rails, django, etc.)
|
* Has the ability to have application integrations (Rails, Django, etc.)
|
||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
|
|
||||||
## Currently the only application integration supported by the core team is rails
|
## Currently the only application integration supported by the core team is Rails
|
||||||
|
|
||||||
!SLIDE big-list
|
!SLIDE big-list
|
||||||
|
|
||||||
@ -28,10 +28,10 @@
|
|||||||
|
|
||||||
!SLIDE medium-list
|
!SLIDE medium-list
|
||||||
|
|
||||||
* Fewer http requests.
|
* Fewer HTTP requests.
|
||||||
* You don't have a bunch of individual images to manage.
|
* You don't have a bunch of individual images to manage.
|
||||||
* Customizable
|
* Customizable.
|
||||||
* ITS EASY!
|
* IT'S EASY!
|
||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
|
|
||||||
@ -132,7 +132,7 @@ a:active, a.glossy-active {
|
|||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
|
|
||||||
# We support most CSS3 properties with vendor prefix's.
|
# We support most CSS3 properties with vendor prefixes.
|
||||||
|
|
||||||
!SLIDE big-list
|
!SLIDE big-list
|
||||||
|
|
||||||
@ -228,9 +228,3 @@ http://coding.smashingmagazine.com/2009/04/03/8-simple-ways-to-improve-typograph
|
|||||||
|
|
||||||
<img src='/assets/fancy-buttons.png' >
|
<img src='/assets/fancy-buttons.png' >
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -35,5 +35,5 @@ p {
|
|||||||
!SLIDE medium-list
|
!SLIDE medium-list
|
||||||
# Compass
|
# Compass
|
||||||
* Media query framework
|
* Media query framework
|
||||||
* A css hacks library
|
* A CSS hacks library
|
||||||
* Extract blueprint from compass to a stand alone framework
|
* Extract Blueprint from Compass to a stand alone framework
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
https://github.com/chriseppstein/compass
|
https://github.com/chriseppstein/compass
|
||||||
|
|
||||||
* Documentation
|
* Documentation
|
||||||
* Stylesheet cleanup
|
* Stylesheet Cleanup
|
||||||
* Code Refactoring
|
* Code Refactoring
|
||||||
|
|
||||||
!SLIDE small-list
|
!SLIDE small-list
|
||||||
@ -24,3 +24,4 @@ https://github.com/chriseppstein/compass
|
|||||||
|
|
||||||
!SLIDE
|
!SLIDE
|
||||||
# Questions!
|
# Questions!
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user