Screencast: Compass & CSS Sprites

Compass ist eine Ergänzung zu SASS indem es viele Benutzte Elemente noch weiter vereinfacht. Es werden z.B. vorgefertigte Mixin-Ins, Funktionen und mehr zur Verfügung gestellt. In diesem Screencast zeigt Ryan wie es verwendet wird und zusätzlich wie Compass für CSS-Sprites genutzt werden kann.

 

Downloads in verschiedenen Formaten:

mp4
m4v
webm
ogg

 

Resourcen:

Gemfile

[ruby]
group :assets do
gem ‚compass-rails‘
end
[/ruby]

app/assets/stylesheets/application.css.scss

[css]
@import "compass";
@import "compass/reset";
@import "layout";
[/css]

app/assets/stylesheets/layout.css.scss

[css]
h1 {
font-size: 28px;
font-weight: bold;
margin: 18px 0;
}

ul.horizontal {
@include horizontal-list;
}

@import "icons/*.png";
@include all-icons-sprites;

#nav_bar {
// …
@include background-image(linear-gradient(#5c5c5c, #111111));
}
[/css]

app/views/layouts/application.html.erb

[html]
<li><a class="icons-itunes" href="/itunes"></a></li>
<li><a class="icons-twitter" href="/twitter"></a></li>
<li><a class="icons-facebook" href="/facebook"></a></li>
<li><a class="icons-rss" href="/rss"></a></li>
[/html]

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]

Screencast: Asset Pipeline Grundlagen

Einer der großen Neuerungen in Rails 3.1 ist die Asset Pipeline. Die Asset Pipeline unterstützt bei der Entwicklung von CSS und JavaScripts, indem Tasks wie Minify, Coffeescript-Kompilierung, etc. ein integraler Teil des Frameworks geworden ist. Wie es benutzt wird und welche Vorteile es bietet zeigt Ryan in dieser Woche in seinem Screencast.

 

Downloads in verschiedenen Formaten:

source code
mp4
m4v
webm
ogv

 

Resourcen:

bash

[bash]
bundle open jquery-rails
rails s -e production
rake assets:precompile
[/bash]

app/assets/anything/greeting.txt.erb

[html]
Hello world <%= 1 + 1 %>!
[/html]

app/assets/javascripts/application.js

[javascript]
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require_tree ./public
// or
//= require_directory .
[/javascript]

app/assets/javascripts/admin/categories.js.coffee

[javascript]
alert("hello!")
[/javascript]

Screencast: Sass Basiswissen

Sass ist neben CoffeeScript eine der Neuerungen die mit Rails 3.1 kommen werden. Sass ermöglicht die Entwicklung von Cascading Stylesheets (CSS) mit der Eweiterung, dass Ruby-Code in die Stylesheets eingebettet werden können. Somit lassen sich Variablen und Funktionen für die vereinfachte Erstellung nutzen. Weiterhin werden auch Tools zum Komprimieren mitgeliefert, um die generierten Dateien möglichst klein zu halten.

 

Downloads in verschiedenen Formaten:

source code
mp4
m4v
webm
ogv

 

Resourcen:

[css]
/*
*= require_self
*/
@import "layout.css.scss";
@import "projects.css.scss";
[/css]

[css]
$main-color: #1E7B12;

@mixin rounded-corners($radius) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}

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

#header {
background-color: $main-color;
color: #FFF;
padding: 4px 100px;
border-bottom: solid 5px darken($main-color, 10%);

h1 {
font-size: 30px;
}
}

a {
color: $main-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}

#container {
margin: 0 100px;
}
[/css]

[css]
#projects_controller {
.new_project {
background-color: $main-color;
color: #FFF;
padding: 5px 12px;
margin: 10px 0;
font-size: 16px;
@include rounded-corners(5px);
}

.project {
border: solid 1px #777;
margin: 20px 0;
padding: 7px 12px;
@include rounded-corners(10px);
}

.project h2 {
margin: 0;
}
}
[/css]

Rails 3.1 Release Candidate veröffentlicht

Wie auf der Rails-Konferenz 2011 versprochen, hat David gestern den ersten Release Candidate für Rails 3.1 veröffentlicht. neben Verbesserungen und Geschwindigkeitsoptimierungen bringt dieses Release viele Neuerungen mit.

Die größten Neuerungen sind

  • Die Asset Pipeline, welche auf Basis von Sprockets 2.0 statische Dateien wie JavaScripte und CSS performanter ausliefert. Zusätzlich sind SCSS als für Stylesheets und CoffeeScript für JavaScript als Default eingeführt worden.
  • HTTP Streaming (siehe Screencast) für eine schnellere Content-Auslieferung
  • JQuery löst nun Prototype als Standardbibliothek ab

 

Weiteres Features in diesem Release sind:

Eine vollständige und ausführlichere Liste zu den Änderungen sind im Changelog verfügbar: https://gist.github.com/958283

Die Installation kann wie gewohnt über gems durchgeführt werden:

[bash]
gem install rails –pre
[/bash]

 

Haml/Sass 3 RC 1 veröffentlicht

Haml und Sass 3 ist als Release Candidate erschienen und steht zum Download bereit. Dieses Release bringt nicht nur einige Verbesserungen für Haml mit, sondern auch Sass. RC1 ist Feature-Complete und das Team konzentriert sich auf Bugfixes und andere Verbesserungen.

Diese Version lässt sich wie gekannt über gem installieren und verproben:

Installation:

[bash]
gem install haml –pre
[/bash]

Die Details zu den Änderungen können im Changelog nachgelesen werden:
Haml Changelog: http://beta.haml-lang.com/docs/yardoc/HAML_REFERENCE.md.html

Sass Changelog: http://beta.sass-lang.com/docs/yardoc/SASS_REFERENCE.md.html

 

Die Projekte findet ihr unter folgenden Adressen:
– Haml: http://haml-lang.com/
– Sass: http://sass-lang.com/