Несмотря на то, что о CSS фреймворках написано достаточно много, большинство разработчиков сайтов их не используют. Сегодня на почту мне пришло вот такое письмо:
Здравствуйте, Ольга! Мне очень понравилась ваша статья, где вы перечисляете самые известные CSS фреймворки. В чем суть фреймворков я понял, но вот когда и где их действительно нужно использовать , конкретные примеры сайтов так и не нашел. Хотелось бы, чтобы вы написали об этом.
С уважением, Михаил.
Я с Михаилом согласна, фреймворк - готовое решение, но где и как его применить и насколько это действительно будет выгоднее, чем обычная верстка?
Обои для рабочего стола, музыка, софт, видео, книги, картинки и многое другое на графической стороне РУнета - Hups.ru
Optimissimi - сверхновый SEO-блог - только самое актуальное о seo-, smo-блогах и социальных сетях.
Великолепный остров Бали - незабываемый отдых для вас и вашей семьи. Море, песчаные пляжи, огромные пальмы, уникальные места и таинственные культы покорят вас!
блог о программировании от Дроздовского Михаила: заметки в стиле Web 10.0
На www.nahaspravka.ru вы найдете самые популярные ресурсы интернета по различным категориям: скрипты, программы, графика, веб дизайн, игры и многое другое.
CSS фреймворк: что это?
Думаю, не будет лишним еще раз написать определение.
CSS фреймворк - это библиотека (набор) CSS стилей, упрощающий процесс разработки шаблона для сайта.
CSS фреймворк: принцип работы
Как же фреймворк упрощает создание шаблона?
Набор стилей состоит обычно из нескольких CSS файлов (название файлов просто пример):
reset.css - файл, обнуляющий стили элементов по умолчанию. Т.е. обнуляются значения отступов padding и margin у большинства элементов, задается шрифт и размеры шрифта и т.д.
main.css - здесь пишутся стили для основных элементов, например, для главного контейнера, шапки, подвала, заголовков (h1-h6), ссылок и т.д.
content.css - файл стилей, отвечающий за отображение структуры шаблона, как правило, самый большой файл, т.к. именно здесь “рисуется” сетка сайта. Вот, например, так выглядит :
Как видите, шаблон разлинован по вертикали и горизонтали таким образом, что расстояния между ячейками одинаковы. Благодаря этому, создавая свою структуру шаблона, можно быть уверенным, что отступы между блоками всегда будут равные.
Как правило, все фреймворки основаны на такой сеточной структуре, где для каждого блока уже отведено свое место, т.е. прописан стиль, отступы, шрифт и т.д. И создавая свою структуру шаблона, нужно просто ориентироваться на эту сетку, т.к. у каждого блока уже прописан свой “номер”.
Достаточно хорошая представлена фреймворком :
CSS фреймворк: для кого?
Если вы новичок в изучении CSS, то фреймворками вам лучше пока не интересоваться, т.к. нужно прежде всего знать основы CSS, а разбираться с таким количеством стилей вам врятли будет под силу. Но на практике, фреймворк - хороший пример большинства CSS свойств. Фреймворк станет хорошим помощником опытным вебмастерам, для тех кто хочет систематизировать процесс верстки и создания сайтов.
Плюсы и минусы CSS фреймворков
Плюсы:
- как правило, шаблон CSS фреймворка имеет валидный, кроссбраузерный код.
- большинство багов уже решено разработчиками, а если таковые находятся, то саппорт вам обязательно поможет. Кроме того, готовых шаблонов довольно много.
- более 80% CSS кода написано за вас.
- хорошая практика для тех, кто любит покопаться в коде.
Минусы:
- придется смирится с лишним CSS кодом, который вам просто-напросто не потребуется.
- нужно будет изучить структуру, прежде чем сделать свой шаблон.
- код не совсем семантичный (например, class="div-xyz")
- большинство шаблонов только фиксированной ширины
CSS фреймворк: когда использовать?
- если у вас есть журнал или газета и вы хотите публиковать материалы в сети
- если ваш сайт имеет портальный дизайн ()
- если вам нужны шаблоны для CMS, например , , . (живых примеров шаблонов CMS на фреймворках не нашла..)
Если вы разбираетесь в CSS, но шаблоны на сетке вас не привлекают, то лучше всего написать свой собственный небольшой фреймворк. Тут уже дело вкуса :)
А обзор существующих фреймворков вы можете найти здесь.
