Screencast: Compass & CSS Sprites

 

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

 

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

 

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

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

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