Dezvoltă rapid interfața saitului tău folosind Biblioteci CSS - aka CSS Frameworks


 21 Oct, 2014  doru  347  
css css-frameworks twitter-bootstrap zurb-foundation html5-boilerplate pure skeleton-css html-kickstart

Când vrei să dezvolți un sait și ești mai degrabă un dezvoltator web decât un designer web, e foarte probabil ca saitul care rezultă să aibă o interfață-utilizator foarte spartană, dacă nu de-a dreptul colțuroasă. De mare ajutor sunt atunci Softurile-cadru CSS sau Bibliotecile CSS (CSS Frameworks).

Ce este un Soft-cadru / Bibliotecă CSS? În Wikipedia găsim următoarea definiție (în traducere proprie):

Softurile-cadru CSS sunt biblioteci de cod CSS create în prealabil al căror scop este să permită stilizarea mai ușoară și în conformitate cu standardele a paginilor web folosind limbajul CSS (Cascading Style Sheets - Foi de stilizare în cascadă). Ca și bibliotecile altor limbaje de programare, Bibliotecile CSS sunt de obicei încorporate ca fișiere externe cu terminația .css, prin referire, în HTML (între tagurile head). Ele oferă un număr de elemente pre-realizate (de la butoane până la formulare) și opțiuni legate de punera în pagină a conținutului unei pagini web.

Mai este de adăugat că toate aceste Softuri-cadru CSS sunt (în marea lor majoritate) si complet responsive (fully responsive) adică dimensiunea paginii și a elementelor din ea se micșorează sau se măresc în funcție de dimensiunile ecranului pe care sunt văzute.

Cele mai cunoscute și folosite Biblioteci CSS sunt:

Twitter Bootstrap

Twitter Bootstrap este o colecție gratuită de elemente pentru crearea saiturilor și aplicațiilor web. Conține șabloane de design - create în HTML și CSS - pentru formulare, butoane, grafice, navigare, afișare a textului, etc precum și extensiile opționale în JavaScript. (en.wikipedia.org/wiki/Twitter_Bootstrap)

Zurb Foundation

Foundation este cel mai avansat Soft-cadru CSS responsiv din lume. Cu Foundation poți schița și dezvolta saituri sau aplicații care să ruleze pe orice fel de dispozitiv.  Conține nenumărate moduri de structrurare a unei pagini și elemente care pot fi folosite pe aceasta, toate fiind realizate urmând cele mai bune practici. (github.com/zurb/foundation/blob/master/README.md)

HTML5 Boilerplate

Boilerplate nu este un Soft-cadru CSS, nici nu prescrie vreo filozofie de dezvoltare a paginilor web, este o colecție de elemente și trucuri care te ajută să-ți pui repede pe roate proiectul și să pornești cu dreptul.   (html5boilerplate.com)

Pure, făcut de cei de la Yahoo!, este:

Un mic set de module complet responsive CSS pe care îl poți folosi în fiecare proiect web. (descrierea de pe pagina lor de primire - http://purecss.io/)

Skeleton

Skeleton este o mică coleție de fișiere CSS care te pot ajuta să dezvolți rapid saituri care să arate minunat la orice mărime: fie pe ecranul de 17" al unui laptop, fie pe iPhone. (www.getskeleton.com)

HTML KickStart

HTML KickStart este un mic set de fișiere  HTML5, CSS, si jQuery ce conține structurări de pagină și elemente care să-ți dea un start rapid și să te scutească de câteva zeci de ore de lucru la noul tău sait web. (www.99lime.com)

Aceste sunt cele mai cunoscute Biblioteci CSS, evident că mai sunt și altele - o mică căutare pe web te va lămuri.

Așadar dacă trebuie să dezvolți rapid un sait sau numai să-l schițezi și nu prea te pricepi la web design, o Bibliotecă CSS (pentru avansați - Bootstrap sau Foundation; pentru începători - HTML5 Boilerplate sau HTML KickStart) este exact lucrul de care ai nevoie. Toate sunt bine documentate și se găsesc video-tutoriale online. Acestea fiind spuse, (ro)cod ușor!