Web Design pentru copii: Layout CSS

() translation by (you can also view the original English article)

Bine ați venit la a şasea lecţie din seria Web Design pentru copii, Layout CSS!

În această etapă, punem elementele noastre exact unde le dorim pe ecran. Vom lucra cu fișierele HTML și CSS pentru a ajunge la obiectiv.

Pentru ați aminti, aruncă o privire la site-ul pe care îl construim. Fișierele pentru acest curs pot fi downlodate aici și nu uita să pui întrebări în secțiunea de comentarii de jos.

Înainte să începem

Trebuie să cunoaștem câteva lucruri înainte de vorbi despre layout (sau aranjarea în pagină). În prima secțiune ne vom gândi la cum să rămânem organizați. Vom discuta în general despre poziţionare şi vom vorbi despre ce fel de proprietăți CSS sunt utilizate pentru layout.

Ordinea CSS

A păstra organizat un document CSS este foarte important. Buna organizare va face mai uşor pentru noi să găsim toate piesele în fişier, ceea ce face mai uşor să modificăm şi să adăugăm lucruri mai târziu. În general vorbind, este mai bine să ordonăm declaraţiile privind CSS în ordinea în care au loc pe pagină.

Vom adăuga stiluri în această lecţie în main, de exemplu. Acest stil adăugat pe un astfel de element major ar trebui inclus în CSS înainte de orice alte elemente care sunt plasate în main.

Modelul Box (cutie)

Elementele HTML sunt ca niște cutii dreptunghiulare. CSS box model descrie spaţierea dintre aceste cutii.

Fiecare cutie are patru laturi. Putem aplica o valoare la toate cele patru laturi dintr-o dată în CSS prin padding(umplere), border (graniță) şi/sau margin(margine). Cu toate acestea, dacă vrem aplicăm stil doar parțial pe un element, putem face și asta. De exemplu:

1	padding-left: 20px;
2	border: 4px solid #205D76;

Să presupunem că această cutie roz reprezintă textul. Putem vedea că padding a fost adăugat doar în partea stângă şi că un border albastru gros acoperă toate cele patru laturi ale conţinutului.

Flexbox

CSS ne oferă un set de proprietăți făcute în special pentru a ne ajuta cu layoutul pentru site-ul nostru. Deci, în timp ce modelul box ajută la explicarea spaţierii în jurul elementelor HTML, flexbox (cutie flexibilă) va permite să mutăm aceste elemente.

Atunci când vom folosi flexbox pe un element-recipient, acest element devine un container-flex şi toate elementele dinăuntru vor deveni itemi-flex.

Atunci când vom aplica flexbox unui recipient, automat elementele se vor așeza de-a lungul unei linii drepte (orizontal) şi apoi putem intra în detaliu despre alte proprietăți flexbox.

Nu e nevoie să utilizăm flexbox prea mult pentru site-ul nostru, dar este important să îl luăm în considerare pentru că este considerat cel mai modern și adecvat mod pentru a poziţiona porțiuni mici de conţinut într-un site.

Header

h1 şi imaginea oraşului în header sunt centrate pe pagină. Există mai multe moduri diferite de a centra ceva cu CSS, dar acum vom folosi text-align: center; pentru header.

Vom indica spre header, utilizând numele clasei pe care am adăugat-o anterior:

1	.primary-header {
2	text-align: center;
3	}

Nu uita! Salvează documentele şi dă refresh browser-ului pentru a vedea modificările în timp ce le facem!

Secţiuni

Primul lucru pe care am dori să îl facem cu secţiunile noastre este de a plasa una lângă alta conţinutul, imaginea şi lista, în cadrul fiecărei secţiuni, mai degrabă decât stivuite.

Pentru a realiza acest lucru vom folosi flexbox. Flexbox este aplicat la itemii într-un element-recipient prin utilizarea display: flex; asupra acestuia:

1	.store-section {
2	display: flex;
3	display: -webkit-flex; /* This is a vendor prefix! */
4	}

După cum am vorbit mai devreme, imaginea şi divul care conţin lista de magazine sunt acum elemente-flex, deoarece acestea sunt în acest recipient-flex.

