5 популярных CSS фреймворков

21 787 просмотров 0 комментариев 25 июля 2012

CSS фреймворки становятся все популярнее и популярнее последнее время, они позволяют разработчикам быстро создавать прототипы проектов. Идея css фреймворков заключается в том чтоб сделать всю нудную и повторяющуюся работу, повторяющуюся на каждом сайте снова и снова, что позволяет ускорить процесс разработки.

Основные черты хорошего css фреймворка:

значительное ускорение времени разработки
малые размеры
хорошая документация

Сейчас я представлю небольшой обзор 5 самых популярных css фреймворков, найденную для них демонстрацию и учебники. Вы обязательно найдете здесь полезную информацию, которая позволит сэкономить время и упростить процесс разработки.

1. 960 CSS Framework

960 Grid System представляет собой попытку рационализировать рабочий процесс веб-разработки, используя сеточную модель верстки, основанную на ширине 960 пикселей. Есть два варианта: 12 и 16 колонн, которые могут быть использованы отдельно или в вместе. Файл фреймворка занимает всего 3,6 Кб в сжатом виде.

Смотреть демо

Учебники, объясняющие, как использовать 960 CSS Framework

Детальный обзор 960 CSS Framework

Тут детально рассмотрен 960 CSS Framework. Приведены плюсы и минусы его использования. Также есть инструкции где шаг за шагом рассказано про создание "12 колоночной" схемы с простым заголовком и двумя столбцами структуры. Наиболее важный совет состоит в следующем: необходимо присвоить класс, каждому диву. Соглашения об именовании требуют, что имя класса должно начинается с "grid_" и заканчиваться числом необходимых столбцов.

960 CSS Framework - Начало работы

Тут описаны основы этого фреймворка, чтобы вы могли начать работу с 960 довольно быстро. Основные методы описанные здесь включают: не редактировать 960.css, загрузка сети, контейнеры, сетки / колонки, поля и стилизация. Другой пост того же автора, где он решает некоторые проблемы с которыми он столкнулся при работе с этим фреймворком.

Fluid 960 Grid System

Fluid 960 Grid System шаблоны были построены на основе 960 Grid System с использованием эффектов из библиотеки Mootools JavaScript.

2. Blueprint CSS Framework

Blueprint это CSS framework, целью которого является сократить ваше время на написание CSS кода. Он дает вам прочную CSS основу для создания вашего проекта с помощью простой в использовании сетки, типографики, красивых форм и, даже, стилей для печати.Одна из его основных функций выполняет сброс стилей браузера по умолчанию, предлагает методы для использования настраиваемой сетки макета.

Доступно несколько плагинов Blueprint, которые могут заменить аспекты структуры или добавить новые стили для вашего использования.

Смотреть демо

Учебники, объясняющие, как использовать Blueprint CSS Framework

Детальный обзор Blueprint CSS Framework

В этом уроке мы взглянем на внутреннюю работу Blueprint, и посмотрим на демо-приложение, которое использует Blueprint, чтобы получить лучшее представление о том, как использовать фреймворк.

Blueprint CSS генератор сетки

Этот инструмент поможет вам генерировать более гибкие версии grid.css и compressed.css и файл grid.png изображения для использования в качестве фонового изображения в процессе разработки, очень удобно для того, чтобы все линии отображались должным образом. Предпочитаете вы 8, 10,16 или 24 столбцов в дизайне, этот генератор позволяет использовать гибкость Blueprint.

3. The jQuery UI CSS Framework

JQuery UI включает в себя надежный CSS Framework предназначенный для создания пользовательских виджетов JQuery. Структура включает в себя классы, которые охватывают широкий спектр общих потребностей в создании пользовательского интерфейса, и может управляться с помощью jQuery UI ThemeRoller

4. YAML

YAML (Yet Another многоколоночные Layout), направленная на гибких макетов и предлагает колонки и сетки для резиновых, эластичных или фиксированной типов дизайнов.

YAML поставляется с очень хороший Ajax строителем, удобным инструментом для визуальной разработки YAML макетов на основе CSS, который позволяет создавать макет визуально. Допустимые HTML-и CSS-код генерируется автоматически на лету.

Смотреть демо

5. Yahoo YUI Grids CSS

YUI Grids CSS предлагает четыре предустановленных ширины страницы, шесть предустановленных шаблонов.4kb файл содержит более 1000 комбинаций макета страницы. Особенности: самоочистка нижних колонтитулов, настройка ширину фиксированного макета, поддерживает резиновые макеты и многое другое.

The YUI Grids Builder — a simple interface for Grids customization.

Смотреть демо

Мне понравились 960 CSS Framework и Blueprint CSS Framework, остальные как-то не впечатлили, а по этим двум планирую написать более детальные обзоры, возможно это будут переводы тех страниц на которые я дал ссылки в качестве мануала по ним.

UPD

Информация в статье устарела, сейчас в основном все используют Twitter Bootstrap.