Material design lite

doelen van Material design

• Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.
• Develop a single underlying system that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, voice, mouse, and keyboard are all first-class input methods.

material design vs. flat design

• Material Design is interactiever
• Material Design lijkt 'plat', maar is het niet
• Material Design gaat verder dan flat design (regels, principes)
• Material Design maakt gebruik van een simpele vorm van 'skeuomorphism'

Material design lite

• Van Google
• Front end framework (HTML, CSS en JS)
• Grid, buttons, checkboxes, cards etc.

Material design lite

• MD look en feel voor je website

• Gebruikt geen JS frameworks

• Cross-device

• 'Gracefully degrades' in oudere browsers (verneukt niet)

Getting started

• Meuk importeren van CDN
• Customizen en downloaden
• Builden van GitHub (niet aanpasbaar)
• Bower (niet aanpasbaar)
• NPM (niet aanpasbaar)
• Third party gems

Gems

• material_design_lite-rails
• material_design_lite-sass

Gem toevoegen

• Bestanden standaard manier includen
• In één keer of componenten

Turrrrbolinks

Vindt 'ie niet leuk

 

// v2
document.addEventListener('page:change', function() {
  componentHandler.upgradeDom();
});

 

// v5
document.addEventListener('turbolinks:load', function() {
  componentHandler.upgradeDom();
});

Settings

Iconen

<i class="material-icons">info</i>

<i class="material-icons">&#xE88E;</i>

 

Variabelen

$layout-header-bg-color: 128,128,128 !default;

Demo time