Сделав вид, что не знаю о холиварах вокруг css-фреймворков и ненависти к велосипедам, поделюсь своими мыслями («Еще один все понял» © Лепрозорий) по поводу надобности и удобства использования сабжа.
Их есть куча и они обладают своей идеологией, а, например 960gs, Blueprint, YUI grids — самые мне известные и опробованные на собственной коже.
Blueprint с 960gs считают, что вся наша жизнь — сетка, стили для ширины колонки нужно называть согласно количеству занимаемых минимальных ширин колонок. «Из коробки» первый считает, что колонок 24 (имеет какой-то скрипт-генератор, позволяющий стандартные количество и ширину менять); второй утверждает, что колонок может быть 12 или 16, об этом нужно сообщить в класснейме контейнера. Есть еще несколько нюансов, но вцелом они схожи. Если брать дизайн и верстать, стараясь обойтись одним только blueprint-ом — лучше не надо.
YUI grids позволяет в документе иметь шапку, подвал, основную колонку и сайдбар(ы). То есть содержит в своих классах такие понятия. А еще тут тебе и лайауты фиксированные и резиновые, и разные конфигурации расположения. Чтобы сетку сделать посложнее — можно вкладывать лейауты друг в друга.
К сожалению среднестатистические дизайны почему-то не вписываются ни в сетки(либо вписываются, но с какими-то своими нюансами), ни в лайауты, если специально под фреймворк не рисовать. В идеале при верстке у меня получалось использовать максимум 20% возможностей фреймворка (ну reset, вспомогательные классы типа ".clear"/".error"/".success", ). Стандартная фреймворчная типографика никуда не годится(нужно как минимум дополнять) хоть и красивенько смотрится на демках.
Всего один раз мне приходилось видеть дизайн-документ, где вся типографика была расписана подробно: цвета, шрифты, размеры, line-height-ы; и не приходилось махать линейкой в фотошопе.
Жизнь заставила подготовить себе набор классов-инструментов для упрощения и ускорения верстки, а точнее для рисования сетки, и что-то еще. Чаще нужно, чтобы колонки/блоки в дизайне имели какие-то пропорции(33/33/33, 70/30 и т.д.), а не фиксированный размер, элементы нужно иногда «клирить», прятать, выравнивать в них текст и выравнивать их сами.
Итак, вот оно:
или pastie.org/816484
Да, вообще ничего сложного и лишнего(как мне кажется), половину кода скопировал из Blueprint. Такое вот хозяйство я обычно называю util.css, подключаю и использую повсеместно, иногда беря в помощь чей-нибудь reset.css. Пригождается всегда.
Этот код отступает от идеологии семантичной верстки, в которую я был так страстно влюблен на заре карьеры верстальщика, пришла бытовуха и «главное, чтоб работало».
Их есть куча и они обладают своей идеологией, а, например 960gs, Blueprint, YUI grids — самые мне известные и опробованные на собственной коже.
Blueprint с 960gs считают, что вся наша жизнь — сетка, стили для ширины колонки нужно называть согласно количеству занимаемых минимальных ширин колонок. «Из коробки» первый считает, что колонок 24 (имеет какой-то скрипт-генератор, позволяющий стандартные количество и ширину менять); второй утверждает, что колонок может быть 12 или 16, об этом нужно сообщить в класснейме контейнера. Есть еще несколько нюансов, но вцелом они схожи. Если брать дизайн и верстать, стараясь обойтись одним только blueprint-ом — лучше не надо.
YUI grids позволяет в документе иметь шапку, подвал, основную колонку и сайдбар(ы). То есть содержит в своих классах такие понятия. А еще тут тебе и лайауты фиксированные и резиновые, и разные конфигурации расположения. Чтобы сетку сделать посложнее — можно вкладывать лейауты друг в друга.
К сожалению среднестатистические дизайны почему-то не вписываются ни в сетки(либо вписываются, но с какими-то своими нюансами), ни в лайауты, если специально под фреймворк не рисовать. В идеале при верстке у меня получалось использовать максимум 20% возможностей фреймворка (ну reset, вспомогательные классы типа ".clear"/".error"/".success", ). Стандартная фреймворчная типографика никуда не годится(нужно как минимум дополнять) хоть и красивенько смотрится на демках.
Всего один раз мне приходилось видеть дизайн-документ, где вся типографика была расписана подробно: цвета, шрифты, размеры, line-height-ы; и не приходилось махать линейкой в фотошопе.
Жизнь заставила подготовить себе набор классов-инструментов для упрощения и ускорения верстки, а точнее для рисования сетки, и что-то еще. Чаще нужно, чтобы колонки/блоки в дизайне имели какие-то пропорции(33/33/33, 70/30 и т.д.), а не фиксированный размер, элементы нужно иногда «клирить», прятать, выравнивать в них текст и выравнивать их сами.
Итак, вот оно:
.clear { clear:both; }
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.left { float:left; }
.right { float:right; }
.hidden { display:none; }
.column { float: left; }
.col-25 { width: 25%; }
.col-50 { width: 50%; }
.col-30 { width: 30%; }
.col-33 { width: 33.3%; }
.col-66 { width: 66.6%; }
.col-70 { width: 70%; }
.col-75 { width: 75%; }
.col-100 { width: 100%; }
.tleft { text-align: left; }
.tright { text-align: right; }
или pastie.org/816484
Да, вообще ничего сложного и лишнего(как мне кажется), половину кода скопировал из Blueprint. Такое вот хозяйство я обычно называю util.css, подключаю и использую повсеместно, иногда беря в помощь чей-нибудь reset.css. Пригождается всегда.
Этот код отступает от идеологии семантичной верстки, в которую я был так страстно влюблен на заре карьеры верстальщика, пришла бытовуха и «главное, чтоб работало».
