Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 73
под кат
сделано
Ну тогда нате плюсик :)
еще демо впишите, куда-нибудь повыше. сначала я (и многие другие) хочу увидеть пример, а не код ;)
От нашего верстальщика который игнорирует сей замечательный ресурс, в лице меня получите плюс)))
Хорошее было выступление на РИТе по поводу CSS-фреймворков… Не верстайте так… пожалуйста…
Нескромно, но всё же: речь, видимо, идёт об этом докладе — http://pepelsbey.net/2008/04/css-framewo…
А можно поподробнее, что конкретно было по этой теме?
Тоже весьма заинтересован в более подробном описании темы. Поделитесь информацией.
Результаты гугла Второй результат ведет на данный топик :)
Результаты гугла Второй результат ведет на данный топик :)
Спасибо )
Для общего представления познавательно да.....
У меня только один вопрос - а этот код вообще читабельным хоть как то можно назвать? Грязь получается ужасная, ей богу - таблицы и то лучше выглядят, чем миллион дивов у каждого из которых миллион классов.
Никогда не буду так верстать, это - издевательство над программерами.
У меня только один вопрос - а этот код вообще читабельным хоть как то можно назвать? Грязь получается ужасная, ей богу - таблицы и то лучше выглядят, чем миллион дивов у каждого из которых миллион классов.
Никогда не буду так верстать, это - издевательство над программерами.
От бы теперь и демку ;)
Не совсем понимаю, как эта сетка может облегчить вёрстку? ну есть Css файлы и есть макет в JPG и чего?
По-моему, это называется - "от чего ушли". Чем такой метод верстки отличается от табличного, кроме как названиями тегов?
А чем был плох табличный метод, кроме названия тегов?
Он был замечатеоен, но нес в себе семантику, которая тогда никого не интересовала.
DIV элемент не семантичный и его выравнивание по сетке на смысл документа с человеческой или машинной точки зрения не влияет.
Так что, все в порядке! :)
Он был замечатеоен, но нес в себе семантику, которая тогда никого не интересовала.
DIV элемент не семантичный и его выравнивание по сетке на смысл документа с человеческой или машинной точки зрения не влияет.
Так что, все в порядке! :)
Так в том-то и дело, что CSS Framework делает DIV семантичным за счет жесткой установки имен классов.
Имена классов не имеют смысла для машины, если речь не идет о микроформатах.
Да машине-то вообще все пофигу :) Уход от табличной верстки стал необходим для того, чтобы HTML код служил только для разметки содержимого по логическим блокам, а не для визуального оформления, функции которого перешли к CSS.
В случае с фреймворком, мы возвращаемся назад - начинаем использовать в HTML управляющий отображением код. Это не важно, что мы используем DIVы вместо . Важно, что смысл разделения верстки на разметку и стилизацию потерялся.
В случае с фреймворком, мы возвращаемся назад - начинаем использовать в HTML управляющий отображением код. Это не важно, что мы используем DIVы вместо . Важно, что смысл разделения верстки на разметку и стилизацию потерялся.
Как раз машине (конкретно, парсеру) не пофигу. Вы, видимо, хотете меня запутать :)
Табличная верстка и CSS не альтернативы, т.е. можно легко совместить и табличную верстку и CSS. И это будет работать хорошо.
В случае с фреймворком, содержание и оформление разделены, т.к. стили по прежнему в CSS.
Табличная верстка и CSS не альтернативы, т.е. можно легко совместить и табличную верстку и CSS. И это будет работать хорошо.
В случае с фреймворком, содержание и оформление разделены, т.к. стили по прежнему в CSS.
Вы, видимо, не совсем понимаете смысл идиомы "табличная верстка". Это не код, в котором есть теги tr и td. Это когда свойства таблиц используются для управления отображением сайта - для его разметки и позиционирования элементов. Таблицы вполне имеют право на жизнь - для отображения табличных данных, но использовать их для позиционирования элементов - неэффективно, так как делает вертку сложной для чтения, а также затрудняет процесс модификации дизайна.
Так что верстка при помощи таблиц и при помощи CSS - альтернативы по способу позиционирования элементов.
В случае с фреймворком содержание и оформление совсем не разделены, поскольку фреймворк можно рассматривать, как статичный набор правил, а верстку под фреймворк, как семантическую (использующую статичный набор правил).
Чтобы модифицировать позиционирование элементов на сайте, сверстанном под фремворк, нужно разобраться в прописанных в HTML коде ссылках на элементы фреймворка, что крайне неудобно.
Так понятнее?
Так что верстка при помощи таблиц и при помощи CSS - альтернативы по способу позиционирования элементов.
В случае с фреймворком содержание и оформление совсем не разделены, поскольку фреймворк можно рассматривать, как статичный набор правил, а верстку под фреймворк, как семантическую (использующую статичный набор правил).
Чтобы модифицировать позиционирование элементов на сайте, сверстанном под фремворк, нужно разобраться в прописанных в HTML коде ссылках на элементы фреймворка, что крайне неудобно.
Так понятнее?
Совсем недавно попался проект на доработку, в котором использовался blueprint.
Не сказал бы что очень удобная вещь. Многого не хватает, приходится дописывать, что в итоге вносит путаницу.
Не сказал бы что очень удобная вещь. Многого не хватает, приходится дописывать, что в итоге вносит путаницу.
Особенно "приятно" будет разбираться с названиями классов. Я бы назвал это не фреймворком, а жестким каркасом, так как
"частое отсутствие семантики в именовании элементов по причине абстрактности макета и универстальности предполагаемого решения", для меня сводит все удобства на нет
Было бы интереснее посмотреть на он-лайн макетирование в браузере (как реформатор — http://www.artlebedev.ru/tools/technogrette/etc/reformator/).
"частое отсутствие семантики в именовании элементов по причине абстрактности макета и универстальности предполагаемого решения", для меня сводит все удобства на нет
Было бы интереснее посмотреть на он-лайн макетирование в браузере (как реформатор — http://www.artlebedev.ru/tools/technogrette/etc/reformator/).
CSS-фреймворк вообще (ИМХО) звучит по меньшей мере забавно. Думается что для начала работы достаточно ластика и каких-то базовых общих классов. Все остальное рисуется под конкретный проект. Причем без особых трудностей, довольно быстро и прозрачно (т.е. без лишнего мусора). Следуя тенденции жду следующим XHTML фреймворк :-)
Скажите пожалуйста, а верстка сеткой и Blueprint в частности позволяют верстать масштабируемые по горизонтали шаблоны? Ну, в общем, адекватно ли эта штука себя ведет при задании ширины колонок в процентах? А если нужно резинить только некоторые колонки?
немного комментариев на эту тему:
http://groups.google.com/group/blueprintcss/browse_thread/thread/138dd9bcf2e679df#
http://groups.google.com/group/blueprintcss/browse_thread/thread/138dd9bcf2e679df#
Резинобетон
Автор/авторы: Анатолий Ефимочкин, патентный поверенный РФ; Николай Матвеев
Содержание: Это новый строительный материал. Он создан на Ярославском заводе резинотехнических изделий ( заявка 2001121437 ).
Его получают так. Отходы резины сверху накрывают арматурной сеткой, и все это заливают бетонным раствором. Получаются плиты, которые могут быть использованы для изготовления вибропоглощающих фундаментов в зонах сейсмической активности, в регионах с «гуляющим» уровнем подземных вод, доходящих до оснований домов.
Летающая подводная лодка
Летающая подводная лодка в Википедии
Глухонемой певец
Сергей Перевалов - победитель II Всероссийского фестиваля жестового пения. ( Личности Иркутска )
Не стоит ограничивать свое восприятие мира. В нем столько удивительных вещей... дошло? :)
Добавте пожалуйста парочку реальных примеров, где данный фреймворк применяется, желательно один как минимум чтобы был резиновый.
blueprint вроде пока не поддерживает резиновость, если не прав поправьте
он фиксированный. резиновый вот: http://builder.yaml.de/#
а из демки Blueprint я сверстал тему для Drupal за полчаса, до этого не зная движка темизации Drupal и не зная Blueprint :)
http://akzhan-mdev.mhost.ru/.masterflow/release-1.1
а из демки Blueprint я сверстал тему для Drupal за полчаса, до этого не зная движка темизации Drupal и не зная Blueprint :)
http://akzhan-mdev.mhost.ru/.masterflow/release-1.1
демо в студию, плиз!
На мой взгляд:
1) Применение фреймворка снижает семантичность верстки и вообще возвращает к жизни вопрос о семантическом и формительском коде
2) Сетчатый дизайн легко верстать и без фреймворка, если принцип сетки известен верстальщику и понят дизайнером. Для начала можно один расковырять один-два фреймворка, посмотреть, как что устроено, но дальше лучше самому, больше пользы.
3) Лучший фреймворк - тот, который пишешь сам. А то вообще получается, пять лет назад верстали в программах (кто в Дримвивере, кто в Netscape Composer, кто во Фротнпейдже), щас с фреймворками та же фигня.
В целом я не против фреймворков в образовательных или «огнетушительных» целях.
1) Применение фреймворка снижает семантичность верстки и вообще возвращает к жизни вопрос о семантическом и формительском коде
2) Сетчатый дизайн легко верстать и без фреймворка, если принцип сетки известен верстальщику и понят дизайнером. Для начала можно один расковырять один-два фреймворка, посмотреть, как что устроено, но дальше лучше самому, больше пользы.
3) Лучший фреймворк - тот, который пишешь сам. А то вообще получается, пять лет назад верстали в программах (кто в Дримвивере, кто в Netscape Composer, кто во Фротнпейдже), щас с фреймворками та же фигня.
В целом я не против фреймворков в образовательных или «огнетушительных» целях.
1) Применение фреймворка снижает семантичность верстки и вообще возвращает к жизни вопрос о семантическом и формительском коде
Не согласен. CSS и элемент DIV не несут смысловой нагрузки. Поэтому снижения семантичности не происходит.
Просто разработчик начинает меньше понимать. Тут я согласен. Но ничего не поделаешь. Приходится как-то обстрагироваться и от алгоритма рендеренга HTML и от внутренних структур DOM и от реализации методов HTTP, не говоря уже о машинных командах процессора, к которым все в итоге сведется.
2), 3) - вопрос консерватизма и личных страхов, кои не обходят и меня, заставляя порой подробно изучать код используемой CMS (хотя накой он мне?) и верстать в блокноте.
А TR и TD несут смысловую нагрузку?
Не буду распыляться и тут же спрошу по поводу вашего комментария:
Вы, пардон, о какой семантике табличных макетов говорите?
Не буду распыляться и тут же спрошу по поводу вашего комментария:
А чем был плох табличный метод, кроме названия тегов? Он был замечатеоен, но нес в себе семантику, которая тогда никого не интересовала.
Вы, пардон, о какой семантике табличных макетов говорите?
На оба вопроса один ответ. Смысл TR - table row - строка таблицы, TD - table data - табличные данные.
В тоже время DIV это "лось... просто лось".
В тоже время DIV это "лось... просто лось".
И с каких пор элементы макета — это табличные данные?
DIV — это division (часть, раздел, секция), а
DIV — это division (часть, раздел, секция), а
— это секция «шапка» вашего макета.
Табличные данные это содержимое элемента TD, таков его смысл или, если хотите семантика.
В <div id="header"> в общем случае никакого смысла нет, если парсер не понимает соответствующий микроформат.
То, что по этому поводу думает вебмастер, ни на что не влияет, поэтому он может "шапку" обозначить любым именем, будь то header, head, hdr1, top или shapka.
Когда мы говорим о семантике, имеем в виду понимание смысла машиной, а не человеком. Последний смысл поймет при любой верстке... закон жизни. :)
В <div id="header"> в общем случае никакого смысла нет, если парсер не понимает соответствующий микроформат.
То, что по этому поводу думает вебмастер, ни на что не влияет, поэтому он может "шапку" обозначить любым именем, будь то header, head, hdr1, top или shapka.
Когда мы говорим о семантике, имеем в виду понимание смысла машиной, а не человеком. Последний смысл поймет при любой верстке... закон жизни. :)
Ох, грустно-то как…
Табличные данные — это, пардон, Excel'евские таблицы, если вы не в курсе. Именно такой тип данных размечается элементом TABLE и никакой другой. Иначе нарушается семантика этого элемента, т.е. то, для чего он придуман.
А машина не умеет понимать смысл. Только человек может понять какие данные каким образом нужно размечать, в нашем случае — это будет верстальщик.
http://www.ehow.com/how_2112770_use-posh… // пункт 2
http://www.webdesignfromscratch.com/html… // целиком
И на этом давайте завершим, а то и правда — слишком грустно вас слушать, руки опускаются.
Табличные данные — это, пардон, Excel'евские таблицы, если вы не в курсе. Именно такой тип данных размечается элементом TABLE и никакой другой. Иначе нарушается семантика этого элемента, т.е. то, для чего он придуман.
А машина не умеет понимать смысл. Только человек может понять какие данные каким образом нужно размечать, в нашем случае — это будет верстальщик.
http://www.ehow.com/how_2112770_use-posh… // пункт 2
http://www.webdesignfromscratch.com/html… // целиком
И на этом давайте завершим, а то и правда — слишком грустно вас слушать, руки опускаются.
Пардон, съелся код:
DIV — это division (часть, раздел, секция), а <div id="header"> — это секция «шапка» вашего макета.
DIV — это division (часть, раздел, секция), а <div id="header"> — это секция «шапка» вашего макета.
Прикольно на первый взгляд, попробую...
Так [if IE] можно подключать стили для MSIE только если верстать в Quirks Mode. Если верстать в Standard Mode полсе выхода MSIE8 будет плохо.
Мда ... у ленивых нет покоя... css fw...
код конечно ужасный. с нуля написать было бы значительно проще и без такого количества мусора, а так как у почти каждого нормального верстальщика/кодера есть свои шаблоны для определенного случая, то время сводиться лишь к подгонке.
да и вообще что-то слабо понимается смысл ксс-фреймворков. для чего? зачем?
да и вообще что-то слабо понимается смысл ксс-фреймворков. для чего? зачем?
А вот мне всегда инетересно было... а зачем это все?
т.е. грамотный верстальшик без сложных проблем сделает такое чудо - ибо очень часто попадается. Здесь вроде да, удобно и т.д. и т.п., тока вот демку которую я поглядел - она статична, не резиновая, а от статичности вроде давно уже все октказались? или нет?
А вот без статичности я не видел css-ок - обычно при верстке именно в неее - в резиновость все и упирсается, а разместить n блков div-а с фиксированными размерами с моей точки зрения достаточно просто даже не для профи CSS.
Это не критика, просто реально интересно зачем? Если не сочтете сложным - объясните?
т.е. грамотный верстальшик без сложных проблем сделает такое чудо - ибо очень часто попадается. Здесь вроде да, удобно и т.д. и т.п., тока вот демку которую я поглядел - она статична, не резиновая, а от статичности вроде давно уже все октказались? или нет?
А вот без статичности я не видел css-ок - обычно при верстке именно в неее - в резиновость все и упирсается, а разместить n блков div-а с фиксированными размерами с моей точки зрения достаточно просто даже не для профи CSS.
Это не критика, просто реально интересно зачем? Если не сочтете сложным - объясните?
Это всё затем, что мне вчера дали полуготовые страницы, написанные вот на этом самом блупринте :)
Просто, похоже, это существует в мире, и иногда на нас падает…
Придётся знать в лицо.
А кстати — это ещё научит аккуратно организовывать свой CSS.
Просто, похоже, это существует в мире, и иногда на нас падает…
Придётся знать в лицо.
А кстати — это ещё научит аккуратно организовывать свой CSS.
Могу предложить один из вариантов зачем этот фреймворк может быть полезен.
При переходе от десктоп java-приложений использующих GridLayout'ы, переписать код, который будет генерить веб-представление намного легче при таком подходе.
Ну и, в-общем, при динамической генерации хтмл-кода, такой фреймворк облегчит жизнь в разы. Не удивлюсь, если его (или его подобие) используют в GWT (google web toolkit).
При переходе от десктоп java-приложений использующих GridLayout'ы, переписать код, который будет генерить веб-представление намного легче при таком подходе.
Ну и, в-общем, при динамической генерации хтмл-кода, такой фреймворк облегчит жизнь в разы. Не удивлюсь, если его (или его подобие) используют в GWT (google web toolkit).
Все аргументы "за" верстку таблицами от неумения верстать блоками. Почему люди не могут понять принципа отделения контента от оформления?
Попробуйте поменять местами колонки в таблице не трогая HTML?
В данном же фреймфорке тоже все прописано в HTML - class="column span-24 last", а если завтра у меня этот элемент уже не будет колонкой и не будет последней (last)? Мне переписывать все шаблоны?
Просто создатели таких вещей не понимают, что HTML не должен быть привязан к визуальной структуре! Любой элемент может меняться при смене дизайна - сегодня это колонка, завтра строка, послезавтра квадратный блок в углу браузера. Зачем же я его изначально буду называть "column"?
Попробуйте поменять местами колонки в таблице не трогая HTML?
В данном же фреймфорке тоже все прописано в HTML - class="column span-24 last", а если завтра у меня этот элемент уже не будет колонкой и не будет последней (last)? Мне переписывать все шаблоны?
Просто создатели таких вещей не понимают, что HTML не должен быть привязан к визуальной структуре! Любой элемент может меняться при смене дизайна - сегодня это колонка, завтра строка, послезавтра квадратный блок в углу браузера. Зачем же я его изначально буду называть "column"?
twitter.github.com/bootstrap/ — может он и ничего, но я все же пользуюсь Bootstrap Twitter
jkeks.ru/jkeks.ru/archives/1853 — вольный перевод Bootstrap
jkeks.ru/jkeks.ru/archives/1853 — вольный перевод Bootstrap
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Blueprint