Materialise - A Material Design CSS Framework

Google's Materiaal ontwerp is bedoeld om goed te werken op het web en ook op mobiele apps. Het wordt steeds populairder bij ontwikkelaars en als je het ook wilt adopteren, zijn er vele manieren om Material Design op je site te implementeren. U kunt Polymer of Angular gebruiken, of u kunt Materialize gebruiken.

Materialise is een CSS-framework op basis van Material Design-principes met Sass-ondersteuning voor betere ontwikkeling. Het draagt ​​standaard styling voor eenvoudig gebruik, en heeft gedetailleerde documentatie.

Je kunt veel nuttige componenten vinden in: dialoog, modal, datumkiezer, materiaalknoppen, parallax, kaarten en meer. Het heeft ook veel navigatie-opties waaruit je kunt kiezen, zoals drop-down, slide-in menu en tabs. Materialise maakt ook gebruik van een 12-grid systeem met 3 standaard schermgrootte mediaquery's: een maximale breedte van 600px is een mobiel apparaat, een 992px-tablet en meer dan 992px wordt beschouwd als een desktopapparaat.

Ermee beginnen

Er zijn twee manieren om te beginnen met Materialise: gebruik standaard CSS of Sass. Beide bronnen kunnen hier worden gedownload. Je kunt ze ook krijgen met prieel met de volgende opdracht:

 prieel installeren materialiseren 

Nadat u de bronnen hebt opgehaald, moet u ze goed koppelen aan uw projectbestand of de bron compileren als u de Sass-versie gebruikt.

Kenmerken

In deze sectie zal ik enkele functies toelichten die Materialise biedt.

1. Sass Mixins

Dit framework bevat Sass Mixins die automatisch alle voorvoegsels van de browser toevoegt wanneer u bepaalde CSS-eigenschappen schrijft. Het is een geweldige functie om ervoor te zorgen compatibiliteit in alle browsers, met zo weinig gedoe, en code, als mogelijk.

Bekijk de volgende animatie-eigenschappen:

 -webkit-animatie: 0.5s; -moz-animatie: 0,5s; -o-animatie: 0,5s; -ms-animatie: 0,5s; animatie: 0,5s; 

Die coderegels kunnen worden herschreven met een enkele regel van Sass-mixin zoals zo:

 @ inclusief animatie (.5s); 

Er zijn ongeveer 19 hoofdmixins beschikbaar. Om de volledige lijst te zien, gaat u naar de Sass-categorie in de mixins tab.

2. Flow-tekst

Terwijl andere frontend-frameworks vaste tekst gebruiken, implementeert Materialize echt responsieve tekst. Tekstgrootte en regelhoogte worden ook responsief geschaald om de leesbaarheid te behouden. Als het gaat om kleinere schermen, wordt de lijnhoogte groter gemaakt.

Om Flow Text te gebruiken, kunt u eenvoudig de stroom-text klasse op de gewenste tekst. Bijvoorbeeld:

 
Dit is Flow-tekst.
 

Bekijk de demo hier in het gedeelte Flowtekst.

3. Rimpeleffect met golven

Material Design wordt ook geleverd met interactieve feedback, een opmerkelijk voorbeeld is het rimpeleffect. In Materialise wordt dit effect genoemd Golven. Als gebruikers klikken of een knop, kaart of een ander element aanraken, wordt het effect weergegeven. Golven kunnen eenvoudig worden gemaakt door toe te voegen golven-effect klasse op uw elementen.

Dit fragment geeft je het golvende effect.

 voorleggen 

De ribbels zijn standaard grijs. Maar in een situatie waarin u een donkere achtergrondkleur hebt, wilt u misschien de kleur veranderen. Voeg gewoon toe om een ​​andere kleur toe te voegen golven-(kleur) naar het element. Vervang de "(kleur)" door een naam van een kleur.

 voorleggen 

U kunt kiezen uit 7 kleuren: licht, rood, geel, oranje, paars, groen en groenblauw. U kunt altijd uw eigen kleuren maken of aanpassen als die kleuren niet aan uw behoeften voldoen.

4. Schaduw

Voor het afleveren van relaties tussen elementen, raadt Material Design aan om hoogte op de oppervlakken te gebruiken. Materialise levert op dit principe met zijn z-diepte- (nummer) klasse. U kunt de schaduwdiepte bepalen door het (aantal) van 1 tot 5 te wijzigen:

 
 
Schaduwdiepte 3
  
 

Alle schaduwdieptes worden getoond met de onderstaande afbeelding.

5. Knoppen en pictogrammen

In Material Design zijn er drie hoofdknoptypes: verhoogde knop, geweldig (zwevende actieknop) en platte knop.

(1) Verhoogde knop

De verhoogde knop is de standaardknop. Als je deze knop wilt maken, voeg je gewoon een toe BTN klasse aan uw elementen. Als je het een golfeffect wilt geven wanneer erop wordt geklikt of erop wordt gedrukt, ga dan als volgt te werk:

 Knop 

Als alternatief kunt u de knop ook een pictogram links of rechts van de tekst geven. Voor het pictogram moet u aangepaste toevoegen label met de naam en positie van de pictogramklasse. Bijvoorbeeld:

 Download 

In het bovenstaande fragment gebruiken we MDI-file-bestand downloaden klasse voor het downloadpictogram. Er zijn ongeveer 740 verschillende pictogrammen je kunt gebruiken. Om ze te zien ga je naar de Sass-pagina op het tabblad Pictogrammen.

(2) Zwevende knop

Een zwevende knop kan worden gemaakt door toe te voegen btn-zwevende les en je gewenste pictogram. Bijvoorbeeld:

In Material Design wordt de platte knop vaak gebruikt in het dialoogvenster. Om het te maken, voeg je gewoon toe btn-flat naar jouw element zoals zo:

 Afwijzen 

Bovendien kunnen knoppen worden uitgeschakeld met de invalide klasse en groter gemaakt met btn-large klasse.

6. Grid

Materialise gebruikt een standaard 12 kolommen responsief rooster systeem. Het reactievermogen is verdeeld in drie delen: klein (s) voor mobiel, medium (m) voor tablet en groot (l) voor desktop.

Als u kolommen wilt maken, gebruikt u s, m of l om de grootte aan te geven, gevolgd door het rasternummer. Als u bijvoorbeeld een lay-out van een halve grootte wilt maken voor een mobiel apparaat, moet u een s6 klasse in je lay-out. s6 betekent small-6 wat betekent 6 kolom op klein apparaat.

Je moet ook een col klasse in de lay-out die u maakt en plaats deze in een element met de rij klasse. Dit is zodat de lay-out correct in kolommen kan worden geplaatst. Hier is een voorbeeld:

 
 
Ik heb hier 12 kolommen of volledige breedte
 
4-kolommen (een derde) hier
 
4-kolommen (een derde) hier
 
4-kolommen (een derde) hier
 
 

Dit zijn de resultaten:

Standaard, col s12 is een vaste grootte en geoptimaliseerd voor alle schermafmetingen, in principe hetzelfde als col s12 m12 l12. Maar als u de grootte van de kolommen voor verschillende apparaten wilt opgeven. Het enige dat u hoeft te doen, is om de extra formaten als volgt te vermelden:

 
 
Mijn breedte heeft altijd 12 kolommen overal
 
Ik heb 12 kolommen op mobiel, 6 op tablet en 9 op desktop
 
 

Dit is hoe dit eruit ziet:

Dat zijn slechts een paar kenmerken van Materialise. Ga voor meer informatie over hun andere functies naar de documentatiepagina.