CSS Фреймуърци

CSS технологията (cascading style sheets, каскадни набори от стилове) е в основата на съвременния уеб дизайн. Наричана още падащи (поради организацията си) набори от стилове, тази технология позволява за разделяне на кода на уеб страниците от правилата за визуализацията им, което позволява за по-добра повторна употреба, по-лесна подръжка и по-малко мрежов трафик използван напразно от страна на потребителя.

Казаното по-горе вече е широко възприемано и уеб дизайнът базиран на CSS е широко приет и на практика вездесъщ особено в новите проекти и такива, които не са базирани на определена технология създаваща код смесващ уеб страци със нейната визуализация.

За съжаление обаче, въпреки това, че CSS има много достоинства, не всичко е идеално в реалната страна на нещата. Проблеми свързани с интерпретирането на правилата за визуализация в CSS, не достатъчно добра подръжка или непълно имплементиране на уеб стандартите създават проблеми пред уеб разработчиците и се налага писането на код, който се изпълнява само в определени браузъри, използването на хакове и по-подробно тестване от страна на екипите по качество.

Всичко това значи повече работа, която трябва да се свърши само за да може да се пригоди кодът на определена уеб страница. Като се добави и това, че изискванията за скорост на изработка на проект и неговото качество постоянно растат поради нарастващата конкуренция, задачата да се направи красив сайт на време и работещ във всички браузъри от самото начало става доста трудна, дори ако става въпрос за последните версии на всички популярни браузъри.

Начини за справяне

Повечето уеб дизайнери/разработчици успяват да се справят с подобни предизвикателства като в процеса на работата си успяват да си създадат собствена методология и правила за справяне с проблемите, за които става дума по-горе. Например използването на подобни и постоянно подобрявани шаблони (темплейти) в процеса на работа, използването на готови шаблони или просто запаметяването на използваната методология.

По-нова, но вече не толкова млада, методология е ползването на CSS фреймуърци (CSS frameworks) за улеснение и подобрение на уеб проектите. Фреймуърците във всички области, към които се отнасят, по дефиниция са предназначени да помогнат преодоляването на често срещани проблеми, ускоряването на тривиални процеси и намаляване на напрежението върху работещите.

CSS фреймуърците не правят изключение. Според Уикипедия, CSS фреймуърците са готови библиотеки предназначени за по-лесен, съобразен със стандартите начин на изработка на стиловете на един сайт с помощта на CSS. Тези фреймуърци, обикновено съдържани в отделни .css файлове, дават готови за ползване начини за планиране на разположението на основните елементи на един сайт и техния външен вид.

Предимства на CSS фреймуърците

Лесно разполагане на елементите на сайта без помощта на таблици.
Намалено време за изработка.
Улеснена употреба като част от генератори и визуални редактори на код.
Осигурена съвместимост с различните браузъри.

Обсъждани проблеми на CSS фреймуърците

Фреймуърците имат проблем с осигуряването на достатъчно гъвкавост и налагането на някои ограничения.
Възможно увеличение на изходния код на страниците
По-голям брой HTTP заявки за да бъдат включени файловете на фреймуърка.
Включване в проекта на доста код, който не се използва и е там поради това, че е част от фреймуърка.

Някои от по-полулярните фреймуърци

960 Grid System

Това е CSS фреймуъркът, който най-често ползвам, може би поради това, че дизайните последно време се връзват най-добре с него. Сравнително малък е - състои се от три файла, които имат грижата съответно да изчистят настройките за показване по подразбиране на браузърите, да сложат нови настройки за типографията и самият фреймуърк. Могат да се добавят нови лейаути към предварително зададените от 12 и 16 колони. Може би неподходящ все пак за сложни сайтове или уеб приложения.

Baseline

Baseline е CSS фреймуърк направен по типографски стандарти, който се стреми да опрости разработката на уебсайтове с приятна решетка и добра типография. С помощта на reset.css и base.css файловете, Baseline изчиства поведението по подразбиране на браузърите и добавя правила за типографията, които са добри за начало.

Blueprint

Blueprint е фреймуърк предназначен да намали времето за разработка на CSS. Дава една стабилна основа за изработка на проект върху лесен за ползване грид, типографски настройки и стил стил за печат. Един силно опростен фреймуър, който по лекота на ползване може да се сравни с 960 Grid System.

BlueTrip

BlueTrip е фреймуърк, който комбинира най-доброто на BluePrint, Tripoli, стиловете за печат на Hartija, простотата на 960 Grid System и иконките на Elements.

CSS-Boilerplate

CSS Boilerplate достига до нас благодарение на един от авторите на Blueprint. Това е максимално опростен фреймуърк, който предоставя само основните и най-важни неща неща за започването на един проект. Това е един малък фреймуър, който се опитва да не налага несемантични конвенции на именуване.

Elastic

Elastic е семпъл фреймуър за лейаут-базирани интерфейси основан върху техники за лейаути с 4 колони, но с неограчени възможности за всякакви комбинации от колони, а също така и възможност за еластични, фиксирани и запълващи лейаути.

Elements

Elements е създадена за да помогне на дизайнерите да пишат CSS по-бързо и ефективно. Това е фреймуърк със всичко нужда за един проект.

WYMstyle

Целта на този проект е да предостави определен брой подробност тествани, модулно организирани CSS файлове, които могат да помогнат за по-бърз дизайн на уеб сайтове.

Yet Another Multicolumn Layout | YAML

"Yet Another Multicolumn Layout" (YAML) е много гъвкав фреймуърк за лейаути с повече колони.

CleverCSS

CleverCSS представлява малък маркъп език за CSS вдъхновен от Python, койно може да се ползва за да се построи набор от стилове по чист и структуриран начин. В много отношения по-чист и по-мощен от обикновен CSS.

sparkl CSS Framework

Sparkl комбинира POSH маркъп, Bulletproof CSS и Unobtrusive JavaScript в лесен за употреба фреймуърк, който улеснява изработката на сайтове според уеб стандартите. Съставен е от модули, така че проектът да включва само това, което се ползва, а останалото - не.

The jQuery UI CSS Framework

Query UI включва мощен фреймуърк проектиран за разработка на собствени плъгини за jQuery JavaScript фреймуърка и включва класове, които обхващат широк спектър от нужди свързани с потребителските интерфейси. Може да бъде организиран чрез използването на jQuery UI ThemeRoller.

xCSS

CSS e CSS фреймуърк, който използва PHP за да направи по-лесно разработването на сложни стилови структури с обектно-ориентиран подход.

Markercss

Markercss дава отделни файлове за стилизиране на различните елементи от дизайна на уеб страниците като позволява лесно превключване между предпочитанията. Някои от елементите които фреймуъкът поддържа са фон, рамка, шрифт, слоеве, линкове, списъци, формуляри и таблици.