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)