Siden innføre Material Design i 2014 med utgivelsen av Android 5.0, eller Lollipop som det ’ s bedre kjent, Google har vært sakte innlemme denne nye stilen inn elementer av Chrome-nettleseren og ulike apps. Nå kan du gjøre dette selv, takket være et nytt sett av gratis verktøy fra søkegiganten. Her er hvor du kan finne dem og hvordan du legger Material design til nettstedet ditt

Google Material Design Lite: Hva er Material Design

Lese designbrief på Google ’ s blogg kan forlate deg.? mer forvirret enn før du startet. Vilkår liker " en enkelt underliggende system som gjør det mulig for en helhetlig opplevelse på tvers av plattformer og størrelser enheten. Mobil forskriftene er grunnleggende, men touch, tale, mus og tastatur er alle førsteklasses inndatametodene ’ høres mer ut som noe du ’ d forvente å se på en Apple video med dekar av ren hvit i bakgrunnen og enheter som spinner sakte i luften. Heldigvis prinsippene Material Design er faktisk lett å se. Sider og apps er lagt ut i en flat måte, med rene linjer, en dempet, men attraktiv fargepalett, og en merkbar mangel på rot. Det er en veldig moderne, sparsom utseende som fungerer spesielt godt på mobile enheter.

Google Material Design Lite: Hvor å finne de Material Design Lite verktøy

Google beskriver Material Design Lite (eller MDL) som " et bibliotek av komponenter for webutviklere og rsquo; og har opprettet et nettsted - getmdl.io - hvor du kan arbeide gjennom de ulike elementene steg for steg, sammen med nedlasting av pakker og enda noen maler for å komme i gang. Komponentene inkluderer Material Design stifter som kort (vanligvis der informasjonen vises), glidere og kolonneoppsett, pluss det er også navigasjonsverktøy som knapper, tekstfelt, og avmerkingsbokser, som alle åpenbart er i samsvar med Material Design ethos.

En interessant faktor er at Material Design Lite isn ’ t avhengige av noen Javascript-rammeverk, og er ment å være en helt plattformuavhengig løsning. Komponentene er laget ved hjelp av CSS, Javascript og HTML, med Google insistere på at " Pages utviklet med MDL vil følge moderne web design prinsipper som nettleser portabilitet, enhets uavhengighet, og grasiøs degradering ’.

Google Material Design Lite: Komme i gang

Hvis du vil bruke Material Design Lite verktøyene du har til å være glad og trygg på å finne veien rundt HTML-koden på ditt nettsted. Husk at selv om Google har gjort det enkelt å bruke Material Design Lite, det ’ s fortsatt ment for webutviklere snarere enn nybegynnere. En annen mulig snublestein er hvis du har en gratis Wordpress blogg, som evnen til å tilpasse CSS er kun tilgjengelig for Premium-medlemmer, som vil koste deg en ekstra $ 99 i året. Hvis du har tilgang, og er glade for å redigere koden, så det første du trenger å gjøre er å laste ned kit fra Material Design Lite hjemmeside listet ovenfor. Så du ’ ll trenger å inkludere materialet Lite CSS og Javascript-filer i hver HTML-side på nettstedet ditt, slik at den vet hva du ’. Re registrere

Det er noen forskjellige måter å oppnå dette, men de to viktigste alternativene er der du bruke filene som er lagret på Google ’ s egen server, eller alternativt kan du laste dem ned og vert dem på din egen lokal server. Fordelen med den første er at du vil motta noen forbedringer i koden automatisk som Google oppdaterer dem, mens den andre betyr at du vant ’. T få noen overraskelser når noe endres andre steder

For å bruke filene lagret hos Google du ’ ll trenger å sette inn følgende kode;

Velger den lokale versjonen betyr at du ’ ll trenger å bruke denne koden i stedet;

Med disse nå på hver side du ’ ll være i stand til å bruke de ulike komponentene på arbeidsplassen din. Før det selv, du ’ ll må bestemme fargepaletten du ønsker å bruke

Google Material Design Lite: Viser dine sanne farger

Material Design jobber med to farger - det primære. og aksent - både som du kan endre enkelt bruker Skreddersy og forhåndsvisning på nettstedet. Bare gå til toppen av siden, klikk på Tilpass (sic), og du ’ ll se et fargehjul med et par koder som inneholder tallene en og to. Som du kanskje allerede har antatt, er en primærfarge som vil gjøre opp grensene av sider, menyer og slikt, mens de to er for mindre elementer som knapper. For å endre valgene klikker du bare på en relevant sektor av hjulet og dette vil velge en ny primær, klikk deretter på en annen sektor å velge en aksent. Du kan gjøre dette så mange ganger du vil, til du ’ re fornøyd med utvalget. Nederst på siden er en kodelinje som inneholder fargereferanser. Du ’ ll legge merke til at den endres hver gang for å endre valgene på rattet. Når du ’ re fornøyd med fargene kan du bare kopiere kode inn i CSS og nå når du bruker en komponent fra Material Design vil vite riktig palett å bruke

Google Material. Design Lite: Bygger videre med komponenter

Nå som det grunnleggende er lagt til området du kan begynne å bygge i den virkelige følelsen av materiale design. For å gjøre dette ’ ll må velge komponenter alternativet på toppmenyen, som inneholder alle de ulike elementene du kan bruke til å vise data eller navigere på nettstedet. Legge til et element er en tilsvarende prosess med før, hvor du kopierer koden i CSS på nettstedet ditt, selv om ting er litt mer komplisert nå som du ’ ll trenger å bestemme bruksområder for hver komponent, og de ressursene den bruker. Heldigvis Google har gitt detaljerte trinn-for-trinn-instruksjoner for hver komponent. Arbeide deg gjennom de ulike elementene vil ta litt tid, men med så mye av koden alle klare for deg å bruke, og med klare instruksjoner, den vant ’ t være lenge før nettstedet ditt ser ut som en fullverdig moderne kreasjon. Også don ’ t glemme at Mal delen gir deg også muligheten til å eksperimentere på oppsett som er spesielt fore å få mest mulig ut av Google ’ s nye design.