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

group :assets do
  gem 'compass-rails'
end

app/assets/stylesheets/application.css.scss

@import "compass";
@import "compass/reset";
@import "layout";

app/assets/stylesheets/layout.css.scss

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));
}

app/views/layouts/application.html.erb

<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>

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

gem 'bourbon'

app/assets/stylesheets/application.css.scss

@import "bourbon";
@import "layout";
@import "projects";

app/assets/stylesheets/layout.css.scss

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;
}

app/assets/stylesheets/projects.css.scss

.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;
}

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:

/*
 *= require_self
*/
@import "layout.css.scss";
@import "projects.css.scss";
$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;
}
#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;
  }
}

Screencast: Unbenutze CSS finden

Mit der zeit werden CSS Dateien größer und größer. Leider wird dabei auch viel nicht mehr benötigter Code mitgeschleppt. Ryan Bates zeigt in seinem Screencast wie man nicht mehr benötigten CSS findet.

Download:
Download (18.9 MB, 8:04)
Alternativer Download für iPod & Apple TV (10.8 MB, 8:04)


Weitere Resourcen:

Quellcode:

sudo gem install aanand-deadweight
# lib/tasks/deadweight.rake
begin
  require 'deadweight'
rescue LoadError
end

desc "run Deadweight CSS check (requires script/server)"
task :deadweight do
  dw = Deadweight.new
  dw.stylesheets = ["/stylesheets/application.css"]
  dw.pages = ["/", "/feeds", "/about", "/episodes/archive", "/comments", "/episodes/1-caching-with-instance-variables"]
  dw.ignore_selectors = /flash_notice|flash_error|errorExplanation|fieldWithErrors/
  puts dw.run
end

RGB Werte in HEX umwandeln

Hin und wieder ist es nötig Farbwerte in RGB in die entsprechende HEX-Form umzuwandeln. Die HEX-Form kann dann z.B. in CSS etc. verwendet werden. In unserem heutigen Script-Tip stellen wie euch ein Ruby-Script vor, dass euch bei der Konvertierung unterstützen kann.

Das Script ließe sich auch in Rails-Applikationen einsetzen, wenn dort eine Konvertierung nötig ist.


#!/usr/bin/env ruby
# rgb-konverter.rb

if ARGV.size < 3 then
puts "Falsche Anzahl an Argumenten: Es müssen drei Werte übergeben werden!"
exit
end

konvertierter_string = []

for arg in ARGV do
konvertierter_string << "%02x" % arg.to_i
end

puts "##{konvertierter_string.join}"

Das Script ließe sich folgendermaßen benutzen

./rgb-konverter.rb 0 255 255
#00ffff