Materialisere - En Material Design CSS Framework
Googles Material Design har til hensikt å fungere godt på nettet og også på mobilapper. Det blir stadig mer populært med utviklere, og hvis du vil adoptere det, er det mange måter å implementere Material Design på nettstedet ditt. Du kan bruke Polymer eller Angular, eller du kan bruke Materialize.
Materialisere er a CSS rammeverk basert på Material Design prinsipper med Sass støtte for bedre utvikling. Den har standard styling for enkel bruk, og har detaljert dokumentasjon.
Du kan finne mange nyttige komponenter innen: dialog, modal, datovelger, materialknapper, parallax, kort og mer. Det har også mange navigasjonsalternativer du kan velge mellom, for eksempel rullegardinmeny, lysbilde i menyen og faner. Materialisere bruker også a 12-grid system med 3 standardskjermstørrelser medieforespørsler: en maksimal bredde på 600px er en mobil enhet, en 992px tablett og mer enn 992px betraktes som en stasjonær enhet.
Starter
Det er to måter å komme i gang med Materialisere: bruk standard CSS eller sass. Begge kildene kan lastes ned her. Du kan også få dem med bower ved å bruke følgende kommando:
bower installere materialisere
Når du har fått kildene, må du sørge for å koble dem riktig til prosjektfilen din eller kompilere kilden hvis du bruker Sass-versjonen.
Egenskaper
I denne delen vil jeg forklare noen funksjoner som Materialize tilbyr.
1. Sass Mixins
Dette rammeverket bærer Sass Mixins som automatisk legger til alle nettleserprefikser når du skriver visse CSS-egenskaper. Det er en flott funksjon å måtte sikre kompatibilitet på tvers av alle nettlesere, med så lite oppstyr og kode som mulig.
Ta en titt på følgende animasjonsegenskaper:
-Webkit-animasjon: 0.5s; -moz-animasjon: 0,5s; -o-animasjon: 0,5s; -ms-animasjon: 0,5s; animasjon: 0,5s;
Disse kodelinjene kan skrives om med en enkelt linje med Sass mixin slik:
@include animasjon (.5s);
Det er omtrent 19 viktigste mixins tilgjengelig. For å se hele listen, gå over til Sass-kategorien i mixins tab.
2. Flow Text
Mens andre frontend-rammer bruker fast tekst, implementerer materialiserer virkelig lydhør tekst. Tekststørrelse og linjehøyde er også skalert responsivt for å opprettholde lesbarheten. Når det gjelder mindre skjermer, blir linjens høyde skalert større.
For å bruke Flow Text, kan du bare legge til flow-tekst klasse på ønsket tekst. For eksempel:
Dette er flyttekst.
Sjekk ut demoen her på Flow Text-delen.
3. Ripple effekt med bølger
Material Design kommer også med interaktiv tilbakemelding, et bemerkelsesverdig eksempel er rippel-effekten. I materialisere kalles denne effekten bølger. I utgangspunktet når brukere klikker eller klikker / trykker på en knapp, et kort eller et annet element, vises effekten. Bølger kan enkelt opprettes ved å legge til bølger-virkning klassen på elementene dine.
Denne brikken gir deg bølgerffekten.
Sende inn
Ripples er som standard grå. Men i en situasjon der du har en mørk fargebakgrunn, kan du endre fargene. For å legge til en annen farge, bare legg til bølger-(farge) til elementet. Erstatt "(farge)" med et navn på en farge.
Sende inn
Du kan velge mellom 7 farger: lys, rød, gul, oransje, lilla, grønn og krøllete. Du kan alltid lage eller tilpasse dine egne farger hvis disse fargene ikke passer dine behov.
4. Skygge
For å levere sammenhenger mellom elementer anbefaler Material Design å bruke høyde på overflatene. Materialiserer leverer på dette prinsippet med sin z-dybde (nummer) klasse. Du kan bestemme skyggedybden ved å endre nummeret fra 1 til 5:
Skyggedybde 3
Alle skyggedybder er demonstrert med bildet nedenfor.
5. Knapper og ikoner
I Material Design er det tre hovedknappetyper: hevet knapp, fab (flytende handlingsknapp) og flat knapp.
(1) Hevet knapp
Den hevede knappen er standardknappen. For å opprette denne knappen, legg bare til en btn klasse til elementene dine. Hvis du vil gi den bølgeeffekten når du klikker eller trykker på, går du med dette:
Knapp
Alternativt kan du også gi knappen et ikon til venstre eller høyre for teksten. For ikonet må du legge til egendefinert tag med ikonet klassenavn og posisjon. For eksempel:
nedlasting
I det ovennevnte kuttet bruker vi mdi-file-fil-nedlasting klassen for nedlastingsikonet. Det er omtrent 740 forskjellige ikoner du kan bruke. For å se dem, gå over til Sass-siden i ikonet.
(2) Flytende knapp
En flytende knapp kan opprettes ved å legge til btn-flytende klasse og ønsket ikon. For eksempel:
I Material Design brukes den flate knappen ofte i dialogboksen. For å lage den, legg bare til btn-flat til elementet ditt slik:
Avslå
I tillegg kan knapper deaktiveres med funksjonshemmet klassen og laget større bruk btn-large klasse.
6. Rutenettet
Materialisere bruker en standard 12-kolonne responsivt grid system. Responsen er delt inn i tre deler: liten (e) for mobil, medium (m) for tablett og stor (l) for skrivebordet.
For å lage kolonner, bruk s, m eller l for å angi størrelsen, etterfulgt av rutenettnummeret. For eksempel, når du vil lage en halv størrelse layout for mobilenhet, bør du inkludere en s6 klassen i oppsettet ditt. s6 står for små-6 som betyr 6 kolonne på liten enhet.
Du må også inkludere a col klasse i oppsettet du lager og sett det inne i et element som har rad klasse. Dette er slik at oppsettet kan settes inn i kolonner på riktig måte. Her er et eksempel:
Jeg har 12 kolonner eller full bredde her4-kolonner (en tredjedel) her4-kolonner (en tredjedel) her4-kolonner (en tredjedel) her
Her er resultatene:
Som standard, kol s12 er fast størrelse og optimalisert for all skjermstørrelse, i utgangspunktet den samme som kol s12 m12 l12. Men hvis du vil spesifisere størrelsen for kolonnene for forskjellige enheter. Alt du trenger å gjøre er å liste de ekstra størrelsene slik som:
Bredden min har alltid 12 kolonner overaltJeg har 12 kolonner på mobil, 6 på nettbrettet og 9 på skrivebordet
Slik ser dette ut:
Det er bare noen få funksjoner i Materialize. For å lære mer om deres andre funksjoner, gå over til dokumentasjonssiden.
