Milligram
Last updated
Last updated
Una din cele mai plăcute ocupații este să studiezi și , mai ales atunci când elementele create arată bine fără un efort adițional considerabil. Pentru acest scop, poate fi utilizat .
este un framework (set de unelte) care oferă un punct de pornire rapid și bine stilizat. Evident, acest framework poate fi utilizat nu doar pentru studii, dar și pentru crearea website-urilor complexe.
poate fi inclus în pagină în 2 moduri. Primul mod este să descărcăm pachetul de instalare care conține fișierul CSS de care avem nevoie. Al 2-lea mod este să indicăm calea către fișierul CSS care se află pe o . Mai jos sunt descrise ambele moduri.
Descărcă de pachetul de instalare
După descărcare, dezarhivează dosarul. Dosarul dezarhivat are următoarea structură
Loacalizează fișierele CSS din dosarul milligram/dist.
milligram.min.css - este versiunea minimizată care ocupă mai puțin spațiu, dar este mai puțin lizibilă.
milligram.css - este versiunea necomprimată care e mai ușor de citit, dar ocupă mai mult spațiu.
De obicei, includem în pagini versiunea minimizată. Versiunea necomprimată poate fi utilizată atunci când e nevoie de modificat sau analizat stilurile folosite de framework.
În dosarul unde sunt sau vor fi paginile HTML, crează un dosar nou cu numele css și mută în el fișierul milligram.min.css sau milligram.css.
În paginile HTML, în secțiunea <head> indică calea către fișierul CSS. De exemplu, dacă dosarul unde se află paginile HTML se numește my-cool-website și în el avem un fișier index.html, vom indica
Felicitări! Acum toate elementele HTML din paginile unde ai adăugat link-ul căre fișierul CSS vor fi stilizate de .
În paginile HTML, în secțiunea indică calea către fișierul CSS extern. Ca și în cazul descărcării locale există versiunea minimizată și versiunea necomprimată. Versiunea minimizată ocupă mai puțin spațiu, dar este mai puțin lizibilă. Versiunea necomprimată e mai ușor de citit, dar ocupă mai mult spațiu.
De obicei, includem în pagini versiunea minimizată. Versiunea necomprimată poate fi utilizată atunci când e nevoie de modificat sau analizat stilurile folosite de framework.
Versiunea minimizată
Versiunea necomprimată
Felicitări! Acum toate elementele HTML din paginile unde ai adăugat link-ul către fișierul CSS vor fi stilizate de Milligram.
Milligram stilizează tag-urile standarte HTML și pune la dispoziție mai multe clase pentru a customiza elementele. Mai jos sunt prezentate exemple de cod și ce se generează în pagină.
Cu ajutorul heading-ului putem adăuga rubrici. De menționat, că în imaginea cu ceea ce se generează, lângă pixeli, este indicată și valoarea în rem. Rem e o prescurtare de la “root em”. Aceasta e o valoare relativă față de mărimea indicată prin font-size tag-ului <html>. În Milligram, pentru conveniență 1 rem = 10px.
Citatele pot fi adăugate cu ajutorul tag-ului <blockquote>
Listele sunt o metodă versatilă și comodă pentru afișarea elementelor. Listele neordonate <ul> sunt marcate cu cercuri, cele ordonate <ol> cu numere, iar cele descriptive <dl> cu spații. Mai jos sunt câteva exemple.
Tabelele sunt o formă convenabilă de reprezentare a datelor cu ajutorul rândurilor și coloanelor. Atunci când se crează un <table> se recomandă utilizarea tag-urilor <thead> și <tbody>.
<thead> e o prescurtare de la “table head” și indică antetul tabelului.
<tbody> e o prescurtare de la “table body” și indică corpul tabelului.
Mai jos e demonstrată utilizarea acestor tag-uri.
Grid-ul este un sistem fluid cu o lățime maximă de 112.0rem (1120px), care se repoziționează în dependență de browser/dispozitiv. De menționat, că lățimea maximă poate fi modificată. Această modificare va schimba și lățimea coloanelor constituente ale grid-ului.
Un sistem de grid poate fi creat cu ajutorul claselor .container, .row și .column
.container este un ambalaj (wrapper) care conține .row și .column Asemănător cu .table atunci când creăm un tabel. Acestă clasă centrează conținutul.
.row stabilește un rând nou și conține .column
.column stabilește o coloană nouă.
Față de alte framework-uri, în Milligram pot fi adăugate orice număr de coloane, totuși se recomandă să se urmeze practicile standarte a unui sistem de grid.
Butoanele sunt parte esențială a experienței unui utilizator. poate stiliza butoanele în 3 feluri cu ajutorul claselor .button, .button-outline și .button-clear . Aceste clase pot fi aplicate oricărui din tag-urile <button>, <input> sau <a> . Mai jos sunt câteva exemple.
