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
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
<i class="material-icons">info</i>
<i class="material-icons"></i>
$layout-header-bg-color: 128,128,128 !default;
Demo time
deck
By Dimitri Snijder
deck
- 43