Share
Nylig tok vi en titt på Googles nye front-end-utviklingsramme, Material Design Lite (MDL). Vi oppdaget at MDL kommer med en håndfull brukergrensesnittkomponenter for å bygge nettsteder ved hjelp av retningslinjene og prinsippene for Material Design.
I denne serien skal vi undersøke enkelte MDL-komponenter i litt mer detalj, med utgangspunkt i Grid-systemet som danner grunnlaget for alle front-end-rammer. La oss begynne!
Før vi kan bruke Gitteret eller andre komponenter i MDL, må vi først distribuere MDL-bibliotekene - stilarkene og JavaScript. Det finnes en rekke måter vi kan gjøre dette på, men uten tvil er det enkleste å knytte til de vertsbaserte filene i Google CDN. Og disse filene inkluderer:
Når vi har lagt til dem, kan vi begynne å bygge brukergrensesnittet med farger som definert i hovedformatarket. Det viktigste stilarket er oppkalt etter følgende konvensjon: . Materialet primære - aksent .min.css. Vår primære farge her er blågrønn samtidig som rød er aksentfargen. Disse fargene brukes på komponenter som navigasjon og knappene, men de vil ikke påvirke gridet, med mindre vi legger til spesielle klasser som .MDL-farge - primær og .MDL-farger - aksent.
Du kan endre fargekombinasjonen til det du foretrekker ved å henvise til fargespesifikasjonen for Material Design, for eksempel: material.purple-pink.min.css,material.blue_grey-pink.min.css, og material.blue-orange.min.css.
Men hvis du finner spesifisering av fargekombinasjonen i css-filen, er det ikke mulig å bruke verktøyet Tilpass istedenfor. Velg hvilke farger du trenger, og erstatt deretter hovedformatarklenken med en generert gjennom verktøyet.
Kopier stilarketGitteret, sammen med navigasjonen og fotfoten i MDL, er en del av Layoutkomponent. Gitteret i MDL er bygget med Flexbox, noe som gjør den mer allsidig enn tradisjonelle rammer som fortsatt er avhengige av flyter. Rutenettet består av kolonner; tolv kolonner for "desktop size", åtte kolonner for "tablett" (800px og mindre), og fire kolonner for "telefon" -størrelsesvisning (under 500px).
Vi starter et rutenett med tomt div. Legg deretter til en MDL-gitter klasse og eventuelt en egendefinert klasse for å overstyre eller definere tilpassede stiler for nettet senere:
Tenker på MDL-gitter som en ekvivalent av rad eller container klasse hvis du kommer fra Bootstrap. Men i stedet for å være forhåndsdefinert, forlater MDL bredden helt opp til oss. I stilarket må du kanskje spesifisere max bredde av rutenettet til ditt krav:
.innholdsnett maksimal bredde: 960px;
For å bygge kolonnene, legg til en eller flere div elementer (eller hvilke elementer som passer dine behov) med en klasse av MDL-celle- innen MDL-gitter.
På dette tidspunktet har vi effektivt laget et rutenett. Vi har lagt til tre kolonner. Hver kolonne er riktig justert og satt til en like bredde for 33,3333333333%. MDL antar at vi generelt vil legge til tre kolonner på rad.
For å overstyre standard kolonnestørrelse, må vi legge til en MDL-celle - nummer COL klasse med Nummer varierer fra 1 til 12. Legg til klassen for hver div:
Tips: Denne klassen er et BEM navneområde for a modifier. For mer informasjon, se vår tidligere post En introduksjon til BEM-metoden der Josh Medeski har dekket BEM-inserter og outs.
Den første kolonnen skal nå være større.
MDL prøver å passe inn i kolonnene i det tilgjengelige visningsporten ved å endre størrelsen på kolonnene på en logisk måte. Når du krymper ned til nettbrett og mobil (fortsett, klikk på ikonene), vil du oppdage at den første kolonnen blir større. De to siste kolonnene er nå stablet nederst, men de er mindre ved halvparten av den første kolonnen.
Ofte må vi ha kontroll over kolonnestørrelsene for når de vises i en bestemt visningsstørrelse. Som nevnt tidligere tar MDL 8 kolonner i tablettstørrelsen, og 4 kolonner i mobilstørrelsesvisning. Kolonnene må legge til maksimalt 8 og 4 henholdsvis når de målretter mot nettbrett og mobil.
Gitt ovenstående eksempel: Den første kolonnen skal nå være større enn den første på skrivebordet. Den andre kolonnen blir større når den vises i tablett. På en mobiltelefon vises de to første kolonnene side om side like, mens den siste kolonnen spenner over foreldrenes bredde.
MDL utruster også nettet med en rekke nytte klasser eller modifier klasser. Disse inkluderer et sett med klasser for å skjule kolonner i bestemte visningsstørrelser:
Accentsconagua
MDL-celle - hide-skrivebordet; skjuler kolonnen i visningsstørrelse på skrivebordsstørrelse (> 840px)MDL-celle - hide-tablet; skjuler kolonnen i størrelsen på størrelsen på tablettstørrelsen (> 480px)MDL-celle - hide-telefon; skjuler kolonnen i visningsstørrelsen i mobilstørrelse (< 480px)Et annet sett for å justere kolonnen:
MDL-celle - stretch; strekker kolonnen for å fylle foreldreelementet, i dette tilfellet, MDL-gitter.MDL-celle - topp; justerer kolonnen til toppen av overordnet.MDL-celle - bunn; justerer kolonnen til bunnen eller overordnet.Disse klassene er alle valgfrie, men er der hvis du trenger dem. Legg til en eller to av dem til div kolonne, for eksempel:
Dette eksempelet justerer den tredje kolonnen til bunnen av raden for skrivebord, skjuler den andre kolonnen på tabletter, mens den tredje kolonnen er skjult på mobilen. Gi det et forsøk:
MDL-nettet er gjennomtenkt bygget. Gitt at den bruker Flexbox i stedet for flyter, er det lettere å justere, bestille og endre størrelse på kolonnene uten å bekymre deg for å bryte oppsettet eller påvirke nabostillingene.
Selv om det ikke kreves, oppfordrer jeg deg til å bli vant til CSS calc () funksjon samt BEM-metoden - strukturen som MDL bruker til å navngi klassene. Dette vil hjelpe deg med å få tilpasset rutenettet i tråd med MDL pre-built strukturer.
I neste veiledning tar vi en titt på en annen MDL-komponent. Følg med!
