Materializați - un cadru de design CSS pentru materiale

Google Proiectare materiale este destinat să funcționeze bine pe Web și, de asemenea, pe aplicații mobile. Obțineți popularitate cu dezvoltatorii și, dacă doriți să o adoptați, există multe modalități de a implementa Designul de materiale pe site-ul dvs. Puteți utiliza polimer sau unghiular, sau puteți utiliza materialul.

Materializarea este a CSS bazat pe principii de design material cu suport Sass pentru o dezvoltare mai bună. Acesta poartă stilul implicit pentru o utilizare ușoară și are o documentație detaliată.

Puteți găsi o mulțime de componente utile în: dialog, modal, selector de date, butoane de materiale, parallax, carduri și multe altele. De asemenea, aveți multe opțiuni de navigare pe care le puteți alege, cum ar fi drop-down, glisați în meniu și file. Materialalize utilizează, de asemenea, a Sistem cu 12 grile cu 3 interogări media standard pentru dimensiunea ecranului: o lățime maximă de 600 pixeli este un dispozitiv mobil, dispozitiv de tabletă de 992 pixeli și mai mult de 992 pixeli este considerat un dispozitiv desktop.

Noțiuni de bază

Există două moduri de a începe cu Materialalize: utilizare standard CSS sau Sass. Ambele surse pot fi descărcate aici. De asemenea, le puteți obține cu bower utilizând următoarea comandă:

 instalarea bower se materializeaza 

După ce obțineți sursele, asigurați-vă că le conectați corespunzător în fișierul de proiect sau compilați sursa dacă utilizați versiunea Sass.

Caracteristici

În această secțiune, vă voi explica câteva caracteristici pe care Materialize le oferă.

1. Sass Mixins

Acest cadru poartă Sass Mixins, care adaugă automat toate prefixele de browser atunci când scrieți anumite proprietăți CSS. Este o caracteristică extraordinară pe care trebuie să o asigurați compatibilitate în toate browserele, cu cât mai puțin agitație și cod, cât mai mult posibil.

Aruncați o privire asupra următoarelor proprietăți de animație:

 -webkit-animație: 0.5s; -moz-animație: 0,5s; -o-animație: 0,5s; -ms-animație: 0,5s; animație: 0.5s; 

Aceste linii de cod pot fi rescrise cu o singură linie de Sass mixin așa cum este:

 @ include animație (.5s); 

Sunt aproape 19 mixuri principale disponibil. Pentru a vedea lista completă, accesați categoria Sass din MIXINS fila.

2. Textul fluxului

În timp ce alte cadre frontend folosesc text fix, Materialalize implementează un text cu adevărat receptiv. Dimensiunea textului și înălțimea liniei sunt de asemenea scalate în mod sensibil pentru a menține lizibilitatea. Când vine vorba de ecranele mai mici, înălțimea liniei este scalată mai mare.

Pentru a utiliza Textul fluxului, puteți adăuga pur și simplu fluxul de text clasa pe textul dorit. De exemplu:

 
Acesta este textul fluxului.
 

Verificați demo-ul aici în secțiunea Text flux.

3. Efectul de rupere cu valuri

Material Design vine de asemenea cu feedback interactiv, un exemplu notabil este efectul de ripple. În materialize, acest efect este numit Valuri. Practic, atunci când utilizatorii fac clic sau ating sau ating un buton, card sau orice alt element, efectul apare. Valurile pot fi create cu ușurință prin adăugare valuri efect clasa pe elementele tale.

Acest fragment vă oferă efectul valurilor.

 A depune 

Vitezele sunt gri în mod implicit. Dar într-o situație în care aveți un fundal de culoare închisă, este posibil să doriți să schimbați culoarea. Pentru a adăuga o altă culoare, adăugați-o waves- (culoare) la element. Înlocuiți "(color)" cu un nume de culoare.

 A depune 

Puteți alege între 7 culori: lumina, roșu, galben, portocaliu, violet, verde și teal. Puteți crea sau personaliza întotdeauna propriile dvs. culori dacă aceste culori nu se potrivesc nevoilor dvs..

4. Umbra

Pentru a furniza relații între elemente, Material Design recomandă utilizarea înălțimii pe suprafețe. Materialalize oferă pe acest principiu cu ei z-depth- (număr) clasă. Puteți determina adâncimea de umbră prin modificarea numărului (numărului) de la 1 la 5:

 
 
Adâncimea umbrei 3
  
 

Toate adâncimile de umbră sunt demonstrate cu imaginea de mai jos.

5. Butoane și icoane

În Material Design există trei tipuri principale de butoane: butonul ridicat, fab (buton de acțiune plutitoare) și butonul plat.

(1) Buton ridicat

Butonul ridicat este butonul implicit. Pentru a crea acest buton, trebuie doar să adăugați a BTN clasa elementelor tale. Dacă doriți să îi dați efectul valului când faceți clic sau apăsat, mergeți cu acesta:

 Buton 

Alternativ, puteți da și butonul o pictogramă în stânga sau în dreapta textului. Pentru pictograma, va trebui să adăugați personalizat eticheta cu numele și poziția clasei pictogramelor. De exemplu:

 Descarca 

În fragmentul de mai sus pe care îl folosim mdi-file-file-descărcare clasa pentru pictograma de descărcare. Sunt aproape 740 de icoane diferite poți să folosești. Pentru a le vedea în capul paginii Sass din fila Icons.

(2) Buton plutitor

Un buton plutitor poate fi creat prin adăugarea BTN-plutitoare clasă și icoana dorită. De exemplu:

În designul materialului, butonul plat este adesea folosit în caseta de dialog. Pentru ao crea, trebuie doar să adaugi BTN-flat la elementul dvs. cum ar fi:

 Declin 

În plus, butoanele pot fi dezactivate cu invalid clasa și a făcut mai mare folosind BTN-mare clasă.

6. Grilă

Materialalize utilizează un standard Grilă receptivă pe 12 coloane sistem. Răspunsul este împărțit în trei părți: mic (e) pentru mobil, mediu (m) pentru tablete și mare (l) pentru desktop.

Pentru a crea coloane, utilizați s, m sau l pentru a indica dimensiunea, urmată de numărul grilei. De exemplu, atunci când doriți să creați un aspect de dimensiuni reduse pentru dispozitivul mobil, atunci ar trebui să includeți un s6 clasă în aspectul dvs.. s6 standuri pentru mici-6 ceea ce înseamnă 6 coloană pe dispozitiv mic.

Trebuie să includeți și col clasa în aspectul pe care îl creați și puneți-l într-un element care are rând clasă. Acest lucru este astfel încât aspectul ar putea fi pus în coloane în mod corespunzător. Iată un exemplu:

 
 
Am 12 coloane sau lățime întreagă aici
 
4 coloane (o treime) aici
 
4 coloane (o treime) aici
 
4 coloane (o treime) aici
 
 

Iată rezultatele:

În mod implicit, col s12 este dimensionat și optimizat pentru toate dimensiunile ecranului, practic la fel ca col s12 m12 l12. Dar dacă doriți să specificați mărimea coloanelor pentru diferite dispozitive. Tot ce trebuie să faceți este să enumerați dimensiunile suplimentare cum ar fi:

 
 
Lățimea mea are întotdeauna 12 coloane peste tot
 
Am 12 coloane pe telefonul mobil, 6 pe tabletă și 9 pe desktop
 
 

Iată cum arată acest lucru:

Acestea sunt doar câteva trăsături ale materialului. Pentru a afla mai multe despre celelalte funcții ale acestora, mergeți la pagina de documentare.