Web Frameworks

Workshop - Front-End Design (#2)

Agenda

• Sass/Scss
• Yeoman
• Grids
• UI Frameworks

Sass/Scss

• CSS Preprocessor
• macht CSS dynamisch
• Variablen, Nesting, Mixins, Funktionen
• umfangreiche Dokumentation

= Syntactically Awesome Stylesheet

=Sassy CSS

Variablen

//Colors
$main-color: #d10e0e;
$second-color: #fff;

//Animations
$transition-time: 0.2s;

//Padding
$vertical-rythm: 20px;

//Font-Size
$base: 16px;

Funktionen

//Colors
$main-color: #d10e0e;

$second-color: darken($main-color, 10%);

$highlight-color: lighten($main-color, 30%);

Alle verfügbare Funktionen

Nesting

$border: 1px solid #EFC6F3;

.post {
  border-radius: 3px;
  background: #FFF8FF;
  border: $border;
  padding: 15px;
  color: #333333;
  .title {
    color: #000000;
    font-size: 20px;
     .highlight {
         color: #fff;
     }
  }
}

Nesting: Inception Rule

  Don’t go more than four levels deep!

Tatsächlich: Versuche nicht mehr als 1-2 Ebenen tief zu gehen!

Nesting - Achtung

body {
  div.container {
    div.content {
      div.articles {
        & > div.post {
          div.title {
            h1 {
              a {
              }
            }
          }
          div.content {
            p { ... }
            ul {
              li { ... }
            }
          }
          div.author {
            a.display {
              img { ... }
            }
            h4 {
              a { ... }
            }
            p {
              a { ... }
            }
            ul {
              li { ... }
            }
          }
        }
      }
    }
  }
}

Nesting - kompilierter Code

body { ... }
body div.content div.container { ... }
body div.content div.container div.articles { ... }
body div.content div.container div.articles > div.post { ... }
body div.content div.container div.articles > div.post div.title { ... }
body div.content div.container div.articles > div.post div.title h1 { ... }
body div.content div.container div.articles > div.post div.title h1 a { ... }
body div.content div.container div.articles > div.post div.content { ... }
body div.content div.container div.articles > div.post div.content p { ... }
body div.content div.container div.articles > div.post div.content ul { ... }
body div.content div.container div.articles > div.post div.content ul li { ... }
body div.content div.container div.articles > div.post div.author { ... }
body div.content div.container div.articles > div.post div.author a.display { ... }
body div.content div.container div.articles > div.post div.author a.display img { ... }
body div.content div.container div.articles > div.post div.author h4 { ... }
body div.content div.container div.articles > div.post div.author h4 a { ... }
body div.content div.container div.articles > div.post div.author p { ... }
body div.content div.container div.articles > div.post div.author p a { ... }
body div.content div.container div.articles > div.post div.author ul { ... }
body div.content div.container div.articles > div.post div.author ul li { ... }

Mixins

@mixin button_style($color_border,$color,$text_color) { 
    border-bottom: 5px solid $color_border; 
    background-color: $color; 
    color: $text_color; 
}

.button { 
    text-decoration: none; 
    text-align: center; 
    margin-top: 5px; 
    @include button_style($dark_grey,$grey,white); 
}

Post-Processors

• PostCSS
• CSSNext

SMACSS

• Guidelines für modulare Struktur
• wiederverwendbar
• skalierbar

=Scalable and Modular Architecture of CSS

Strukur Sass nach SMACSS

stylesheets/
|
|-- __base.scss           # Partial Base Rules
|-- __layout.scss         # Partial Layout Rules
|
|-- modules/              # Common modules
|   |-- _all.scss         # Include to get all modules
|   |-- _utility.scss     # Module name
|   |-- _colors.scss      # Etc...
|   ...
|
|-- __state.scss  		  # Partial State Rules	
|-- __theme.scss  		  # Partial Theme Rules	
|
`-- main.scss             # primary Sass file, Include all Partials 

BEM

= Block, Element, Modifier

• Bennung der CSS Klassen 
• An objektorientierung angelehnt 
• Block (zb. nav) 
• Element (zb. nav__item) 
• Modifier (zb. nav__item--active)

 <ul class="nav">
     <li class="nav__item">Index</li>
     <li class="nav__item nav_item--active">Products</li>
     <li class="nav__item">Contact</li>
</ul>

BEM

Vorteile

• abstrakt & modular
• Gut skalierbar
• Gut wartbar
• an verschiedenen Stellen benutzbar

Nachteile

• Lange Klassennamen
• Ungewohnte Schreibweise (-- __)

Autoprefixer

• Postprocessor CSS 
• fügt Browser Prefixes hinzu
• basiert auf der Tabelle von Can I Use
• CSS wird von alten Prefixes gesäubert
• Input und Output Pfad setzten
• auch mit Preprocessor anwendbar (Sass, LESS, ...)
• Debugging: Javascript-Console oder Console (Terminal)
• neues Projekt: Update von Autoprefixer

Vorteile Autoprefixer

• Schnell
• W3C Syntax
• Auswahl der zu unterstützenden Browser
  • last 2 version, "Explorer 7"

Tools

• Baugerüst für Webapp 
• Beinhaltet Grunt & Bower

• Task Runner 
• basiert auf Node.js 
• automatisiert im Hintergrund 

• Package Manager
• Download und Integration 
• zB. (jQuery)

Yeoman

Grunt

Bower

Grids

• http://www.yaml.de/
• http://gridle.org/
• http://susy.oddbird.net/
• http://muellergridsystem.com/
• http://goldengridsystem.com/
• http://www.responsivegridsystem.com/
• http://daneden.github.io/Toast/

UI Frameworks

• http://getbootstrap.com/
• http://onsen.io/ (iOS)
• http://ionicframework.com/ (iOS)
• http://getuikit.com/ (Less)
• http://purecss.io/ (nur CSS)
• http://topcoat.io/
• http://webix.com/
• http://semantic-ui.com/ (inkl. Material Design, aber Gulp)