CSS Metaframeworks: King of all @media

meta
^
CSS FRAMEWORKS: KING OF ALL @media
Dallas.rb February 2, 2010

WYNNNETHERLAND
Wednesday, February 3, 2010

before we start


We need to know about your cool projects!

http://thechangelog.com @changelogshow


Your project could end up here!


thanks!


Have you heard?

CSS3 is big


Hot
New properties


border-radius


border-image


background-size


gradients


RGBA, HSL, HSLA colors

rgba (0,0,0,1) is the new black!


text-shadow


box-shadow


word
wrap


outline


columns


@font-face
means

Typographic freedom!


Cool
New selectors


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


Some smash hits from the design blogs


30 tips for SemanticTM markup and classes


101 CSS resets


40 Grid layouts you must see


7 UP-lifting reasons to use
CSS Sprites


Have the <TABLE>'s turned?


30 sites for great typography


RT @linkbait: Effortless drop shadows,
gradients, and rounded corners


But this is not a talk about CSS
Follow @smashingmag for your CSS tips & tricks


I want to talk about

REAL stylesheet innovation



HOW we write stylesheets



how we MAINTAIN stylesheets



how we SIMPLIFY stylesheets


A brief

History of radio


In the beginning...


AM


AM = Amplitude Modulation


Invented in 1906


Dominant format until 1978


Still rockin' after 100 years!


Then came


FM


FM = Frequency Modulation


Does not suffer
susceptibility to atmospheric and
electrical interference.


Patented in 1933.
Approved in 1941.
Standardized in 1961.
World domination in 1978.
Unchallenged for thirty years.

Until...


XM


Hey, it w
as t h e 9 0
s,
X s w e re
in!

XM = Beyond FM


Founded in 1988.
Launched in 2001.
Merged with Sirius in 2009.


Superior sound.


No commercials.


Listen to Kasem's Top 40
from coast to coast.


What the heck does this have to do
with stylesheets, anyway?


I see some parallels.


A brief

History of web presentation


HTML


for layout

HTML + <TABLE>


Invented in 1989


<TABLE> added in 1997


Still rockin' after 20 years!


HTML + CSS


HTML + CSS = Content + Presentation


CSS 1 published in 1996.


No more <FONT> tags.


font styling, color, borders & more!


CSS 2 published in 1998.


Improved selectors


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


... and even more stuff no browsers
supported until years later.


Which brings us back to...


CSS 3 published in 20??


Web 2.0 brought new demands


Round corners


Drop shadows


Gradients


But we already covered that.


That's the 75 slide introduction


14 years of CSS has basically given us


more selectors + more properties


Until now...


Metaframeworks =
high fidelity stylesheets


Metaframeworks output CSS.


Nested rules