În timp ce există mai multe opţiuni pentru specificarea exactă a locației unui element, comportamentul implicit al flexbox funcţionează aici perfect pentru noi – şi lista de magazine rezidă acum la dreapta imaginii magazinului.

O notă asupra „Vendor Prefixes”

Deoarece Flexbox este destul de nou, nu toate browserele au avut ocazia să ofere compatibilitate în mod corespunzător. Pentru a rezolva acest lucru putem include un vendor prefix (prefix de furnizor) pentru proprietăţi flexbox, adăugând acest suport care lipsește pentru moment. Chiar dacă ne axăm pe versiuni moderne de browsere pentru acest proiect, încă va trebui să includem un prefix - webkit- pentru flexbox să ne asigurăm că acesta funcţionează în „Safari”.

Imagini & liste

Am putea folosi puțin spațiu între imagine şi elementul care conţine întregul text, așa că să adăugăm în HTML o clasă numiă store-details la divul care conţine textul.

După ce salvăm, putem sari din nou la CSS, unde adăugăm spaţierea, dar numai în partea stângă a divului:

1	.store-details {
2	margin-left: 30px;
3	}

Spațiul implicit al listelor

Există un spaţiu în stânga listelor neordonate de magazine. Există un stil nativ care vine împreună cu folosirea unei liste HTML. Uneori acest stil implicit este OK, iar alte ori acesta nu poate produce efectul dorit.

Putem scăpa de această spaţiere, utilizând padding: 0; pe lista neordonată, dar acest lucru ar muta punctele bullet prea departe în stânga relativ la titlul listei.

Ne dorim puțin padding aici, dar mai puțin decât prevede stilul nativ al listei. Setarea unui padding-left de 15px pentru listă va alinia destul de frumos punctele bullet cu titlul, astfel încât vom adăuga acest lucru la proprietățile listei din lecţia precedentă:

1	.store-list {
2	padding-left: 15px; /* newly added styling */
3	color: #FFC122;
4	}

Spaţiu între elemente de listă

Avem încă problema menţionată în lecţia precedentă - elementele de listă sunt prea aproape unele de altele. Pentru a rezolva această problemă, adăugaţi o clasă store-name la toate elementele <li> din HTML. Apoi vom adăuga o margine mică în partea de jos a acestor elemente.

1	.store-name {
2	margin-bottom: 10px;
3	}

Margini şi centrare

Secțiunile trebuie să primească proprietăți pentru spațiere dar și să fie centrate pe pagină. Vom face acest lucru prin proprietăţile margin şi width.

Din nou, vom adăuga la stilul scris deja:

.store-section {
    display: flex; 
    display: -webkit-flex; 
    margin: 50px auto; 
    width: 450px; 
}

Valoarea 50px pentru margin aplică acest spațiu în partea de sus a fiecărei secțiuni pentru magazine. Suplimentând cu auto, spunem browser-ului să ia în considerare lăţimea elementului (stabilit la 450px) şi să îl centreze automat în fereastra browser-ului.

Footer

Pentru footer, vom centra textul şi vom adăuga puțin padding să ne asigurăm că acest text nu este prea aproape de marginile footerului.

.primary-footer {
    padding: 2px;
    text-align: center;
    background-color: #FFC122;
}

Marginea body

Am vorbit puțin despre stilurile implicite când am aranjat listele. Elementul body vine cu propriile stiluri implicite, unul fiind un margin care înconjoară întreaga pagină. Uneori, acest lucru nu este o problemă, dar aici putem vedea că împiedică background-color din footer să se întindă deplin spre marginile ferestrei browserului.

Soluţia este să adăugăm în CSS pentru body, următoarele:

1	body {
2	margin: 0;
3	}

Concluzie

În acest curs, am plasat toate elementele cu tehnici de layout CSS. Deși de obicei, există mai multe moduri diferite de a ajunge la un anumit layout, familiarizarea cu CSS box model și flexbox oferă o înțelegere solidă a acestor abordări.

Din moment ce site-ul nostru este complet (Felicitări!) vom vorbi despre design, tipografie și culoare în lecțiile ce urmează. Acest lucru te va ajuta să devii un designer web educat și informat.

Ne vedem prin oraș!