big design conference: css3
Post on 27-Jan-2015
114 Views
Preview:
DESCRIPTION
TRANSCRIPT
WYNNNETHERLAND
CSS FRAMEWORKS: KING OF ALL @media^meta
updated for Sass 3.0
www.zurb.com/playground/awesome-overlays
* E
.class #id E F
E > F E + F
E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value]
:first-child :link
:visited :lang() :before ::before :after ::after
:first-letter
::first-letter :first-line ::first-line
E[attribute^=value] E[attribute$=value] E[attribute*=value]
E ~ F :root
:last-child :only-child :nth-child()
:nth-last-child() :first-of-type :last-of-type :only-of-type :nth-of-type()
:nth-last-of-type() :empty :not() :target
:enabled :disabled :checked
CSS3 selectors (and some golden oldies)
:header
Steal this from jQuery, please
Patented in 1933.Approved in 1941.Standardized in 1961.World domination in 1978.Unchallenged for thirty years.
* 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
CSS2 selectors
table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } }}
Nested rules - selectors
table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
Syntax options - SCSS Sassy CSS!
.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 { background: $gray; border-size: $default_border;}
.admin { background: $gray + #333; border-size: $default_border + 2px;}
Variables
Even math!and color mixing!
.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}
p img { padding: 2px; border: solid 1px #ddd;}
Mixins
@mixin frame($padding_width: 2px, $border_color: #ddd) { padding: $padding_width; border: { width: 1px; style: solid; color $border_color; }}.avatar { @include frame; position: absolute; top: 5px; left: 5px;}p img { @include frame(1px, #ccc);}
Mixins
defines the mixin
mixes in the rules
.flash { padding: 5px; border-width: 1px; font-weight: bold;}.error { color: #8a1f11; background: #fbe3e4;}.notice { color: #514721; background: #fff6bf;}
Mixins
.flash { padding: 5px; border-width: 1px; font-weight: bold;}
.error { @extend .flash; color: #8a1f11; background: #fbe3e4;}
.notice { @extend .flash; color: #514721; background: #fff6bf;}
Mixins
.flash,
.error,
.notice { padding: 5px; border-width: 1px; font-weight: bold; }
.error { color: #8a1f11; background: #fbe3e4; }
.notice { color: #514721; background: #fff6bf; }
Mixins
now we can use a single class in our markup
@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)
Imports
parent + 3 @imports = 4 http requests
@import "reset.scss" # _reset.scss@import "typography" # _typography.scss@import "layout.css" # url(layout.css)
Imports
Included at compile time - just one http request
@import "compass/css3";
.callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd);}
.callout { -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
very different syntax
“It’s time to abolish all vendor prefixes. They’ve become solutions for which there is no problem, and they are actively harming web standards.”
-Peter-Paul Koch aka @ppk
http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html
@import "compass/css3.scss";
.callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd);}
.callout { -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
very different syntax
“Well, reactions to my proposal to abolish vendor prefixes are mixed, and I might have overshot my target here.”
-Peter-Paul Koch aka @ppk
http://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref_1.html
Vendor specific stylesheets
Maybe. But I'd like to retain Internet Explorer's special status unto itself
css3/border_radius.sasscss3/inline_block.sasscss3/opacity.sasscss3/text_shadow.sasscss3/box_shadow.sasscss3/columns.sasscss3/box_sizing.sasscss3/gradient.sasscss3/background_clip.sasscss3/background_origin.sasscss3/background_size.sasscss3/font_face.sasscss3/transform.sasscss3/transition.sass
Compass CSS3 mixins
<div id='wrapper' class="container"> <div id='content' class="span-7 prepend-1"> <div id='main' class="container"> ... </div> <div id='featured' class="span-5 last"> ... </div> </div> <div id='sidebar' class="span-3 append-1 last"> ... </div></div>
A Blueprint example
boo
#wrapper { @include container; #content { @include column(7); @include append(1); #featured { @include column(5, true); } } #sidebar { @include column(3, true); @include prepend(1); }}
A Blueprint example
hue(#cc3) => 60degsaturation(#cc3) => 60%lightness(#cc3) => 50%
adjust-hue(#cc3, 20deg) => #9c3saturate(#cc3, 10%) => #d9d926desaturate(#cc3, 10%) => #bfbf40lighten(#cc3, 10%) => #d6d65cdarken(#cc3, 10%) => #a3a329
grayscale(#cc3) => desaturate(#cc3, 100%) = #808080complement(#cc3) => adjust-hue(#cc3, 180deg) = #33c
mix(#cc3, #00f) => #e56619mix(#cc3, #00f, 10%) => #f91405mix(#cc3, #00f, 90%) => #d1b72d
Sass 2.4 color functions
http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
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.75opacity(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)
Sass 2.4 color functions with alpha support!
http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
http://brandonmathis.com/projects/fancy-buttons/
EXAMPLE 1a.twitter +sprite-img("icons-32.png", 1)a.facebook +sprite-img("icons-32png", 2)...
EXAMPLE 2a +sprite-background("icons-32.png") a.twitter +sprite-column(1) a.facebook +sprite-row(2) ...
Image sprites
#nav { background: image-url("nav_bg.png") repeat-x top center;}
DEVELOPMENT#nav { background: url("/images/nav_bg.png") repeat-x top center;}
PRODUCTION#nav { background: url("http://assets.example.com/images/nav_bg.png") repeat-x top center;}
URL helpers
relative paths for development,
absolute for production
$ sudo gem install haml$ sudo gem install compass --pre
CALL IT FROM THE COMMAND LINE$ sass --watch screen.scss
OR COMPASS-IZE YOUR PROJECT$ compass --rails -f blueprint
OR WATCH A FOLDER$ compass --watch
Sass and Compass
$ 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
Compass and WordPress shameless plug
Resources
http://sass-lang.comhttp://compass-style.orghttp://compass-style.org/docs/
blog: wynnnetherland.comtwitter: @pengwynn
linkedin.com/in/netherland
and thanks for having me!
top related