Materialisera - En Material Design CSS Framework

Googles Material Design syftar till att fungera bra på webben och även på mobilappar. Det blir populärare med utvecklare och om du vill anta det, finns det många sätt att implementera materialdesign på din webbplats. Du kan använda Polymer eller Angular, eller du kan använda Materialize.

Materialisera är a CSS-ramverk baserade på materialdesignprinciper med Sass-stöd för bättre utveckling. Den har standard styling för enkel användning, och har detaljerad dokumentation.

Du hittar många användbara komponenter inom: dialog, modal, datumväljare, materialknappar, parallax, kort och mer. Det har också många navigeringsalternativ som du kan välja bland, till exempel nedrullning, glidning i meny och flikar. Materialisera använder också a 12-nät system med 3 standard skärmstorleksmediafrågor: en maximal bredd på 600px är en mobilenhet, en 992px tablettanordning och mer än 992px anses vara en stationär enhet.

Komma igång

Det finns två sätt att komma igång med materialisera: använd standard CSS eller sass. Båda källorna kan laddas ner här. Du kan också få dem med bower med följande kommando:

 bower installera materialiseras 

När du har fått källorna, se till att du länka dem ordentligt till din projektfil eller kompilera källan om du använder Sass-versionen.

Funktioner

I det här avsnittet kommer jag att förklara några funktioner som materialiserar erbjudanden.

1. Sass Mixins

Denna ram har Sass Mixins som automatiskt lägger till alla webbläsarprefix när du skriver vissa CSS-egenskaper. Det är en bra funktion att se till kompatibilitet över alla webbläsare, med så lite krångel och kod som möjligt.

Ta en titt på följande animeringsegenskaper:

 -Webkit-animering: 0.5s; -moz-animation: 0.5s; -an-animering: 0,5s; -ms-animering: 0.5s; animering: 0,5s; 

Dessa koder kan skrivas om med en enda rad Sass mixin som så:

 @include animation (.5s); 

Det finns cirka 19 huvudsakliga mixins tillgängliga. För att se hela listan, gå över till Sass-kategorin i MIXINS flik.

2. Flödestekst

Medan andra frontend-ramar använder fast text, implementerar materialiserar verkligen reagerande text. Textstorlek och linjens höjd är också skalad på ett korrekt sätt för att bibehålla läsbarheten. När det gäller mindre skärmar, blir linjens höjd större än större.

För att använda Flow Text kan du helt enkelt lägga till flöde-text klass på önskad text. Till exempel:

 
Detta är Flow Text.
 

Kolla in demoen här i avsnittet Flöd text.

3. Rippleffekt med vågor

Materialdesign kommer också med interaktiv feedback, ett anmärkningsvärt exempel är rippel-effekten. I materialiseras kallas denna effekt Vågor. I grund och botten när användare klickar på eller knackar på / trycker på en knapp, ett kort eller något annat element visas effekten. Vågor kan enkelt skapas genom att lägga till vågor-effekt klass på dina element.

Det här stycket ger dig vågens effekt.

 Lämna 

Ripplarna är grå som standard. Men i en situation där du har en mörk färgbakgrund, kanske du vill ändra färgen. För att lägga till en annan färg, lägg bara till waves- (färg) till elementet. Byt ut "(färg)" med ett namn på en färg.

 Lämna 

Du kan välja mellan 7 färger: ljus, röd, gul, orange, lila, grön och kricka. Du kan alltid skapa eller anpassa dina egna färger om dessa färger inte passar dina behov.

4. Skugga

För att leverera relationer mellan element rekommenderar Material Design att använda höjd på ytorna. Materialisera levererar på denna princip med dess z-depth- (antal) klass. Du kan bestämma skuggdjupet genom att ändra (antal) från 1 till 5:

 
 
Skuggdjup 3
  
 

Alla skuggdjup visas med bilden nedan.

5. Knappar och ikoner

I Material Design finns tre huvudknappstyper: upphöjd knapp, fab (flytande åtgärdsknapp) och platt knapp.

(1) Upphöjd knapp

Den upptagna knappen är standardknappen. För att skapa den här knappen, lägg bara till en BTN klass till dina element. Om du vill ge den vågeffekten när du klickar eller trycker på, går du med:

 Knapp 

Alternativt kan du också ge knappen en ikon till vänster eller höger om texten. För ikonen måste du lägga till anpassade tagga med ikonens klassnamn och position. Till exempel:

 Ladda ner 

I ovanstående snipp använder vi MDI-file-file-nedladdning klass för nedladdningsikonen. Det finns cirka 740 olika ikoner du kan använda. För att se dem gå över till Sass-sidan på fliken Ikoner.

(2) Flytande knapp

En flytande knapp kan skapas genom att lägga till BTN-flytande klass och önskad ikon. Till exempel:

I Materialdesign används den platta knappen ofta i dialogrutan. För att skapa det, lägg bara till btn-platta till ditt element som så:

 Nedgång 

Dessutom kan knappar inaktiveras med Inaktiverad klass och gjorde större användning BTN-stor klass.

6. Grid

Materialisera använder en standard 12-kolonn responsivt rutnät systemet. Responsen är uppdelad i tre delar: liten (s) för mobil, medium (m) för tablett och stor (l) för skrivbordet.

För att skapa kolumner, använd s, m eller l för att ange storleken följt av rutnätet. Om du till exempel vill skapa en halv storlek för mobilenhet bör du inkludera en s6 klass i din layout. s6 står för liten-6 vilket betyder 6 kolumn på liten enhet.

Du måste också inkludera a col klass i layouten du skapar och lägg den in i ett element som har rad klass. Det här är så att layouten kan sättas in i kolumnerna ordentligt. Här är ett exempel:

 
 
Jag har 12 kolumner eller full bredd här
 
4-kolumner (en tredjedel) här
 
4-kolumner (en tredjedel) här
 
4-kolumner (en tredjedel) här
 
 

Här är resultatet:

Som standard, col s12 är fast storlek och optimerad för all skärmstorlek, i princip samma som kol s12 m12 l12. Men om du vill ange storleken för kolumnerna för olika enheter. Allt du behöver göra är att lista de ytterligare storlekarna som så:

 
 
Min bredd har alltid 12 kolumner överallt
 
Jag har 12 kolumner på mobil, 6 på surfplattan och 9 på skrivbordet
 
 

Så här ser det här ut:

Det är bara några funktioner i Materialize. Om du vill lära dig mer om deras andra funktioner går du vidare till dokumentationssidan.