The document discusses the history and evolution of stylesheets and CSS frameworks. It begins with a brief history of radio formats like AM, FM, and XM, drawing parallels to the evolution of stylesheets from basic HTML to CSS1/2 to modern CSS frameworks. These frameworks simplify stylesheets through features like nested rules, variables, mixins, imports, and powerful functions. Examples are given of various CSS frameworks and how they can be implemented with Sass.
18. @font-face
means
Typographic freedom!
Wednesday, February 3, 2010
19. Cool
New selectors
Wednesday, February 3, 2010
20. CSS3 selectors (and some golden oldies)
* ::first-letter :enabled
E :first-line :disabled
.class ::first-line :checked
#id E[attribute^=value] :header
E F E[attribute$=value]
E > F E[attribute*=value]
E + F E ~ F
E[attribute] :root Steal this from jQuery, please
E[attribute=value] :last-child
E[attribute~=value] :only-child
E[attribute|=value] :nth-child()
:first-child :nth-last-child()
:link :first-of-type
:visited :last-of-type
:lang() :only-of-type
:before :nth-of-type()
::before :nth-last-of-type()
:after :empty
::after :not()
:first-letter :target
Wednesday, February 3, 2010
21. Some smash hits from the design blogs
Wednesday, February 3, 2010
22. 30 tips for SemanticTM markup and classes
Wednesday, February 3, 2010
70. CSS2 selectors
*
E
.class
#id
E F
E > F
E + F
E[attribute]
E[attribute=value]
E[attribute|=value]
:first-child
:link
:visited
:lang()
:before
::before
:after
::after
:first-letter
:first-line
Wednesday, February 3, 2010
71. ... and even more stuff no browsers
supported until years later.
Wednesday, February 3, 2010
86. Nested rules - selectors
table.users tr td a {color: #111}
table.users tr.alt td a {color: #333}
Wednesday, February 3, 2010
87. Nested rules - selectors
table.users Lo o k , Ma,
tr n o braces
td
a
color: #111 or semicolons
td.alt
a
color: #333
But you can use
both if you wanna
Wednesday, February 3, 2010
95. Mixins
=frame(!padding_width = 2px, !border_color = #ddd)
padding = !padding_width
border:
width: 1px
defines t he mixin
style: solid
color = !border_color
.avatar
+frame
position: absolute
top: 5px
mixes in t h e rule s
left: 5px
p img
+frame(1px, #ccc)
Wednesday, February 3, 2010
98. Imports
@import reset.sass # _reset.sass
@import typography.sass # _typography.sass
@import layout.sass # _layout.sass
Included at compile time -
just one http request
Wednesday, February 3, 2010
115. Sass and Compass
$ sudo gem install haml
$ sudo gem install compass --pre
CALL IT FROM THE COMMAND LINE
$ sass screen.sass screen.css
OR COMPASS-IZE YOUR PROJECT
$ compass --rails -f blueprint
OR WATCH A FOLDER
$ compass --watch
Wednesday, February 3, 2010
116. Compass and WordPress shameless plug
$ sudo gem install compass-wordpress
CRANK OUT A NEW SASS-Y WORDPRESS THEME
$ compass -r compass-wordpress
-f wordpress -p thematic
--sass-dir=sass --css-dir=css
-s compressed my_awesome_theme
AUTOCOMPILE YOUR CHANGES
$ compass --watch
Wednesday, February 3, 2010
118. Get LESS
$ sudo gem install less
CALL IT FROM THE COMMAND LINE
$ lessc screen.less
GRAB THE RAILS PLUGIN
$ script/plugin install git://github.com/cloudhead/more.git
Wednesday, February 3, 2010
134. Resources an d thanks for having me!
http://compass-style.org
http://sass-lang.com
http://lesscss.org
http://xcss.antpaw.org
Questions? I'm @pengwynn on Twitter
http://wynnnetherland.com
the newish blog
Wednesday, February 3, 2010
Editor's Notes
multikey - automatically index arrays of object values
ensure index on tags or _keywords