Schlagwort: Bourbon

Screencast: Besseres Sass mit Bourbon

Bourbon ist ein Sass Mixin und stellt zahlreiche Funktionen für die Erstellung von Design-Elementen zur Verfügung. Dabei werden für die verschiedenen Browser auch die teilweise noch nötigen Prefixe verwendet. Ryan zeigt diese Woche wie es mit Rails zusammen verwendet werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
gem ‚bourbon‘
[/ruby]

app/assets/stylesheets/application.css.scss

[css]
@import "bourbon";
@import "layout";
@import "projects";
[/css]

app/assets/stylesheets/layout.css.scss

[css]
body {
margin: 0;
padding: 0;
background-color: #FFF;
font-size: 14px;
font-family: $verdana;
}

#header {
color: #FFF;
padding: 15px 100px;
font-size: 30px;
font-weight: bold;
@include linear-gradient(#777, #444);
@include box-shadow(0 0 6px 3px #000);
}

#container {
margin: 0 100px;
}

a {
color: #2D6DD2;
}
[/css]

app/assets/stylesheets/projects.css.scss

[css]
.project {
border: solid 1px #AAA;
margin: 20px 0;
padding: 7px 12px;
@include border-radius(6px);
@include transition(all, 500ms, ease-in-out);

&:hover { background-color: #F8FCCF; }

h2 {
margin: 0;
a { text-decoration: none; }
}
}

.new_project {
@include button(simple, #3FB344);
text-decoration: none;
font-size: 16px;
}
[/css]