CSS-фреймворк Baseline
CSS-фреймворк Baseline подходит для быстрого прототипирования сайтов с помощью горизонтальных и вертикальных сеток, позволяет без написания правил CSS позиционировать элементы на странице. Поддерживает HTML5 и включает некоторые свойства CSS3.
Baseline выравнивает по горизонтальной сетке заголовки, параграфы, заголовки элементов форм и любые другие элементы на странице для создания гармоничного макета. Состоит из таблиц стилей, сбрасывающих поведение элементов в браузере по умолчанию, типографики, стилей HTML-форм и простой сетки.
Разработан французским дизайнером-разработчиком Стефаном Кюрзи (Stéphane Curzi) и распространяется под лицензией Creative Commons Attribution-Share Alike 3.0 Unported License.
Начало работы с Baseline
Скачать фреймворк и посмотреть демонстрационные примеры можно на . Архив включает в себя полный набор файлов CSS для разработки и развертывания, шаблоны для Photoshop и примеры.
Ограничений по использованию Baseline нет. В качестве отправной точки могут использоваться два файла baseline.reset.css и baseline.base.css. Таблица стилей baseline.type.css поставляет набор правил оформления текста.
На страницу можно подключить весь набор правил (baseline.reset.css, baseline.base.css, baseline.form.css, baseline.grid.css, baseline.type.css) для подробного изучения на время разработки или использовать сжатую версию (baseline.compress.css), включающую в себя все выше перечисленные таблицы стилей. При использовании таблицы для стилизации форм (baseline.form.css) каждый элемент формы должен быть обернут тегом <label>.
Документация с небольшими комментариями находится в файле baseline.grid.css.
Базовая сетка состоит из четырех основных колонок (width1-width4). Каждую колонку можно поделить на две единицы (width1 = 2 * unitx1).
Преимущества фреймворка:
— Не требуется написание громоздких правил CSS для позиционирования текстовых блоков и элементов на странице. Вся работа заключается в написании классов.
— Включает набор правил для качественного оформления текста, форм и таблиц.
К недостаткам можно отнести отсутствие поддержки ранних версий браузеров.
В исходном коде примера добавлено одно правило (выравнивания страницы по центру окна браузера), вся остальная работа заключалась в позиционировании элементов с помощью классов фреймворка.