Cele mai bune cadre CSS open source

Deși majoritatea site-urilor web rulează sub un manager de conținut, există multe de spus în favoarea creării unui portal de la zero. Și, oricum, managerii de conținut au nevoie și de cineva care să aibă grijă de aspectul lor vizual. În această postare vom trece în revistă unele dintre cele mai bune instrumente pentru crearea foilor de stil CSS.

Să începem de la început. Ce este CSS?

Cum ar fi casa viselor tale? Ar avea unul sau două etaje? Doriți dormitoarele de la parter și bucătăria de la etaj? De ce să nu puneți cada în dormitor?

Și odată rezolvat acest lucru, ce culoare ați vopsi camerele? Ați face fața din piatră?

Putem face o analogie între un site web și o casă. Pe de o parte, avem structura site-ului și pe de altă parte aspectul vizual.  În acest caz, structura este determinată cu un plan și aspectul vizual prin examinarea probelor de decor.

CSS este acronimul pentru Cascading Style Sheets. Întrucât HTML este utilizat pentru a structura un document web (definind lucruri precum pagini, titluri și indicând când să încorporeze imagini, videoclipuri și alte suporturi media) CSS setează stilul de aspect al paginii, culorile și tipografia.

Cu CSS puteți defini stilul pentru fiecare element HTML. Elementele sunt componentele HTML individuale ale unei pagini web.

Foi de stil pot fi externe, interne sau online. Dacă doriți să le utilizați extern, trebuie să le salvați ca fișiere .css și să spuneți fișierului .html unde să le găsiți.

În modul intern, instrucțiunile sunt scrise în antetul unei anumite pagini .html. Acest lucru face ca încărcarea paginii să fie mai lentă și modificările să fie mai complicate.

Cu modul online, foaia de stil externă este găzduită pe un alt server. Sunt potrivite mai ales atunci când vrem să le folosim de mai multe ori.

Ce este un cadru CSS?

Cadrele CSS acestea sunt instrumente utilizate de dezvoltatorii de interfețe pentru a-și face munca mai rapidă. În loc să creăm soluții de la zero de fiecare dată când apare un nou proiect, lcadrele oferă dezvoltatorilor instrumentele pentru a crea rapid interfețe de utilizator care pot fi ajustate și iterate după cum este necesar.

În câteva cuvinte, putem defini cadre ca o colecție de foi de stil CSS care sunt pregătite și gata de utilizare în diferite tipuri de situații.

Economisirea timpului nu este singurul beneficiu care vine din utilizarea cadrelor CSS. Prin utilizarea acestora, modelele sunt standardizate și permit unui dezvoltator să citească cu ușurință codul altui dezvoltator.

Cele mai bune cadre CSS open source

Bootstrap

După ei înșișiBootstrap este cel mai popular cadru pentru HTML, CSS și JS. Este ideal pentru proiectarea de site-uri mobile-friendly (Mobile first) și responsive.

Fundație

Se pare că oamenii care fac cadre nu au bunică.
Fundație Este descris ca „Cel mai avansat cadru adaptiv din lume”

Este un instrument util pentru crearea de site-uri web și aplicații web cu accent pe nevoile afacerii. Facebook, eBay, Mozilla, Adobe, HP, Cisco și Disney se numără printre utilizatorii săi.

găsi

găsi este un cadru CSS gratuit și open source bazat pe Flexbox și utilizat de peste 200.000 de dezvoltatori.

Flexbox a fost conceput pentru a ajuta la distribuirea spațiului dintre elementele dintr-o interfață și pentru a îmbunătăți capacitățile de aliniere. Flexbox gestionează aspectul într-o singură dimensiune la un moment dat - fie ca rând, fie ca coloană. Acest lucru este în contrast cu modelul bidimensional al aspectului grilei CSS, care gestionează coloane și rânduri în același timp.

UI semantică

UI semantică este un cadru de dezvoltare care ajută la crearea unor machete frumoase și receptive utilizând HTML compatibil cu oamenii.

Acest cadru promite să ne permită să construim design-uri frumoase cu cele peste 3000 de variabile tematice și mai mult de 50 de componente ale interfeței utilizatorului.

De asemenea, se integrează cu multe biblioteci terțe, inclusiv React, Angular, Meteor sau Ember.