Un sistem de retea care respecta standardele de interfata interactiva subliniate pentru proiectarea materialelor Google. Sursa consta din foi de stil PostCSS care sunt importate intr-o anumita ordine si construite folosind postcss-cli.

Instalare

npm i material-responsive-grid –save

Sistem grila

Exista trei elemente de baza ale acestui sistem de grila: grile, randuri si coloane.

  • Randurile trebuie sa fie continute de o grila
  • Coloanele trebuie sa fie continute de un rand

Puncte de intrerupere

Acest sistem de retea accepta sase dimensiuni de ecran:

  • Extra-mic (4 coloane)
  • Extra-mic (8 coloane)
  • Mic (8 coloane)
  • Mic
  • Mediu
  • Mare
  • Foarte mare

Aceasta urmeaza recomandarea Google privind punctele de intrerupere ale interfetei de utilizare receptive:

  • Cu exceptia primelor trei, dimensiunile ecranului au 12 coloane.
  • Jgheabul are 16 px sau 24 px. O jgheaba de 24 px se aplica atunci cand ambele dimensiuni ale ecranului sunt mai mari sau egale cu 600 px.
  • Grilele vor umple ecranul pana la 1600 px. In acest moment, grila poate: sa umple in continuare fereastra sau sa ramana lata de 1600 px (aliniata la stanga sau centrata).

Clase

Majoritatea claselor se aplica unei anumite dimensiuni a ecranului. Aceasta relatie este desemnata prin includerea abrevierii dimensiunii ecranului in numele clasei:

  • Extra-mic (4 coloane): xs4
  • Extra-mic (8 coloane): xs8
  • Mic (8 coloane): sm8
  • Mic: sm12 sau sm
  • Mediu: md12 sau md
  • Mare: lg12 sau lg
  • Extra-mare: xl12 sau xl

Pentru dimensiunile ecranului cu douasprezece coloane, a fost furnizat un set duplicat de clase care nu include numarul de coloane in abrevierea dimensiunii ecranului.

Grile

Grilele au urmatoarele clase:

  • .grid – Elementul principal care contine randuri. Are o marja aplicata care va absorbi marginile negative stanga si dreapta ale randului.
  • .marginless – Elimina captuseala exterioara care impiedica continutul unui rand sa se intinda de la o margine la alta.
  • .fixed-left – Incepand cu 1600 px, grila va avea latimea fixa ​​si aliniata la stanga in fereastra de vizualizare.
  • .fixed-center – Incepand cu 1600 px, grila va fi fixata pe latime si centrata orizontal in fereastra de vizualizare.
  • .grid-fixed-left – Invechit , vezi .fixed-left
  • .grid-fixed-center – Invechit , vezi .fixed-center

Comportamentul implicit pentru o grila va fi sa umpleti fereastra de vizualizare si sa pastrati umplutura exterioara pe coloanele adiacente marginii.

Randuri

Randurile trebuie sa fie continute de o grila si sa aiba urmatoarele clase:

Coloane

Coloanele trebuie sa fie continute de un rand si sa aiba urmatoarele clase:

  • .col-quarter-row – Consuma un sfert de rand pentru toate dimensiunile ecranului
  • .col-jumatate-rand – Consuma jumatate de rand pentru toate dimensiunile ecranului
  • .col-trei-sferturi-rand – Consuma trei sferturi de rand pentru toate dimensiunile ecranului
  • .col-full-row – Consuma randul complet pentru toate dimensiunile ecranului
  • .col- {marime} – {numar intreg, 1 numar maxim de coloane} – Numarul de coloane de consumat pentru o anumita dimensiune a ecranului
  • .col- {size} -offset- {integer, 0-max column column-1} – Numarul de coloane pentru a compensa aceasta coloana pentru o anumita dimensiune a ecranului
  • .first- {size} – Prezentati prima aceasta coloana pentru o anumita dimensiune a ecranului (pe baza directiei randului)
  • .last- {size} – Prezentati ultima coloana pentru o anumita dimensiune a ecranului (pe baza directiei randului)
  • .hidden- {size} -only – Aceasta coloana va fi ascunsa pentru o anumita dimensiune a ecranului
  • .hidden- {size} -down – Aceasta coloana va fi ascunsa pentru ecranele la fel de largi sau mai inguste decat o anumita dimensiune a ecranului
  • .hidden- {size} -up – Aceasta coloana va fi ascunsa pentru ecrane la fel de largi sau mai largi decat o anumita dimensiune a ecranului

Exemplu

<div class = “grid”> <div class = “row”> <div class = “col-xs4-4 col-lg-6”> <p> Aceasta coloana consuma intregul rand pentru extra-mici, mici si ecrane medii. Pentru ecrane mari si extra-mari, consuma jumatate din rand. </p> </div> <div class = “hidden-md-down col-half-row”> <p> Aceasta coloana nu este vizibila pentru ecrane extra-mici, mici si medii, dar este vizibila pentru ecrane mari si extra-mari. Consuma jumatate din rand. </p> </div> <div class = “hidden-sm-down hidden-up-xl col-md-12”> <p> Aceasta coloana este vizibila numai pentru ecranele medii si mari si consuma intregul rand. </p> </div> <div class = “hidden-sm8-only hidden-sm-only hidden-lg-only col-full-row”> <p>

Inspiratie

  • flexboxgrid
  • bootstrap

ARTICOLE SIMILAREDE LA ACELAȘI AUTOR