3 Steps to Make Better & Faster Frontends

3 Steps to Make
Better & Faster
Frontends

SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites

Variables
$my-color: #ab42ef;

body {
background: $my-color;
}

Color Calculations
h1 {
background:
lighten($my-color, 23%);
color:
darken(#c24, 10%);
border-color:
desaturate(red, 50%);
}

Color Functions
★ opacify(color, amount)
★ transparentize(color, amount)

★ lighten(color, amount)

★ darken(color, amount)

★ saturate(color, amount)

★ desaturate(color, amount)

★ adjust-hue(color, degrees)

★ mix(color1, color2, weight)

★ grayscale(color)

★ complement(color)

RGBA Colors
h2 {
background: rgba(#00f, 0.7);
}
R, G, B
#hex
colorconst
$variables

Cascading
h1 {
color: red;
a {
color: blue;
}
}

Mixins
@mixin my-style {
background: red;
}

.my-box {
@include my-style;
}

Mixin Parameters
@mixin my-style($color: red) {
background: darken($color, 5%);
}

.my-box {
@include my-style(#ff0);
}

Cascading Mixins
@mixin my-style {
a {
background: red;
}
}

.my-box {
@include my-style;
}

Extending
.box {
background: red;
}

.bordered-box {
border: 1px black solid;
@extend .box;
}

Result
.box, .bordered-box {
background: red;
}

.bordered-box {
border: 1px black solid;
}

Alternative Syntax
=my-style($color: red)
background: darken($color, 5%)

.my-box
color: red
+my-style(#ff0)
a, *.scss
span
color: blue *.sass

More to Learn
★ Include partials
(no asset packer needed)
★ Auto compress CSS files
★ @if, @for, @while syntax
★ “&” as current cascading placeholder

CSS3
@import "compass";

.box {
background: red;
@include border-radius(4px);
@include box-shadow(
rgba(#ccc, 0.5),
3px, 3px, 5px));
}

Helpers
h1 {
@include ellipsis;
@include clearfix;
}

a {
@include hover-link;
}

Frameworks
@import "blueprint";

@include blueprint;

.box {
@include column(3);
}

More to Learn
★ Easy to extend with your own gem
★ Use other frameworks
(960gs, suzy, YUI, YAML, jqTouch, …)
★ Write own frameworks

Simple Sprites
.add {
background:
sprite-image("icons/pl.png");
}

.remove {
background:
sprite-image("icons/rm.png");
}
all icons by p.yusukekamiyamane.com (CC by 3.0)

Output
.add {
background:
url("icons.png");
}

.remove {
background:
url("icons.png") 0 -16px;
}

Right Aligned
.something {
background:
sprite-image("i/wide.png");
}
a.next {
background: yellow no-repeat
sprite-image("i/n.png", 100%);
padding-right: 20px;
}

Result
.something {
background:
url("i.png");
}
Example link
a.next {
url("i.png") 100% -20px;
padding-right: 20px;
}

Empty Space
.add {
background:
}
.remove {
sprite-image("icons/rm.png");
padding: 20px;
}

Could be Better
.add {
background:
url("icons.png");
}
.remove { Example link
background:
padding: 20px;
}

Empty Space
.add {
background:
}
.remove {
sprite-image("icons/rm.png",
0, 0, 20px);
padding: 20px; }

Just Perfect
.add {
background:
url("icons.png");
}
.remove { Example link
background:
padding: 20px;
}

Sprite Generation
★ Sprite image named by directory:
“icons/*.png” > “icons.png”

★ Background position added only if needed

★ Add “no-repeat” by yourself:
background:
sprite-image("…") no-repeat;

Happy forking:
http://github.com/nex3/haml
http://github.com/chriseppstein/compass
http://github.com/hagenburger/lemonade

Further reading:
http://www.sass-lang.com
http://www.compass-style.org/docs/
http://www.hagenburger.net/BLOG/
Lemonade-CSS-Sprites-for-Sass-
Compass.html

last name
first name

nico@hagenburger.net
e-mail
twitter
blog

3 Steps to Make Better & Faster Frontends

More Related Content

What's hot

Similar to 3 Steps to Make Better & Faster Frontends

Recently uploaded

3 Steps to Make Better & Faster Frontends