#bcc3 - markup haiku mit haml und sass (by @skddc and @tmschndr)

bcc3.haml

!!!
%html{ :xmlns => "http://www.w3.org/1999/xhtml", "xml:lang" => "de-DE", :lang => "de-DE"} 
  %head
    %meta{"http-equiv" => "content-type",         :content => "text/html; charset=UTF-8"}
    %meta{"http-equiv" => "content-style-type",   :content => "text/css"} 
    %meta{"http-equiv" => "content-script-type",  :content => "text/javascript"}
    %meta{:name => "keywords",     :content => "#haml, sass, bcc3, barcamp, cologne, awesome"}
    %meta{:name => "description",  :content => "eine einführung und etwas mehr in markup haiku mit #haml und sass"}
    %meta{:name => "author",       :content => "@tmschndr und @skddc"}
    %meta{:name => "language",     :content => "de"}
 
    %title markup haiku mit #haml, sass & #bcc3
 
    = stylesheet_link_tag 'bcc3'
 
  %body
    %h1 markup haiku mit #haml, sass & #bcc3
    
    #haml
      %h2 #haml
      %ul
        %li basiert auf YAML, daher: indentation!
        %li weniger code, schneller geschrieben
        %li DRY!
        %li generiert sauberen code, flüchtigkeitsfehlerverhinderer
        %li verschiedene output-formate (xhtml vs. html vs. xml)
 
      %h3 Basics
      %p
        Hier stehen inline-Elemente, wie zum Beispiel
        %span span
        oder Bilder:
        %br
        %img{:src => "http://dl.getdropbox.com/u/4048/bcc3/banner/bcc3-button180a.png", :alt => "barcamp-logo"}
 
      #sample_container
        %h3 IDs und Klassen
        .stuff foo
        .stuff bar
 
      %h3 Dynamische Listen
      %ul
        - ["bcc3", "pure", "awesomeness"].each do |word|
          %li= word
  
      %ul.with_classes
        - ["BcC3", "PuRe", "AwEsoMeNesS"].each do |word|
          %li[word]= word.downcase
 
      %h3 Filter und Kommentare
      %p
        I like textile! Let's do it.
        :textile
          Ich mag _kursive_ und *fette* Texte.
  
        /  Achja, das war ein textile-Filter
        -# Achwas!
 
    #sass
      %h2
        SASS -
        %span Syntactically Awesome StyleSheets
 
      CSS
      %ul
        %li sucks!
        %li keine Variablen (P: Änderung einer häufig benutzen Farbe? L: Suchen und Ersetzen!)
        %li keinerlei Abstraktion
 
      SASS
      %ul
        %li Konstanten für alle Arten an Attribut-Werten
        %li Berechnungen von numerischen Werten (z.B. Maßeinheiten oder #hex-Farbcodes)
        %li Mixins für ganze Style-Sets
        %li Frontend-Performance++ (durch weniger Requests)

bcc3.sass

// sizes & dimensions
!base_font_size = 25px
!layout_width = 60px
 
// fonts
!base_font = "Georgia", "Lucida Grande", "Lucida Sans Unicode"
 
// colors
!barcamp_blue = #C8EAF6
!railslove_green = #54DA1F
 
// mixins
=coloured_bordered(!border_color = !barcamp_blue)
  :border-bottom= 3px "solid" !border_color
 
=centered
  :margin 0 auto
  :display block
  :width= !layout_width
  
 
// styles
 
body
  :background #fff
  :font
    :size= !base_font_size
    :family= !base_font
 
h1
  :font-size= !base_font_size * 2.2
 
h2
  :font-size= round(!base_font_size * 1.5)
  &.first_one
    :font-weight bold
  span
    :font-style italic
 
h3
  :font-weight bold
  +coloured_bordered(!railslove_green)  
  +centered
 
p
  :line-height 1.5em
 
ul
  :margin 0
  li
    :line-height 1.5em
 
#tag_cloud
  @for !n from 1 through 10 
    .importance_#{!n} 
      :font-size= round(!base_font_size + ((!base_font_size / 10) * !n))
      @if !n < 5
        :color= #222 + !n * #111