Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 83
>hider
Наверное имелось ввиду header?
>http://960.gs/css/960.css.
точку вынесите за ссылку.
В остальном — познавательно и интересно. Посмотрю и blueprint :) Спасибо.
Наверное имелось ввиду header?
>http://960.gs/css/960.css.
точку вынесите за ссылку.
В остальном — познавательно и интересно. Посмотрю и blueprint :) Спасибо.
Спасибо. Все исправила. :)
Какова вероятность (в процентах) того, что во всей этой длинной статье найдется ну максимум одна ошибка?
Ответ мужчины:
— Одна сотая процента
Ответ женщины:
— 50%…
— Почему?!
— Ну, или найдется, или не найдется...
Ответ мужчины:
— Одна сотая процента
Ответ женщины:
— 50%…
— Почему?!
— Ну, или найдется, или не найдется...
Минусует, наверное, женская половина )
Написано было не в обиду ) Шутка :)
Написано было не в обиду ) Шутка :)
Дааа, за спиной тихо-мирно насрали в карму (
вот у меня вопрос — чтож так бояться то за карму за свою, что аж прям расстраиваться и писать об этом всей оббщественности?
Плоский сексистский юмор.
а мне нравится шутка.
Добавьте еще про 960gs fluid в топик
Спасибо за пожелания интересных и СЛОЖНЫХ проектов))
Лучше было бы интересных)
Лучше было бы интересных)
960 gs с т.з. дизайна упрощает структуру и сетку для композиции. Если присмотреться, то тут мы увидим и золотое сечение и основы композиции, но самое главное это законы геометрии.
Да, конечно использовать готовые фрэймворки НЕ зло и не так уж и плохо, но прежде чем облегчать себе задачу просто необходимо дизайнеру познать весь багаж знаний законов композиции и геометрии, «набить» глаз и руку до такой степени, чтобы с точностью можно было разделить холст на основные композиционные блоки.
Если же брать за основу расчерченный лист бумаги (например тетрадь) и базировать свой рисунок на готовой сетке, то это «зло» и гибель для художника (дизайнера).
Как говорится картина начинается с белого холста!
Да, конечно использовать готовые фрэймворки НЕ зло и не так уж и плохо, но прежде чем облегчать себе задачу просто необходимо дизайнеру познать весь багаж знаний законов композиции и геометрии, «набить» глаз и руку до такой степени, чтобы с точностью можно было разделить холст на основные композиционные блоки.
Если же брать за основу расчерченный лист бумаги (например тетрадь) и базировать свой рисунок на готовой сетке, то это «зло» и гибель для художника (дизайнера).
Как говорится картина начинается с белого холста!
Довольно фанатичный взгляд у вас на работу…
Чтобы построить сетку по типу той что на нашем любимом хабре особого таланта не надо. Так что все от задачи зависит.
Чтобы построить сетку по типу той что на нашем любимом хабре особого таланта не надо. Так что все от задачи зависит.
У меня не фанатичный взгляд на работу, я просто заметил, что нужно сначала научится обходится без разного рода линеек и сеток, чтобы научится рисовать, на глаз определять расстояния и пропорции. Ведь это, то без чего дизайнер и художник не может обойтись.
Это Вы думаете, что особого таланта не нужно, а вот мне кажется, что дизайнер, который рисовал макет хабра на вас обидеться, потому как выходит, что напрасно он 6-7 лет учился, напрасно оттачивал руку и глазомер.
Ну, что ж минусуйте и бичуйте ибо я не прав — зачем учится рисовать и постигать науки, если все так просто…
Это Вы думаете, что особого таланта не нужно, а вот мне кажется, что дизайнер, который рисовал макет хабра на вас обидеться, потому как выходит, что напрасно он 6-7 лет учился, напрасно оттачивал руку и глазомер.
Ну, что ж минусуйте и бичуйте ибо я не прав — зачем учится рисовать и постигать науки, если все так просто…
я просто заметил, что нужно сначала научится обходится без разного рода линеек и сеток, чтобы научится рисоватьТут идёт разговор о модульных сетках, при чём тут рисование? -) Даже рисуя макет сайта, вам нужно знать основы вёрстки, например, отступы между блоками, текстом, изображениями.
дизайнер, который рисовал макет хабра на вас обидеться, потому как выходит, что напрасно он 6-7 лет учился, напрасно оттачивал руку и глазомер
Глазомер здесь ни при чём — это математика, уровня 4 класса и знание рендеринга страниц различными браузерами.
Так тут не рисование. Тут верстка :)
А я не хочу учиться рисовать, но сайты делать надо…
Если же брать за основу расчерченный лист бумаги (например тетрадь) и базировать свой рисунок на готовой сетке, то это «зло» и гибель для художника (дизайнера).
ерунда! css фреймворк упрощает верстку, а рисование тут не причем. можно нарисовать макет в фотошопе, влючить заранее прочерченные гайды и порезать макет так, как того требует сетка фреймворка.
Мне кажется вы путаете это:
с этим:
с этим:
Спасибо, а я и не знал, что ты пишешь здесь)
В избранное, естественно:)
В избранное, естественно:)
Очень вовремя. Давно хотелось узнать что же такое эти css-фреймворки, но все как-то руки не доходили. С первого взгляда все предельно просто. Попытаюсь использовать в запланированном сайтике. Спасибо за статью.
P.S: не часто встретишь пост от девушки на хабре. :)
P.P.S: Тобиас Саммет рулит! :)
P.S: не часто встретишь пост от девушки на хабре. :)
P.P.S: Тобиас Саммет рулит! :)
Спасибо за хороший пост!
Я макета 4 нарисовал на 12 колонках, теперь перешел на 16, сейчас рисую.
В 12 не всегда весь контент строго умещался. А так еще интересней и верстальщику приятней и быстрей работать.
Я макета 4 нарисовал на 12 колонках, теперь перешел на 16, сейчас рисую.
В 12 не всегда весь контент строго умещался. А так еще интересней и верстальщику приятней и быстрей работать.
Большое спасибо за пост, стала понятнее работа с сеткой.
Кстати, вот еще один универсальный (px, em, %) грид-генератор gridinator.com/
Кстати, вот еще один универсальный (px, em, %) грид-генератор gridinator.com/
Я, если честно, не очень понимаю всех прелестей подобных систем.
Как дизайнер я использую http://grid.mindplay.dk/.
Верстальщик же все делает с нуля, либо по своим собственным фреймворкам, потому что некоторые вещи в дизайне, такие как, например, разрыв сетки и выносные элементы, не учитываются в 960.gs (может быть я чего-то не знаю, но раньше было так). Плюс, в таких больших системах, используется много лишнего кода — его нужно либо переписывать, либо, что я больше всего боюсь, верстальщик сочтет, что различия минимальны и использует общие правила для конкретного проекта.
Как дизайнер я использую http://grid.mindplay.dk/.
Верстальщик же все делает с нуля, либо по своим собственным фреймворкам, потому что некоторые вещи в дизайне, такие как, например, разрыв сетки и выносные элементы, не учитываются в 960.gs (может быть я чего-то не знаю, но раньше было так). Плюс, в таких больших системах, используется много лишнего кода — его нужно либо переписывать, либо, что я больше всего боюсь, верстальщик сочтет, что различия минимальны и использует общие правила для конкретного проекта.
Пожалуйста, обращайте внимание на то, что ширина канавки (средника) традиционно равна интерлиньяжу. К тому же, это не модульная сетка совсем. Это просто колонки. Модульные сетки предполагают кроме вертикального, еще и горизонтальное членение, а также шрифтовую сетку.
Кажется у вас ошибка в листинге pastie.org/780095, у обоих вложенных дивов класс alpha.
Спасибо, отличная статья!
Спасибо, отличная статья!
замечательно, но представьте что вам надо через некоторое время изменить сетку сайта, и у вас колонок стало 13 вместо 12 предыдущих. а у вас кругом в html grid_12, grid_7 или span-5 и так далее. Очень не гибко. Все стили отвечающие за сетку должны быть либо в элементе, например класс sidebar содержит стили с шириной, либо формализованы более асбтрактно чтобы можно было как то менять впоследствии. А здесь вы обречены при переделке сайта переделывать все.
и второе — что будет если за верстку берется другой человек? Я понимаю что грамотный верстальщик поймет быстро даже незнакомый фреймворк, но даже это неправильно — заставлять другого верстальщика разбираться в фреймворке который ты почему то решил выбрать.
и второе — что будет если за верстку берется другой человек? Я понимаю что грамотный верстальщик поймет быстро даже незнакомый фреймворк, но даже это неправильно — заставлять другого верстальщика разбираться в фреймворке который ты почему то решил выбрать.
Ну если выбор фреймворка удачный, то другой верстальщик, я думаю, не поленится разобраться.
ну как сказать, удачных фреймворков может быть не один. и если я скажу заказчику оплати мне мне надцать часов поучить классный фреймворк это его вряд ли порадует.
Т.е. вы узнаете и изучаете что-то новое для себя и каждый раз при этом требуете денег от заказчика, считая что вы делаете ему одолжение тем, что согласны изучить это?
позвольте позвольте ) если мне надо сделать к определенному сроку работу и эта работа требует от меня изучить фреймворк — да, возьму деньги за это. и это правильно, потому что бывает так что фреймворк выбран кривой и у меня нету никакого желания его учить. а то о чем вы говорите я делаю в свободное время, но тоже потом продаю как свою квалификацию )
Вообще, я считаю, что CSS-фреймворки — это зло, но чем бы дитя не тешилось:)
А по делу <div class="clear"></div> — ни один уважающий себя верстальщик такое не напишет. Это давно делается двумя строчками CSS only.
А по делу <div class="clear"></div> — ни один уважающий себя верстальщик такое не напишет. Это давно делается двумя строчками CSS only.
Приятно читать статьи умных девушек :)
У меня есть доклад двухгодичной давности про CSS-фреймворки. Выходит, что с тех пор ничего не изменилось — всё то же безумие с
grid_12, column_8 и двумя десятками clear'ов. Это не вёрстка, это хрустальная ваза, которую слелали, поставили на полку и больше не трогают.
хм, а какие-нибудь более-менее серьезные сайты используют Blueprint или 960gs? или тоже все на своих крутятся?
Есть ресурс blueprintsites.com/, но там сплошь хомячки, да мини-сайты на простейших макетах.
на своих? на своих чём? фреймворках? мухахаха
Что такое более-менее серьезные? Зайдите на 960.gs/, там приведен список сайтов, сверстанных на 960gs. modxcms.com — достаточно серьезен?
согласен. я кстати нашел для себя выход использовать LessCss. И просто нужный стиль для колонки получаю формулой и вставляю в нужное место в стилях.
Жалко, что «это» активно пропагандируют. Потому что, приходилось встречался с людьми, которые с подобных постов начинали заниматься «вёрсткой», жалкое зрелище, скажу я вам…
Позволю себе с вами не согласиться. Да, у 960gs есть существенные ограничения по свободе макета. Ну что значит ограничения, скорее, особенности работы. В грубом приближении, информация располагается колонками, и paritet98.ru на них собрать сложновато будет. Однако же, грамотно подойдя к колонкам и рассмотрев их возможности, можно верстать не только скучные n-колоночные, но и вполне занятные макеты (пример — сайт про вино, скриншот которого в заголовке данной статьи).
Кроме того, тезис о «хрустальной вазе» тоже имеет ограниченное применение. Модульность системы позволяет как угодно вертеть блоками, вставлять и убирать их когда потребуется. Расширять и сужать, если надо. При вдумчивом подходе достигается весьма интересный результат.
Кроме того, тезис о «хрустальной вазе» тоже имеет ограниченное применение. Модульность системы позволяет как угодно вертеть блоками, вставлять и убирать их когда потребуется. Расширять и сужать, если надо. При вдумчивом подходе достигается весьма интересный результат.
«Хрустальная ваза» говорит не о том, что система не гибкая — я уверен, что ребята придумают ещё 100-500 классов, вроде
Так что и правда ваза — сделать побольше, пониже или вообще кружку не получится. Проще с нуля написать.
column_1323. Дело в том, что подобные сетки вытаскивают оформительский уровень в документ. Колонка должна быть колонкой, а не сеткой_8, чтобы если нужно будет сделать сетку_6, не пришлось бы копать десяток шаблонов.Так что и правда ваза — сделать побольше, пониже или вообще кружку не получится. Проще с нуля написать.
Хорошо. Может быть. Спроектировав дом, надо строить дом. Спроектировав 8 колонок, с чего мне понадобится 10?
Так может говорить фрилансер, который сделал свою работу и счастливо смылся.
А если у вас живой проект, два идиота-менеджера и креативный дизайнер, то дома никогда не будет. Будут лёгкие конструкции, которые передвигаются часто и хаотично. При этом, подобный хаос не исключает модульной сетки, только контроль за ней будет находиться не в руках Натана Смита, а в ваших.
А если у вас живой проект, два идиота-менеджера и креативный дизайнер, то дома никогда не будет. Будут лёгкие конструкции, которые передвигаются часто и хаотично. При этом, подобный хаос не исключает модульной сетки, только контроль за ней будет находиться не в руках Натана Смита, а в ваших.
Весьма категорично высказываетесь. Вывод простой: под задачу и инструмент.
Да, категорично. Исключительно потому, что все наивные ребята ищут серебряную пулю, которая позволит им не думать, а просто «генерить лейауты». Я и предупреждаю, чем придётся пожертвовать ради такой красоты.
Да, вы правильно говорите, согласен в части «что подобные сетки вытаскивают оформительский уровень в документ.» Этот момент меня действительно печалит. Но будем честны, проекты бывают разные, и в большинстве (у меня нет статистики, конечно, так что это мой чистой воды домысел) случаев, верстка меняется один раз за жизнь проекта: когда создается. Если сайт подходит к редизайну, в большинстве случаев (опять мой домысел) придется все равно переписывать все заново. Действительно «живых» больших проектов, в которых сетка кардинально меняется раз хотя бы в месяц, или раз в полгода, я не видел.
Такие посты действительно не новы, и, всякий раз просматривая комментарии, я обнаруживал подобный нашему спор. И всегда был на вашей стороне. Я и сейчас на ней (по поводу выноса оформления в шаблон), но с теоретической точки зрения. Практика же говорит, что такой «сеточный» подход может иметь достойные применения.
Такие посты действительно не новы, и, всякий раз просматривая комментарии, я обнаруживал подобный нашему спор. И всегда был на вашей стороне. Я и сейчас на ней (по поводу выноса оформления в шаблон), но с теоретической точки зрения. Практика же говорит, что такой «сеточный» подход может иметь достойные применения.
Если вы неправильно выбрали инструмент для свой задачи, то виноват не Натан Смит.
Мне кажется сеточные цсс-фреймворки полезны для новичков, чтобы у них в голове завелось понимание отступов и пропорций. С опытом придёт и понимание что сетку надо выносить из шаблона в цсс-фаел.
Это как дополнительные колёса при учёбе езды на велосипеде.
Это как дополнительные колёса при учёбе езды на велосипеде.
Мне кажется отступы и пропорции должны жить в голове у дизайнера.
А верстальщик должен виртуозно работать с кодом. С этими супер-фреймворками получается какая-то путаница: их всё равно будут выбирать верстальщики. Странно, в общем.
А верстальщик должен виртуозно работать с кодом. С этими супер-фреймворками получается какая-то путаница: их всё равно будут выбирать верстальщики. Странно, в общем.
Тут нет пропаганды пихать данный фреймворк во все дырки. Статья написана как пособие по его использованию, не более.
Заметил одну сранную штуку в западном веб-(2.0)-деве: все подобные фреймворки позиционируются как «для дизайнера».
Только под «дизайнером» в этом случае, кажется, подразумевается человек штампующий фиксированные одностраничные-макеты для Wordpress'ов и пр., а потом сам их и «верстающий».
Только под «дизайнером» в этом случае, кажется, подразумевается человек штампующий фиксированные одностраничные-макеты для Wordpress'ов и пр., а потом сам их и «верстающий».
Вот читаю черт знает в какой раз, и вроде бы так все замечательно, написали классы, а оно само уже правильно показано и ровненько стоит. А представим задачу, уменьшить суффиксы и поменять баланс с 8+4 на 6+8, ходить по файлам и менять классы? что-то уже порезано и зашито в блоках, что-то в темплейте, собирай это все как мартышка апельсины вместо переопределения всего в одном .css
ps: раскладка панелей — это пожалуй самая малая по времени часть работы в верстке, скажем типичная раскладка
итого 8 блоков, 8 раз написать float left/right и замерять им ширину — 5-10 минут дел. А над всей страницей сидишь 4-6-8 (клинические случаи с 1.5метровыми макетами не рассматриваем) часов.
ps: раскладка панелей — это пожалуй самая малая по времени часть работы в верстке, скажем типичная раскладка
______ _ __ _ ___ __ ____ _
итого 8 блоков, 8 раз написать float left/right и замерять им ширину — 5-10 минут дел. А над всей страницей сидишь 4-6-8 (клинические случаи с 1.5метровыми макетами не рассматриваем) часов.
Не совсем понял позицую людей, которые однозначно агрессивно настроены против подобного рода систем.
Во-первых, в статье нет ни слова об агитации за использования таких фреймворков, этот выбор лежит целиком на дизайнере. Есть сайты, для которых такая сетка будет хорошим решением, есть сайты, которые имеют в основе совсем другую структурную модель.
Во-вторых, 960gs и подобные фреймворки — не Золотой Молот (и в статье про это ни слова, кстати), это просто еще один компромисс между множеством факторов в работе дизайнера и верстальщика. Отнеситесь к 960 объективно, как еще одному инструменту, а не как на грязное посягательство на чистый и творческий-творческий труд дизайнера.
Кстати, споры об инструментах разработки одни из самых бессмысленных, это как спор о том, что лучше, отвертка или молоток.
Во-первых, в статье нет ни слова об агитации за использования таких фреймворков, этот выбор лежит целиком на дизайнере. Есть сайты, для которых такая сетка будет хорошим решением, есть сайты, которые имеют в основе совсем другую структурную модель.
Во-вторых, 960gs и подобные фреймворки — не Золотой Молот (и в статье про это ни слова, кстати), это просто еще один компромисс между множеством факторов в работе дизайнера и верстальщика. Отнеситесь к 960 объективно, как еще одному инструменту, а не как на грязное посягательство на чистый и творческий-творческий труд дизайнера.
Кстати, споры об инструментах разработки одни из самых бессмысленных, это как спор о том, что лучше, отвертка или молоток.
все мы по по себе знаем, что некомпетентные люди неспособны правильно выбрать инструмент и доверяются подобным постам.
Они действительно выглядят профессионально (и fw 960 и описание методики), в итоге человек может выбрать его себе и даже не понимать. что оно того не стоило. Данный пост написан про одну сторону монеты, хорошо. что есть те, кто говорит и об острых углах, это правильно, минусы, имхо, нужно сразу же демонстрировать, а не скромно замалчивать. Ну ведь неидеален же, далеко не идеален фреймворк, если не понимаешь, чем грозит его использование — кончится дело головняком.
Они действительно выглядят профессионально (и fw 960 и описание методики), в итоге человек может выбрать его себе и даже не понимать. что оно того не стоило. Данный пост написан про одну сторону монеты, хорошо. что есть те, кто говорит и об острых углах, это правильно, минусы, имхо, нужно сразу же демонстрировать, а не скромно замалчивать. Ну ведь неидеален же, далеко не идеален фреймворк, если не понимаешь, чем грозит его использование — кончится дело головняком.
знаете я давно искал такую статью, спасибо! в избранные
> по адресу www.spry-soft.com/grids/ расположен чудесный генератор модульных сеток на основе 960gs, который, в том числе, умеет делать резиновые модульные сетки (!)
Там можно генерировать либо фиксированную, либо резиновую, а есть способ сделать сетку с шириной >=960? Т.е. если больше, то тянется, иначе фиксированный размер.
Там можно генерировать либо фиксированную, либо резиновую, а есть способ сделать сетку с шириной >=960? Т.е. если больше, то тянется, иначе фиксированный размер.
не впервый раз вижу статьи про css-фреймворки и модульные сетки, но до сих пор так и не понял: Зачем?
Верстаю постоянно, основа — свои наработки.
Объясните мне, серому человеку! пжлста!
Верстаю постоянно, основа — свои наработки.
Объясните мне, серому человеку! пжлста!
Довольно давно уже пользуюсь этой вещой. Вполне удобно, доволен :) Про «Alpha и Omega» не знал — спасибо
Пользуюсь год этой штукой — полностью на нее пересел. По крайней мере помогает саму сетку набросать.
Очень удобно.
Очень удобно.
Правда помогает?
Я вот, несмотря на большой объём верстки, пользуюсь только reset.css и файлом хтмл с доктайпом и главными тегами.
Я вот, несмотря на большой объём верстки, пользуюсь только reset.css и файлом хтмл с доктайпом и главными тегами.
Чтобы показать сетку в бекграунде достаточно добавить родной класc show-grid:
В зависимости от выбранного числа колонок отобразится та или иная сетка
<div class="container_12 show-grid">
В зависимости от выбранного числа колонок отобразится та или иная сетка
Ощибка в примере про alpha / omega. Есть блок альфа, омеги — нет.
"
этих фреймворком
Следоватльно
для того, что бы
Что бы понять
Ячейка (grid), всегда
а так же более
код заметили
что бы избежать
на download вы
так же кучу
"
«я сама программист» — сомневаюсь. Если человек ленится прочитать, хоть раз, что он написал, не затрудняет себя знанием языка, на котором пишет, значит, он — прирожденный копипастер.
И не уважает читающих.
этих фреймворком
Следоватльно
для того, что бы
Что бы понять
Ячейка (grid), всегда
а так же более
код заметили
что бы избежать
на download вы
так же кучу
"
«я сама программист» — сомневаюсь. Если человек ленится прочитать, хоть раз, что он написал, не затрудняет себя знанием языка, на котором пишет, значит, он — прирожденный копипастер.
И не уважает читающих.
Статья весьма интересная и информативная ) Жаль что мой провайдер закрыл pastie.org/ и поэтому не видать скриншотов
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Все о 960gs — отличном css-фреймворке для построения модульных сеток