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
|
||||
# What is Sass?
|
||||
## Its a preprocesor
|
||||
## It's a preprocesor
|
||||
|
||||
!SLIDE
|
||||
# What does it do?
|
||||
@ -13,7 +13,7 @@
|
||||
* Functions
|
||||
* Selector Inheritance `@extend, &`
|
||||
* Control Directives `@if, @for, @each, @while`
|
||||
* Its a language!
|
||||
* It's a language!
|
||||
|
||||
!SLIDE variables
|
||||
# Variables
|
||||
@ -46,7 +46,7 @@
|
||||
|
||||
!SLIDE
|
||||
|
||||
# In ruby
|
||||
# In Ruby
|
||||
|
||||
``` ruby
|
||||
Sass::Script::List.new(['1px', 'solid', 'black'], ',')
|
||||
@ -123,7 +123,7 @@ a:hover { color : red; }
|
||||
```
|
||||
|
||||
!SLIDE
|
||||
## Extending with ruby
|
||||
## Extending with Ruby
|
||||
|
||||
``` ruby
|
||||
def sprite(map, sprite, offset_x = ZERO, offset_y = ZERO)
|
||||
|
@ -43,10 +43,10 @@ $ancillary-compliment-color : rgb(150,150,150) !default;
|
||||
```
|
||||
|
||||
!SLIDE pallet
|
||||
# Pallets
|
||||
# Palettes
|
||||
|
||||
``` scss
|
||||
// _pallet.scss
|
||||
// _palette.scss
|
||||
$orange : rgb(138, 182, 225) !default;
|
||||
$blue : rgb(33,89,167) !default;
|
||||
$lighter-blue : rgb(138, 182, 225) !default;
|
||||
@ -69,6 +69,6 @@ $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!
|
||||
# Only use your palette colors to define your more descriptive color variables!
|
||||
|
||||
|
||||
|
@ -1,9 +1,9 @@
|
||||
!SLIDE
|
||||
# Math
|
||||
## Is your best friend
|
||||
## is your best friend
|
||||
|
||||
!SLIDE long
|
||||
# *Almost* every thing 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*
|
||||
|
||||
!SLIDE
|
||||
|
||||
@ -40,11 +40,11 @@ $main-content-width : $wrapper - $sidebar;
|
||||
}
|
||||
```
|
||||
!SLIDE
|
||||
# Image demensions
|
||||
# Image dimensions
|
||||
``` 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' >
|
||||
<img src='/assets/play_button.png' >
|
||||
|
@ -2,7 +2,7 @@
|
||||
# Inheritance
|
||||
|
||||
!SLIDE
|
||||
# Inception rule!
|
||||
# Inception Rule!
|
||||
<img src="/assets/InceptionArch_Slusher.jpg" width='800px'>
|
||||
|
||||
!SLIDE
|
||||
@ -48,4 +48,4 @@
|
||||
color:$hover-color;
|
||||
}
|
||||
}
|
||||
```
|
||||
```
|
@ -5,13 +5,13 @@
|
||||
!SLIDE
|
||||
|
||||
* Stylesheet framework
|
||||
* Considered sass standard library
|
||||
* Considered Sass standard library
|
||||
* Standalone application
|
||||
* Has the ability to have application integrations (rails, django, etc.)
|
||||
* Has the ability to have application integrations (Rails, Django, etc.)
|
||||
|
||||
!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
|
||||
|
||||
@ -28,10 +28,10 @@
|
||||
|
||||
!SLIDE medium-list
|
||||
|
||||
* Fewer http requests.
|
||||
* Fewer HTTP requests.
|
||||
* You don't have a bunch of individual images to manage.
|
||||
* Customizable
|
||||
* ITS EASY!
|
||||
* Customizable.
|
||||
* IT'S EASY!
|
||||
|
||||
!SLIDE
|
||||
|
||||
@ -132,7 +132,7 @@ a:active, a.glossy-active {
|
||||
|
||||
!SLIDE
|
||||
|
||||
# We support most CSS3 properties with vendor prefix's.
|
||||
# We support most CSS3 properties with vendor prefixes.
|
||||
|
||||
!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' >
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
@ -11,11 +11,11 @@
|
||||
!SLIDE
|
||||
## @content
|
||||
``` scss
|
||||
@mixin do-something {
|
||||
@mixin do-something {
|
||||
font-size : 12px;
|
||||
color : red;
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
@include do-something {
|
||||
@ -35,5 +35,5 @@ p {
|
||||
!SLIDE medium-list
|
||||
# Compass
|
||||
* Media query framework
|
||||
* A css hacks library
|
||||
* Extract blueprint from compass to a stand alone framework
|
||||
* A CSS hacks library
|
||||
* Extract Blueprint from Compass to a stand alone framework
|
||||
|
@ -4,7 +4,7 @@
|
||||
https://github.com/chriseppstein/compass
|
||||
|
||||
* Documentation
|
||||
* Stylesheet cleanup
|
||||
* Stylesheet Cleanup
|
||||
* Code Refactoring
|
||||
|
||||
!SLIDE small-list
|
||||
@ -23,4 +23,5 @@ https://github.com/chriseppstein/compass
|
||||
### Please donate - http://umdf.org/compass
|
||||
|
||||
!SLIDE
|
||||
# Questions!
|
||||
# Questions!
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user