Materialisere - Et materiale design CSS Framework
Googles Materiale Design har til formål at fungere godt på internettet og også på mobile apps. Det er ved at blive populær hos udviklere, og hvis du også vil vedtage det, er der mange måder at implementere Material Design på dit websted. Du kan bruge Polymer eller Angular, eller du kan bruge Materialize.
Materialisere er a CSS ramme baseret på Material Design principper med Sass support for bedre udvikling. Den bærer standard styling til nem brug, og har detaljeret dokumentation.
Du kan finde en masse nyttige komponenter indenfor: dialog, modal, date picker, materialeknapper, parallax, kort og meget mere. Det har også mange navigeringsmuligheder, du kan vælge imellem, f.eks. Drop down, slide in menu og tabs. Materialisere bruger også a 12-gitter system med 3 standard skærmstørrelser medieforespørgsler: en maksimal bredde på 600px er en mobil enhed, 992px tablet enhed og mere end 992px betragtes som en stationær enhed.
Kom i gang
Der er to måder at komme i gang med Materialisere: brug standard CSS eller Sass. Begge kilder kan downloades her. Du kan også få dem med bower ved hjælp af følgende kommando:
bower installere materialisere
Når du har fået kilderne, skal du sørge for at linke dem korrekt på din projektfil eller kompilere kilden, hvis du bruger Sass-versionen.
Funktioner
I dette afsnit vil jeg forklare nogle funktioner, der materialiserer tilbud.
1. Sass Mixins
Denne ramme bærer Sass Mixins, som automatisk tilføjer alle browser præfikser, når du skriver visse CSS egenskaber. Det er en fantastisk funktion at skulle sørge for kompatibilitet på tværs af alle browsere, med så lidt ståhej og kode som muligt.
Tag et kig på følgende animationsegenskaber:
-webkit-animation: 0,5s; -moz-animation: 0,5s; -o-animation: 0,5s; -ms-animation: 0,5s; animation: 0.5s;
Disse linjer med kode kan omskrives med en enkelt linje af Sass mixin som sådan:
@include animation (.5s);
Der er omkring 19 vigtigste mixins ledig. For at se den fulde liste, gå over til Sass kategorien i MIXINS fanen.
2. Flow Text
Mens andre frontend-rammer bruger fast tekst, implementerer Materialer virkelig reagerende tekst. Tekststørrelse og linjens højde er også skaleret behørigt for at opretholde læsbarheden. Når det kommer til mindre skærme, bliver linjens højde skaleret større.
Hvis du vil bruge Flow Text, kan du blot tilføje flow-tekst klasse på din ønskede tekst. For eksempel:
Dette er Flow Text.
Checkout demoen her i afsnittet Flow Text.
3. Ripple effekt med bølger
Material Design kommer også med interaktiv feedback, et bemærkelsesværdigt eksempel er rippel effekten. I materialisere kaldes denne effekt bølger. Dybest set når brugerne klikker eller trykker på / rører ved en knap, et kort eller et andet element, vises effekten. Bølger kan let oprettes ved at tilføje bølger-effekt klasse på dine elementer.
Denne uddrag giver dig bølgerneffekten.
Indsend
Ripples er som standard grå. Men i en situation, hvor du har en mørk farve baggrund, kan du ændre farve. For at tilføje en anden farve, tilføj bare bølger-(farve) til elementet. Udskift "(farve)" med et navn på en farve.
Indsend
Du kan vælge mellem 7 farver: lys, rød, gul, orange, lilla, grøn og blågrøn. Du kan altid oprette eller tilpasse dine egne farver, hvis disse farver ikke passer til dine behov.
4. Skygge
For at levere forhold mellem elementer anbefaler Material Design at bruge højde på overfladerne. Materialisere lever på dette princip med sin z-dybde- (antal) klasse. Du kan bestemme skyggedybden ved at ændre (nummer) fra 1 til 5:
Skygedybde 3
Alle skyggedybder er demonstreret med billedet nedenfor.
5. Knapper og ikoner
I Material Design er der tre hovedknappetyper: hævet knap, fab (flydende handlingsknap) og flad knap.
(1) Hævet knap
Den hævede knap er standardknappen. For at oprette denne knap skal du blot tilføje en btn klasse til dine elementer. Hvis du vil give den bølgeeffekten, når du klikker eller trykker på, skal du gå med følgende:
Knap
Alternativt kan du også give knappen et ikon til venstre eller højre for teksten. For ikonet skal du tilføje brugerdefineret tag med ikonets klassenavn og position. For eksempel:
Hent
I ovenstående uddrag bruger vi MDI-fil-fil-download- klasse for download ikonet. Der er omkring 740 forskellige ikoner du kan bruge. For at se dem, gå hen til Sass siden i fanen Ikoner.
(2) Flydende knap
En flydende knap kan oprettes ved at tilføje btn flydende klasse og dit ønskede ikon. For eksempel:
I Material Design bruges den flade knap ofte i dialogboksen. For at oprette det skal du blot tilføje btn-flat til dit element som sådan:
Nedgang
Derudover kan knapper deaktiveres med handicappet klasse og gjort større ved hjælp af btn-large klasse.
6. Gitter
Materialisere bruger en standard 12-kolonne responsive net system. Responsen er opdelt i tre dele: lille (r) til mobil, medium (m) til tablet og store (l) til skrivebordet.
Hvis du vil oprette kolonner, skal du bruge s, m eller l til at angive størrelsen efterfulgt af rutenummeret. For eksempel, når du vil oprette en halv størrelse layout til mobilenhed så skal du medtage en s6 klasse ind i dit layout. s6 står for små-6 hvilket betyder 6 kolonne på lille enhed.
Du skal også inkludere a col klasse i layoutet du opretter og sætte det inde i et element, som har række klasse. Dette er så layoutet kunne placeres korrekt i kolonner. Her er et eksempel:
Jeg har 12 kolonner eller fuld bredde her4-kolonner (en tredjedel) her4-kolonner (en tredjedel) her4-kolonner (en tredjedel) her
Her er resultaterne:
Som standard, col s12 er fast størrelse og optimeret til alle skærmstørrelser, stort set det samme som col s12 m12 l12. Men hvis du vil angive størrelsen for kolonnerne for forskellige enheder. Alt du behøver at gøre er at angive de ekstra størrelser som sådan:
Min bredde har altid 12 kolonner overaltJeg har 12 kolonner på mobil, 6 på tablet og 9 på skrivebordet
Sådan ser det sådan ud:
Det er blot nogle få funktioner i Materialize. For at lære mere om deres andre funktioner, gå over til dokumentationssiden.
