Blueprint: CSS-фреймоворк с хорошей типографикой
06 Aug. 2007Blueprint — модный фреймворк (он же — шаблон) с уклоном в типографику и минимализм.
Главная особенность — выравнивание элементов по сетке (или “сеткам?). Используется модульная сетка с вертикальными модулями, и сетка с шагом равным межстрочному расстоянию основного текста (т. е. “интерлиньяж абзацев”). Про себя, последнюю сетку я называю “интерлиньяжной”. Не знаю как это будет правильно. Пока не нашел в литературе никакого термина.
Собственно, достаточно посмотреть на демо-сайт Blueprint-a чтобы понять основы. Сетки оставлены видимыми.
Еще из модных фишек, бросившихся в глаза, реализована “висячая” пунктуация (кавычки).
Интересный фреймворк. Достоин изучения.
В блоге, где я увидел ссылку на этот фреймворк, в комментариях народ пенял на то, что мол размеры шрифтов заданы в пикселях. Так вот по моему это не баг, а фича. При использовании “интерлиньяжной” сетки, настраивать шрифты проще в пикселях — чтобы всегда попадать в сетку. А потом пиксели можно быстренько перевести в относительные единицы.
06 Aug. 2007 at 11:08
все современные браузеры умеют изменять размер шрифта, заданный в пикселях. видимо автор ориентируется на них.
я видел нечто подобное:
body {font-size: 62.5%}
html > body {font-size: 12px;}
06 Aug. 2007 at 11:08
ну то есть 10 пикселей во втором случае :)
06 Aug. 2007 at 11:08
Многие, тем не менее, стараются избегать использования пиксельных размеров в шрифтах. Это я для них писал о легкости перевода одних значений в другие. То есть это не проблема, по-любому.
Я предпочитаю пройтись по css-файлу и перевести, везде где надо, размеры в em. Зачем дублировать свойства?
06 Aug. 2007 at 22:08
Да, симпатично выглядит.
Понравилось с каким вниманием отнеслись к амперсанду. :)
Единственное, врезка, которая в сайдбаре — div class=”box” — «слезает» с сетки при увеличении-уменьшении шрифта в Файрфоксе.
07 Aug. 2007 at 01:08
Честно говоря не очень понравилось. Здоровенный перечень тегов для обнуления (”стерка” лучше), необоснованно большое кол-во классов, элемент hr очень не понравился. Хотя использование множественных классов не может не радовать.
07 Aug. 2007 at 13:08
Жаль только для русского языка это не годится. При желании, так можно выделять какие нибудь подходящие нам знаки: двоеточия, тире. Но выглядеть будет странновато.
Это Global Reset Эрика Майера. Приходится использовать много селекторов, ибо простейшая “стерка” (ластик) не обеспечивает одинакового отображения всех элементов в популярных браузерах. Ластик годится только для использования на скорую руку.
Большое количество классов сделано про запас — на все случаи жизни. Это же не “индпошив“, а “ширпотреб“. Специфика!
07 Aug. 2007 at 14:08
в 5 и 6 ie косяки
07 Aug. 2007 at 15:08
На сайте разработчика написано что фреймворк тестировался не во всех браузерах, и пока не рекомендуется к использованию в важных проектах.
Оптимизировать для Эксплореров можно и самому. Там ничего сложного не предвидется.
07 Aug. 2007 at 17:08
я к тому, что пример для демонстрации работы могли и получше подобрать
08 Aug. 2007 at 22:08
А здесь в комментариях можно как-то форматировать текст: выделять курсивом, ссылки вставлять? И как это сделать?
09 Aug. 2007 at 03:08
Выглядит все это круто – однозначно, продуманность, универсальность. Но пускай это будет мое имхо, пока не пойму как это может помочь лично мне(верстальшику) в работе над проектами.
К примеру, мне нужны заголовки в тексте, но в фреймворке уже все размеры для них заданы… Мне нужно идти менять их? Или переобозначивать – но ведь это прийдется для каждого проекта делать?
Странное ощущение чего то “прикольного” но непонятно как использовать. Сколько верстальщиков столько и фреймворков можно придумать таких специфичных.
Есть кто то реально их использующий?
@your7: используй простые HTML таги em strong
09 Aug. 2007 at 03:08
your7: можно использовать HTML. Я сам в комментах ссылки так ставлю.
Еще можно использовать синтаксис Markdown.
Например:
*наклонный*
**полужирный**
09 Aug. 2007 at 03:08
akella: Мне сейчас интересно все что связано с модульными сетками. Собираю статьи по сеткам, собираю образцы. Этот фреймворк хорош в этом плане особенно, потому, что видна незамутненная деталями идея. Это отличный материал для изучения. Сетки – мощный тренд сейчас.
Наверное, чтобы понять на что фреймворк годится, придется попробовать его использовать в работе. Для начала есть соблазн сделать новый дизайн для своего блога.
Мы сейчас все слишком по-разному работаем, чтобы использовать в сложном проекте чужой фреймворк без модификации. Благодаря модульной системе фреймворков, можно использовать часть модулей чужих, часть своих. Тут тоже товарищ использовал чужие модули и структуры. Тот же Global Reset.
А в будущем индустрия может прийти к тому, что многие для экономии будут собирать сайт из большого ассортимента фреймворков и шаблонов без крупных переделок. В качестве аналога можно вспомнить разные CMS и темы для них. Где то здесь для фреймворков есть ниша.
09 Aug. 2007 at 23:08
akella, могу предположить, что у каждого более-менее серьёзного верстальщика есть свой набор выверенных css-правил, которые кочуют из проекта в проект.
Что-то подобное и представляет собой данный фреймворк, применив который, получишь текст с человеческими интерлиньяжем, отступами, размерами шрифта, длиной строки и т.д.
А то, порой, откроешь какой-нибудь сайт, а там текст забит от края до края монитора, как вода в аквариуме. :)
03 Jul. 2008 at 16:07
если можешь предположить, что то для серьёзного верстальщика с набором выверенных css-правил, то выложи ссылочку.