Share
Jeg har en følelse av at CodePen kommer til å være helt fylt med Material Design i de kommende månedene. Hvorfor? Fordi Google nettopp har avslørt deres ivrige forventede Material Design Lite (MDL). Dette front-end komponentbiblioteket gjør det mulig for webfolk å implementere Googles materialdesignspesifikasjon ved hjelp av vanilje HTML, CSS og JavaScript. Det er en lett implementering av Material Design-spesifikasjonen (få avhengigheter, lavt overhode, veldig fokusert) og kalles derfor "Lite".
Ved utgivelsen av MDL har Google besvart veldig åpenbar etterspørsel. De noterte seg at det har vært anstrengelser fra samfunnet å bygge Material Design-inspirerte rammer, som Bootstrap Material Design, Materialize og Material UI for å nevne noen få. Med MDL, bygget i tett samarbeid med Chrome UX-teamet, har Google lagt en standard for hvordan Material Design skal implementeres på nettsteder.
La oss se på hva MDL har brakt til bordet med sin første utgivelse!
I motsetning til Polymer Material Design Elements (også kjent som Paper Elements) som er utviklet for svært interaktive data-drevne nettsteder og apper, fokuserer MDL primært på nettsteder med enklere innhold som blogger, markedsførings- og destinasjonssider.
I denne første utgivelsen kommer MDL med en håndfull komponenter, inkludert:
Layoutkomponenten inneholder en rekke byggeklosser for å bygge sider. For eksempel, gitteret: et grunnleggende trekk ved enhver front-end rammeverk. MDLs rutenett er bygget med Flexbox og en liten hjelp fra CSS calc (). Den har tolv kolonner angitt for store visningsporter, åtte kolonner for hva du kan kalle tablettstørrelsesvisningsporter, og fire kolonner for mindre visningsporte.
Layout-komponenten i MDL omfatter også navigasjon, faner og bunntekster, som hver har blitt optimalisert for varierende visningsstørrelser.
I henhold til Material Design Principles er det flere forskjellige visuelle typer knapper, hvorav noen er:
Hver knapp kan forbedres med den kjente rippel-effekten.
Et kort er en beholder for å vise innhold, som tekst og bilder, som vanligvis fremmer en slags handling. For eksempel, et bilde med en "like" eller "share" -knapp, en liste med musikk med "play" -knappen, eller kanskje et notat med en "Lagre" -knapp.
Et merke er en liten sirkel, plassert i nærheten av et brukergrensesnitt, som vanligvis inneholder et nummer (kanskje for å angi nye uleste meldinger eller innkommende chatt) eller et ikon. I dag, hvor informasjonen uendelig flyter på tvers av enhetene våre, kan et "badge" betraktes som et svært viktig brukerelement i ethvert design.
Andre nødvendigheter som du finner i MDL inkluderer innfeltfelt, glidebrytere, skifter, menyer, verktøylinjer og Material Design ikoner.
Møt komponenteneVidere gir Google også et par maler som hjelper deg med å komme raskt opp, med riktig layoutstruktur. Det er fem typer maler i denne første utgivelsen:
Den ganske smakfulle MDL blog layoutmalenMDL-stiler er strukturert med Sass og BEM-metoden. Stiler kan tilpasses på mange måter, selv før du laster ned rammepakken. En slik måte er med fargeskiven på Tilpass siden. Fargeskjulet lar deg velge fargekremer basert på primærfargevalg. Tilpasseren genererer deretter stilarket, som du kan laste ned, eller linker direkte fra Google CDN.
MDL-temabygger forhåndsvisningDen resulterende material.min.css-filen er ganske liten (17,6kB gzipped), men for de som trenger full kontroll for å knase det helt ned til maks, er kildekoden tilgjengelig i Github-depotet.
Siden de fleste komponenter i MDL er bygget med banebrytende teknikker, for eksempel calc (), flexbox, querySelector, og classList, MDL vil bare fungere perfekt i de moderne eviggrønne nettleserne: Chrome, Firefox, Opera, Microsoft Edge. MDL vil degradere graciøst i eldre nettlesere, for eksempel IE9, ved kun å betjene CSS-versjonen. De interaktive elementene (for eksempel rippleffekten i knappen, for eksempel) vil ikke være til stede.
Sier det, er brukergrensesnittet fortsatt bemerkelsesverdig presentert i IE8. Se for eksempel på knappene og tabellelementet:
Du ville bli tilgitt for å tenke at vi nå har et ekstra front-end-rammeverk for å sette inn verktøykassen sammen med Bootstrap og Foundation. Imidlertid har MDL ikke tenkt å erstatte, eller bli en Bootstrap etterfølger. Material Design er en del av Googles oppdrag for å sikre at brukergrensesnittene, samt erfaringene i produktlinjene deres er konsistente, ensartede og vurdert.
La oss minne oss om kjernen ideen et øyeblikk:
"Vi utfordret oss til å skape et visuelt språk for våre brukere som syntetiserer de klassiske prinsippene for god design med innovasjon og mulighet for teknologi og vitenskap." - Google Material Design Introduksjon
Så husk, mens MDL passer godt med Google-produkter, kan det være ute av kontekst når det er implementert på et nettsted som ikke har noe med Google å gjøre. Men som vi nettopp har oppdaget, gir Google full kontroll over kildekoden, slik at vi kan tilpasse den til minste detalj. Og det er det vi skal snakke om i neste artikkel. Så hold deg innstilt!
Accentsconagua