Nested rules - selectors
table.users tr td a {color: #111}

table.users tr.alt td a {color: #333}


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


table.users
tr
td
color: #111
&.alt
color: #333
&:hover
color: #666


Nested rules - properties
.users
font:
size: 1.2em
style: italics
weight: bold


Variables


Variables
.user {
background: #333;
border-size: 2px;
}

.owner {
background: #333;
border-size: 2px;
}

.admin {
background: #666;
border-size: 4px;
}


Variables
!gray = #333
!default_border = 2px

.user
background: = !gray
border-size: = !default_border

.owner

r mixing!
background: = !gray
border-size: = !default_border and colo
.admin Ev e n ma t h !
background: = !gray + #333
border-size: = !default_border + 2px


Mixins


Mixins
.avatar {
padding: 2px;
border: solid 1px #ddd;
position: absolute;
top: 5px;
left: 5px;
}

p img {
padding: 2px;
border: solid 1px #ddd;
}


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)


Imports


Imports
@import url(/https/www.slideshare.net/css/reset.css)
@import url(/https/www.slideshare.net/css/typography.css)
@import url(/https/www.slideshare.net/css/layout.css)

parent + 3 @imports = 4 http requests


Imports
@import reset.sass # _reset.sass
@import typography.sass # _typography.sass
@import layout.sass # _layout.sass

Included at compile time -
just one http request


Imports + Mixins

Now it gets fun!


Compass CSS3 mixins
@import compass/css3.sass

.callout
+border-radius(5px)
+linear-gradient("left top", "left bottom", #fff, #ddd)

.callout { very different syntax
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-border-radius: 5px;
background-image: -moz-linear-gradient(top, bottom, from(#fff), to
(#ddd));
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0.00, #fff), color-stop(1.00, #ddd));
}


Compass CSS3 mixins
css3/border_radius.sass
css3/inline_block.sass
css3/opacity.sass
css3/text_shadow.sass
css3/box_shadow.sass
css3/columns.sass
css3/box_sizing.sass
css3/gradient.sass
css3/background_clip.sass
css3/background_origin.sass
css3/background_size.sass
css3/font_face.sass
css3/transform.sass
css3/transition.sass


Bring your favorite CSS Framework


A Blueprint example
<div id='wrapper' class="container">
<div id='content' class="span-7 prepend-1">
<div id='main' class="container">

boo
...
</div>
<div id='featured' class="span-5 last">
...
</div>
</div>
<div id='sidebar' class="span-3 append-1 last">
...
</div>
</div>


A Blueprint example
@import blueprint/reset.sass
@import partials/base.sass
@import blueprint
@import blueprint/modules/scaffolding.sass

#wrapper
+container
#content
+column(7)
+append(1)
#featured
+column(5, true)
#sidebar
+column(3, true)
+prepend(1)


Functions


Very. Powerful. Functions.


Sass 2.4 color functions
hue(#cc3) => 60deg
saturation(#cc3) => 60%
lightness(#cc3) => 50%

adjust-hue(#cc3, 20deg) => #9c3
saturate(#cc3, 10%) => #d9d926
desaturate(#cc3, 10%) => #bfbf40
lighten(#cc3, 10%) => #d6d65c
darken(#cc3, 10%) => #a3a329

grayscale(#cc3) => desaturate(#cc3, 100%) = #808080
complement(#cc3) => adjust-hue(#cc3, 180deg) = #33c

mix(#cc3, #00f) => #e56619
mix(#cc3, #00f, 10%) => #f91405
mix(#cc3, #00f, 90%) => #d1b72d

http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

Sass 2.4 color functions with alpha support!

mix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875)
mix(rgba(51, 255, 51, 0.90), #f00) => rgba(163, 114, 22, 0.95)

alpha(rgba(51, 255, 51, 0.75)) => 0.75
opacity(rgba(51, 255, 51, 0.75)) => 0.75

opacify(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85)
fade-in(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85)

transparentize(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65)
fade-out(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65)

http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

Share your patterns


http://brandonmathis.com/projects/fancy-buttons/

Image sprites


Image sprites
EXAMPLE 1
a.twitter
+sprite-img("icons-32.png", 1)
a.facebook
+sprite-img("icons-32png", 2)
...

EXAMPLE 2
a
+sprite-background("icons-32.png")
a.twitter
+sprite-column(1)
a.facebook
+sprite-row(2)
...


Who makes this syntactic sugar?


Sass and Compass


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


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


LESS


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


Using LESS - variables
@the-border: 1px;
@base-color: #111;

#header {
color: @base-color * 3;
border-left: @the-border;
border-right: @the-border * 2;
}

#footer {
color: (@base-color + #111) * 1.5;
}


Using LESS - mixins
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded_corners;
}

#footer {
.rounded_corners(10px);
}


Using LESS - nested rules
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}


logo wins
best in show!

}{CSS


Works with PHP


So that's another meetup


What's the future?


First, grow the category


Hang in there,
only six more slides!

http://www.ﬂickr.com/photos/szacharias/4073373487/sizes/l/


Next, recruit some talent


Seek designer converts


Watch the egos


Continue to push the envelope


Mind the gap


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


CSS Metaframeworks: King of all @media

Recommended

More Related Content

Similar to CSS Metaframeworks: King of all @media (8)

More from Wynn Netherland (13)

Recently uploaded (20)

CSS Metaframeworks: King of all @media

Editor's Notes