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

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

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

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)

Grids

UI Frameworks

webframeworks-part2

By Lisa Gringl

webframeworks-part2

  • 477
Loading comments...

More from Lisa Gringl