Milligram
Intro
Una din cele mai plăcute ocupații este să studiezi HTML și CSS, mai ales atunci când elementele create arată bine fără un efort adițional considerabil. Pentru acest scop, poate fi utilizat Milligram.
Milligram 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.
Getting Started
Milligram 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 rețea de distribuție a conținutului. Mai jos sunt descrise ambele moduri.
Descărcare locală
Descărcă de aici pachetul de instalare
După descărcare, dezarhivează dosarul. Dosarul dezarhivat are următoarea structură
milligram/ ├── examples/ │ └── index.html ├── dist/ │ ├── milligram.css │ └── milligram.min.css ├── license └── readme.md
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<head> <link rel="stylesheet" type="text/css" href="css/milligram.min.css"> </head>
Felicitări! Acum toate elementele HTML din paginile unde ai adăugat link-ul căre fișierul CSS vor fi stilizate de Milligram.
Cu ajutorul unei rețele de distribuție a conținutului
Î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ă
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css">
</head>
Versiunea necomprimată
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.css">
</head>
Felicitări! Acum toate elementele HTML din paginile unde ai adăugat link-ul către fișierul CSS vor fi stilizate de Milligram.
Generalități
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ă.
Heading
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.

<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>
Citate
Citatele pot fi adăugate cu ajutorul tag-ului <blockquote>

<blockquote>
<p><em>Milligram e cool!</em></p>
</blockquote>
Butoane
Butoanele sunt parte esențială a experienței unui utilizator. Milligram 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.

<!-- Buton implicit -->
<a class="button" href="#">Button Implicit</a>
<!-- Buton cu contur-->
<button class="button button-outline">Buton cu contur</button>
<!-- Buton fara contur -->
<input class="button button-clear" type="submit" value="Button fara contur">
Liste
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.

<!-- Listă neordonată -->
<ul>
<li>Element neordonat 1</li>
<li>Element neordonat 2</li>
</ul>
<!-- Listă ordonată -->
<ol>
<li>Element ordonat 1</li>
<li>Element ordonat 2</li>
</ol>
<!-- Listă descriptivă -->
<dl>
<dt>Element descriptiv 1</dt>
<dd>Element descriptiv 1.1</dd>
</dl>
Tabele
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.

<table>
<thead>
<tr>
<th>Numele</th>
<th>Vârsta</th>
<th>Înălțimea</th>
<th>Localitatea</th>
</tr>
</thead>
<tbody>
<tr>
<td>Andrei Barbu</td>
<td>27</td>
<td>1,85</td>
<td>Țânțăreni, Anenii Noi</td>
</tr>
<tr>
<td>Alina Bujor</td>
<td>25</td>
<td>1,80</td>
<td>Inculeț, Orhei</td>
</tr>
</tbody>
</table>
Grid
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.

<!-- .container este clasa ambalaj (wrapper) de bază care centrează conținutul -->
<div class="container">
<div class="row">
<div class="column">.column</div>
<div class="column">.column</div>
<div class="column">.column</div>
<div class="column">.column</div>
</div>
<div class="row">
<div class="column"><span class="column-demo">.column</span></div>
<div class="column column-50 column-offset-25">.column column-50
column-offset-25</div>
</div>
</div>
<!-- Orice .column adăugat într-un .row va ocupa un spațiu egal ca și celelalte coloane. -->
Last updated