Переход с 960 Grid на ZURB Foundation


Оглавление (нажмите, чтобы открыть):

Как увеличить ширину строки в zurb Foundation?

Эй, ребята, я новичок здесь. Я изучаю базу Zurb, и мой вопрос заключается в том, как я могу увеличить ширину по умолчанию строки в структуре. как сетка 960 имеет 960 px. как я могу увеличить желание строки до 1200 пикселей, так что Следует ли добавить пользовательскую таблицу стилей? пожалуйста, помогите, спасибо.

4 ответа

Вам не нужно использовать !important . Просто разместите свой новый CSS-say app.css — ниже foundation.css и используйте следующее:

Вы также можете использовать другой класс и добавить это свойство, чтобы оно не противоречило строке по умолчанию.

3 Danish [2015-12-01 16:41:00]

Лучше всего перейти в файл _settings.scss фонда в вашем проекте, проверить онлайн, если у вас нет файла _settings.css или если вы не знаете его местоположение, пожалуйста. просто откройте и найдите это

и это верхнее значение будет генерировать ширину строки, например, ниже значения i.e 61.25rem.

но теперь, если вы измените эту ширину строки с 980 на что-то вроде 1280, как показано ниже,

то вы можете увидеть ниже, что мой css генерируется автоматически с помощью новой max-width

будьте осторожны с этими настройками, потому что вы можете существенно изменить внешний вид и расположение всего сайта.

3 am_ [2013-11-11 16:31:00]

Отмените свойство max-width вашего .row класса и установите его в нужную вам ширину.

Если вы используете SASS, найдите переменные сетки в документации, где вы найдете информацию о том, как изменить ширину строки, ширину желоба и т.д.

Фонд 6 вводит класс .expanded , чтобы сделать ширину жидкости: http://foundation.zurb.com/sites/docs/grid.html#fluid-row

По-прежнему возникают проблемы с заполнением, хотя и не знаю, как это исправить.

Руководство по CSS Gr > July 03, 2014

Большинство современных веб-сайтов используют CSS-сетку для визуальной организации контента в строки и столбцы.

И почти любой из современных front-end фреймворков имеют в своем составе полноценную систему CSS-сеток. Если читатель немного знаком с фреймворками, то система CSS-сеток в Zurb Foundation 5 должна почти полностью отвечать его потребностям. В пользу изучения CSS-сеток в фреймворке можно сказать, что она значительно снижает объем кода, который бы иначе потребовалось написать вручную.

Первым шагом при создании разметки под Foundation нужно скачать файл архива данного фреймворка и включить его в свой собственный проект. Если вы новичек в этом деле, то я рекомендую вам Getting Started With Foundation CSS; однако, помимо этого вы можете пойти по пути Getting Started With Sass или же Applications.

Основы CSS-сетки Foundation

Фреймворк Foundation создает на HTML-странице строки и столбцы с помощью соответствующих CSS-классов, которые применяются к HTML-элементам. Идея сама по себе проста, однако стоит обратить внимание на тот факт, Foundation прежде всего является адаптивным фреймворком, который ориентирован на мобильные устройства в первую очередь. Это означает, что Foundation был создан для работы на мобильных устройствах, планшетах и на устройствах большего размера, таких как ноутбуки и десктопы — именно в таком порядке.

При создании веб-сайтов под фреймворком Foundation наиболее правильным будет подход, ориентированный на мобильные устройства, в первую очередь. И только потом нужно плавно дорабатывать дизайн сайта так, чтобы он также хорошо смотрелся на на десктопных размерах устройств. Это может показаться нелогичным, но это наиболее правильный подход при работе с Foundation. Многоколоночная разметка плохо работает на мобильных браузерах, потому что мобильные устройства, как правило, имеют экран, у которого высота больше, чем ширина. Впихивание большой разметки в маленький экран — задача гораздо более трудная, нежели создание простой разметки под мобильный экран; а затем постепенное усложенение разметки под большие мониторы.

Шаблон CSS-сетки

Прежде чем описывать CSS-классы для создания сетки, я бы хотел показать вам HTML-шаблон на сайте Zurb:

CSS-сетка в фреймворке Foundation состоит из 12 колонок. По горизонтали страница разбивается на строки (row). Таким образом, колонки помещаются внутрь каждой из строк. Каждая группа колонок внутри строки row в сумме составляет 12, однако существуют дополнительные возможности для того, чтобы обойти это правило.

В приведенном выше HTML-шаблоне секция заголовка является строкой. Внутри этой строки помещен блок div для логотипа и блок div для навигации. Блок-логотип имеет класс , что означает, что данный блок должен в сумме занимать три колонки по ширине. Блок навигации имеет класс , что заставляет этот блок в сумме занимать ширину девяти колонок. Оба класса и в сумме составляют 12 колонок (3 + 9 = 12) и полностью занимают всю ширину блока .

Следующее, большое изображение по центру страницы также является строкой row, внутри которой расположена одна единственная колонка. Эта колонка имеет класс , чтобы занимать ширину всех 12 колонок CSS-сетки в целом. Остальная часть этой страницы-примера построена по такому же принципу, используя строки и колонки . на картинке ниже мною были добавлены оранжевые границы к блокам-колонкам для того, чтобы визуально облегчить понимание того, как была построена эта страница:

Если взглянуть на исходный код данной страницы-примера, то можно увидеть достаточно много кода, большая часть из которого не имеет отношения к созданию CSS-сетки на этой странице. Мною специально было произведено упрощение кода данного шаблона, чтобы оставить только те классы и элементы, которые создают CSS-сетку этой страницы. Изучите представленный мною ниже код с тем, чтобы затем перейти к более детальному описанию каждого из CSS-классов:

Классы CSS-сетки Foundation

Существует пять основных классов CSS-сетки, которые следует запомнить при работе в фреймворке Foundation 5:

  • — класс служит контейнером для вертикальных блоков-колонок; ни для каких других целей он не предназначен. При добавлении контента в HTML-страницу каждая новая строка занимает всю ее ширину. Например, такие блоки, как “шапка” сайта и его “подвал” обязаны иметь класс с вложенными в него колонками.
  • — внутри каждой строки любому HTML-элементу можно добавить класс для того, чтобы он смог занимать определенную часть от общей ширины в 12 колонок. Для удобства, можно использовать как класс , так и класс — результат будет одинаковым. Каждый элемент, которому присвоен класс или обязан иметь еще один класс, который определяет ширину этого элемента.
  • — фреймворк Foundation имеет в своем составе несколько CSS-классов, которые устанавливают адаптивную ширину колонки; каждый из таких классов имеет число, обозначающее, сколько именно колонок следует занимать для данного класса. Например, элемент с классом будет занимать ширину четырех колонок. Если не указан никакой другой адаптивный размер, такой как или , то указанные в этом классе CSS-правила унаследуются и для больших размеров экранов.
  • — этот класс впервые был введен в Foundation 5 и он предназначен для экранов планшетных компьютеров. Если в коде HTML-элемент имеет как класс , так и класс , то маленькие размеры колонок будут использоваться для показа на мобильных устройствах; средние размеры колонок будут использоваться на экранах планшетных компьютеров и десктопных также. Например, у вас в коде HTML-элемент может иметь одновременно класс и класс , если необходимо, чтобы этот элемент занимал ширину четырех колонок на экране мобильного телефона, но увеличивал свой размер до восьми колонок на экране планшетного компьютера.
  • — как вы уже могли догадаться, класс предназначен для создания колонок под экраны ноутбуков или десктопов. Однако, если для HTML-элемента будет задан только один класс для больших мониторов, без указания классов для средних и маленьких размеров экранов, то в результате разметка будет изменять свой вид и превращаться в одноколоночную при изменении размеров экрана. Это очень полезно в том случае, если разметка является многоколоночной для десктопного монитора, а для планшетного или мобильного — одноколоночной. В рассмотренном выше шаблоне-примере вы могли заметить, что все HTML-элементы имеют только один класс ; этот шаблон превращается в одноколоночный при меньший размерах экрана, потому что для элементов не заданы классы и .

Рассказанное выше звучит довольно запутанно, но на самом деле все просто. Если необходимо создать двухколоночную разметку сайта, которая будет превращаться в одноколоночную на экранах мобильных телефонов, необходимо поступить таким образом:

Представленная выше разметка создана для больших мониторов и имеет ассиметричную ширину (один блок шире другого). Для средних и маленьких экранов нужно создать ширину, занимающую ровно половину экрана (оба блока имеют равную ширину). Для этого каждому элементу нужно добавить класс :

Именно класс заставляет оба блока быть равными по ширине. Эти классы переопределяют значения классов и .

Дополнительные возможности CSS-сетки

Как и следовало ожидать, у CSS-сетки фреймворка Foundation имеется гораздо больше возможностей, чем было описано выше. Данная статья имеет целью описать только ее основные возможности, но если вы хотите узнать больше, почитайте эту документацию — [Getting Started][8].

Вложенность в CSS-сетке

В CSS-сетке фреймворка Foundation имеется возможность вкладывать строки внутрь колонок. Такой прием называется “вложенность” и с ним нужно быть достаточно осторожным на практике, так как можно легко запутаться при написании кода:

Центрирование колонок в Foundation

В некоторых случаях может потребоваться создать HTML-элемент, который не должен занимать все 12 колонок сетки, но, тем не менее, этот элемент должен располагаться точно по центру. К примеру, может потребоваться добавить в “подвал” сайта изображение, которое по ширине немного уже, чем весь элемент в целом. Класс поместит маленький элемент точно по центру внутри его строки-контейнера. Если необходимо, чтобы элемент располагался по центру только для больших экранов, то к нему необходимо применить класс :

Смещение в CSS-сетке Foundation

Аналогично ситуации с центрированием колонок в CSS-сетке фреймворка Foundation, возможна ситуация, когда необходимо создать HTML-элемент небольшого размера, который не должен занимать всю ширину своего блока-родителя, но должен быть смещен таким образом, чтобы иметь некоторое пространство слева от себя. И при этом занимать всю оставшуюся ширину блока-родителя.

В этих случаях можно использовать классы смещения (offset), например, такой — . Такой класс заставит элемент сместиться вправо на указанную ширину. Также, как и с классами колонок, здесь есть варианты смешения для маленьких экранов ( ), средних экранов ( ), маленьких экранов ( ):

Незавершенные строки в Foundation

Возможность смещения колонок в Foundation — это прекрасная вещь. Но что, если необходимо оставить пустое пространство справа элемента, а не слева? Вообще-то, в случае, когда сумма всех столбцов в строке не равняется 12, фреймворк Foundation перемещает последующий элемент право так, чтобы заполнить пустое пространство.

Такой подход позволяет решить некоторые проблемы, связанные с кросс-браузерностью, но если необходимо отменить такое поведение фреймворка, то просто добавьте класс к последнему элементу, чтобы заставить его смещаться влево ( ):

Порядок следования

При создании HTML-страниц с помощью строк row и колонок columns имеется уникальная возможность расположить элементы внутри этих страниц совсем не в том порядке, в каком они располагаются в браузере. Например, у вас имеется двухколоночная HTML-разметка, в которой есть левый боковой блок и блок с основным содержимым.

Исходя из вопросов удобства пользованием сайтом и аспектов SEO, необходимо сделать так, чтобы блок с основным содержимым размещался первым в HTML-странице; но при этом в окне браузера визуально боковой блок должен находиться перед блоком с контентом.

Два блока могут поменяться своими местами друг с другом используя такую возможность в фреймворке Foundation. Используя классы типа и можно изменить местоположение элементов (или группы элементов):


И еще …

Данная статья является всего лишь введением в систему CSS-сеток фреймворка Foundation; но в нем есть еще много тем для изучения, таких как стилизация форм, модули и типографика. Обо всем этом вы можете почитать в главе Getting Started.

На этом перевод окончен. Оригинал статьи размещен здесь — The Beginner’s Guide to Grids with Zurb Foundation 5.

RxJs — map

Первый «серьезный» метод в моей RxJs-копилке знаний. На самом деле все просто — этот метод получает на вход поток, обрабатывает каждый ev. … Continue reading

Zurb Foundation 6 XY Gr > Вопрос задан: 1 год назад Последняя активность: 1 год назад

Я использую ZURB foundation 6 с сеткой XY и столкнулся с небольшой проблемой, и, скорее всего, я что-то не так делаю.

Я хочу центрировать элементы по вертикали, поэтому я использую

И с помощью jQuery я установил высоту flex-контейнера с помощью windowHeight = $(window).innerHeight();

Вуаля элементы выровнены по вертикали. Однако из этого вытекают две проблемы:

  1. small-6 cell имеет ширину 50%, которая не соблюдается, и уменьшается до приблизительной длины текста.
  2. flex-container в отличие от grid-container не имеет ширины или отступов.

Чтобы решить эту проблему, я добавил немного CSS:

Поэтому, пока я исправляю проблему, я не могу не думать о том, что должен быть более простой способ — использовать только классы. Кажется странным, что grid-container настроен для этого, а flex-container — нет.

1 ответ

Возможно, для Вашего проекта будут необходимы бесплатные векторные карты. На нашем сайте представлены карты для всех стран.

Основная проблема здесь в том, что с flex-container , grid-x элемент, будучи собственным контейнером flex, также станет элементом строки flex, имеющим значение по умолчанию flex стоимость предмета 0 1 auto .

Это означает, что grid-x не будет расти шире, чем его содержание, следовательно width: 50% не будет работать на своих детей ( small-6 ), так как их родитель не имеет установленной ширины.

Добавив, например, flex-child-grow или же cell к grid-x элемент, он будет заполнять ширину своего родителя, и внутренние flex-элементы начнут вести себя как положено

Примечание 1: с grid-container это не нужно, так как это не гибкий контейнер, где grid-x это нормально div , отображается как flex , который, как block элемент по умолчанию принимает полную ширину его родителя.

Примечание 2: оба flex-container а также grid-container имеет ширину по умолчанию 100%, это grid-x , будучи гибким элементом, это приводит к тому, что проблема не принимает ширину родительского элемента по умолчанию.

Очередной блог фрилансера

коротко и полезно о веб-разработке

Создание прототипа с помощью CSS-фреймворка Grid 960

Grid 960 — это CSS Фреймворк, который позволяет разработчикам быстро конструировать прототипы дизайна. Они являются замечательным инструментом для создания макетов. Почему? Потому что они делают за вас всю тяжелую работу, позволяя получить быстрые результаты.

Звучит отлично, но как это делается? В интернете есть большое количество статей, агитирующих за и против использования CSS-фреймворков, но нет ничего в помощь неопытным читателям. Поэтому в сегодняшней статье мы рассмотрим процесс создания прототипа. Как обычно, можете сразу взглянуть на результат.

Представьте, что вы получили дизайн, и вам нужно сверстать его для клиента. Из этой статьи вы познакомитесь с основами Grid, проектированием сетки дизайна и кодированием прототипа. Мы будем использовать довольно простой дизайн, использующий большинство возможностей Grid 960, который поможет вам получить основную базу знаний для дальнейшей работы. После того, как вы ознакомитесь с представленным ниже дизайном, давайте начнем изучение принципов работы Grid 960.

Создание Сетки

Grid 960 работает на основе наследования классов. Этот фреймворк предоставляет две сетки: 12 и 16 колонок. Основной контейнер всегда имеет ширину 960px. Использование числа 960 позволяет применять большинство различных комбинаций колонок, без усложнения работы с ними. Для верстки этого дизайна, мы будем использовать сетку из 12-ти колонок, но мы не будем использовать все 12 колонок. Каждой ячейке сетки назначено свойство margin: 0 10px. Это создает промежуток в 20 пикселей. При создании строки, сумма ширины всех элементов добавляется к 960. Взгляните на демонстрационную страницу Grid 960. Вы увидите сетку со всеми видами комбинаций. Каждая ячейка сетки имеет класс, который определяет, какой она будет ширины. Далее представлена разбивка ширины столбцов для 12-ти колоночной сетки:

Каждая ширина соответствует имени класса, оформленного в виде: grid_X, где X это порядковый номер из представленного выше списка. Если вам нужен блок, шириной 940px, используйте класс grid_12. Откуда же Grid 960 знает, какая должна использоваться ширина? Каждый grid_X представляет собой селектор container_Y .grid_X, где значение Y равно 12 либо 16 колонок.

Давайте немного рассмотрим сам код. Вот как можно создать сетку из двух строк в 12-ти колоночном контейнере. Здесь первая строка шириной 940 пикселей, и вторая строка содержит две одинаковых колонки.

Когда вы создаете строку в сетке, убедитесь, что все дочерние номера gird_X в сумме дают число колонок, которое вы используете. Это гарантирует правильную ширину. Два дива с классом grid_6, дают в сумме 12. Вы не ограничены только этими значениями, и также можете использовать 6, 4 и 2. Вот и все, сетка готова для контента. Теперь, после того как вы узнали как работает Grid 960, давайте посмотрим как создается макет.

Мастер Йода рекомендует:  Оператор AT&T анонсировал запуск сети 5G в 2 городах США

Макет

Визуализировать сетку дизайна довольно легко. Будет одна строка для картинки заголовка, строка для навигации, строка с двумя колонками для статьи заголовка и постера, разделитель, 4 колонки, затем подвал, состоящий из трех колонок.

После визуализации, вы должны понимать, как создать сетку макета. Используя значения ширины в имени класса, из приведенного списка, давайте вместе составим код. Помните, что необходимо добавлять очищающий div в конце каждой строки. Не забудьте включить CSS-файлы, входящие в состав Grid 960.

Скелет готов. Пришло время накладывать дизайн. Зеленые панели – это просто блоки с фоновым цветом и высотой. У панели навигации высота не задана. Вместо этого, она будет контролироваться размером внутренних ссылок. Не забудьте добавить картинку заголовка.

Применение классов для корректировки блоков grid_12 и установка ID

Центральным колонкам не требуются никакие эффекты. Добавим немного текста для заполнения дизайна. Прежде, чем приступать к верхней части, взглянем на подвал. На скриншоте подвал однородного цвета. У вас не получится реализовать это с существующим кодом. Оборачивающий div, вокруг этих трех колонок решит проблему. Вы думаете, ничего страшного, просто нужно вставить div. Но этот див поломает сетку, поскольку Grid 960 основывается на родительских и дочерних элементах, при использовании стилей (вспомните селектор container_12 .grid_4 ). В данном случае, проблему поможет решить вложенная сетка, которую Grid 960 позволяет использовать. Создайте вложенную сетку, путем добавления блока grid_12, затем расположите внутри блоки grid_4. При использовании вложенных сеток, дочерние элементы должны иметь специальные классы. Первый дочерний элемент должен иметь класс «alpha», а последний дочерний блок – класс «omega». Отредактируйте разметку для внесения необходимых изменений для подвала.

Прекрасно! Теперь у подвала есть заливка однородным цветом, и вы можете указать размеры колонок, если это необходимо. Добавим немного текста для колонок подвала и перейдем к панели навигации. Навигация выполнена в виде простого маркированного списка Добавим немного ссылок и соответствующих стилей.

Замечательно. Страница скоро будет готова. Все что нам нужно сделать, это создать эффекты блока в верхней секции. Это не так просто, как кажется. Прежде чем мы начнем, вы должны кое-что понять о Grid 960 и CSS-фреймворках в целом.

CSS-фреймворки не решат всех ваших проблем

Внимательные читатели, наверное, уже заметили кое-что. В нашей странице абсолютно отсутствует гибкость. Всем элементам заданы определенные размеры, и изменение этих размеров может повлечь за собой проблемы или даже развалить весь дизайн в целом. Кроме того, в связи с ограничением Grid 960, дизайнеры не могут использовать некоторые из своих идей.

Например, если бы этот же дизайн был шириной в 1000 пикселей. Grid 960 создает сетку шириной 960 пикселей, так что макеты большего размера уже использовать нельзя. Что если вы захотите расширить макет до 1000 пикселей, вместо 960-ти? Можно с уверенностью сказать, что вы не сможете это сделать без реализации нескольких сложных изменений кода.

Фреймворк ограничивает дизайнеров набором жестких правил. Скажем, клиент хочет дизайн шире или уже 960-ти пикселей. Дизайнеру будет проще создать код с нуля, для реализации новых задач, чем использовать ранее созданный.

Есть и другая, еще не выявленная, проблема – колонки одинаковой высоты. Поскольку центральные колонки имеют одинаковый фоновый цвет, они выглядят одинаковыми по высоте. В подвале, содержащий блок, устанавливает одинаковый фоновый цвет, позади трех колонок. Grid 960 не поможет вам в создании одинаковых по высоте колонок. Существуют, конечно, способы реализовать это самостоятельно, но поскольку мы просто создаем прототип дизайна, то не будем тратить время на решение мелких проблем в дальнейшем функционировании сайта. На данном этапе, вам нужно понять саму идею.

Есть еще один аспект Grid 960, который следует принять во внимание, прежде, чем мы перейдем к верхней секции. Grid 960 основывается на размерах элементов и отступов, при создании строки правильного размера. Если вы используете рамку или внутренний отступ (padding), макет сломается. Следовательно, если вам нужно их использовать, вы должны предусмотреть это в размере блока, для отражения изменений. Это очень утомительно. Указание размеров элементов в двух местах, всегда будет приводить к путанице, к тому же макет будет гораздо сложнее в обслуживании. Вот и все. Давайте закончим верхнюю секцию.

Верхняя секция

К счастью, вы можете манипулировать колонками одинаковой высоты в верхней секции. Поскольку картинке справа назначена ширина и высота, нам известен размер другой колонки. Создадим эффект блока, с помощью добавления нового дива с рамкой, внутри существующих дивов. Не забудьте указать размеры. Не назначайте padding дивам, потому что это изменит ширину блоков и сломает сетку. Вместо этого, укажите margin дочерним элементам. Это не изменит ширину родительских блоков. Применим margin к строчным элементам. Это создаст желаемый эффект и текст будет отступать от края.

Используйте классы, вместо ID, потому что класс topSection применяется к обоим блокам. Это к тому же, упрощает изменение высоты. Выберите значение высоты, и создайте класс.

Отлично! Давайте посмотрим на нашу работу.

Приступаем к наполнению контентом. Заполните левый блок небольшим количеством текста. Только не увлекайтесь, если текста будет слишком много, он вылезет за край блока. Это создает потенциальную проблему в макете. Как вы узнаете, какое количество текста будет слишком большим? В производственном дизайне, для предотвращения этой проблемы, дизайнеру пришлось бы создать функцию, выводящую определенное количество слов.


Теперь, давайте вставим картинку. Только, прежде чем ее вставлять, укажите размеры. Если вы нормальный математик и понимаете боксовую модель, вы, скорее всего, уже знаете, какого размера она должна быть. Если не знаете, запустите Firebug и взгляните на DOM. Включите кнопку Inspect и кликните по блоку, в котором будет размещаться картинка. Откройте вкладку Layout. Firebug отобразит боксовую модель выделенного вами блока.

Скриншот показывает размер картинки 360 x 280. Найдите картинку, и создайте стиль. Я решил позволить картинке целиком заполнить весь блок. Если вы хотите создать 10-ти пиксельные отступы, убедитесь в том, что уменьшили размеры по 20 пикселей с каждой стороны.

У вас должно было получиться следующее. Можете смело менять текст или картинку.

Помните об ограничениях

Теперь, когда прототип готов, давайте подведем итоги проделанной работы. Вы научились быстро создавать прототипы дизайна. Grid 960 легко создает сетку для нас. И что же дальше? Естественно, нужно показать клиенту, и послушать, что он скажет. Хотя, есть несколько предостережений. Тестировался ли дизайн в IE6 и IE7? Нет. Нужно ли это делать? Нет. Это только прототип. Конечно же, все особенности браузеров будут учтены, до производства.

А что если клиенты захотят создать более комплексный дизайн? В таком случае, вы быстро обнаружите ограничения фреймворка. Что если дизайн должен быть резиновым или эластичным? Фреймворк не сможет вам в этом помочь, поэтому вам придется делать все с нуля. Помните, что CSS-фреймворки не решат все ваши проблемы, но они могут помочь с некоторыми. Grid 960 также как и другие фреймворки, замечательно подходит для создания прототипов.

Вы, конечно, можете использовать концепцию Grid 960, в дальнейшей разработке кода, но фреймворки не рекомендуется полностью использовать в своих проектах. Помните, что CSS-фреймворки, также как и любой другой инструмент, имеют своих поклонников.

Перевод статьи «Prototyping With The Grid 960 CSS Framework«, автор Adam Hawkins

Рассказать друзьям

Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

Верстаем вместе с 960 Gr >Я помню тот первый раз, когда скачал файлы CSS 960 Grid. Первый вопрос был такой: ну и как с помощью всего этого сверстать страницу. Однако всё оказалось довольно таки просто.

Эта статья предназначена для дизайнеров и веб-разработчиков, которые интересуются сеточными CSS системами.

Сегодня мы сконцентрируем наше внимание на системе 960 Grid. После прочтения данной статьи вам уже не будет составлять никакого труда, чтобы разобраться в других CSS фрэймворках, т.к. все они работают по одному и тому же принципу.

Дизайн основанный на сетке

Перед тем, как перейти к специфике системы 960 Grid, я хочу разъяснить что такое дизайн основанный на сетке. В принципе в этой системе нет ничего нового, т.к. она основана на старом и добром «выравнивании»

Итак, расслабляем мозги и начинаем впитывать информацию. Рассмотрим несколько макетов страниц:

Как вы видите на данном рисунке изображены исключительно прямоугольные фигуры. Вы конечно же узнали в них различные блоки ваших сайтов. Идём дальше.

На данный момент не было цели создать что-то логическое. Перед вами просто набор фигур, расположенных в хаотическом порядке. Как вы можете заметить, хаос тоже обладает какой-то своей красотой. Он присутствует везде, в природе, в искусстве, дизайне.

Фишка заключается в том, что сетка приносит некоторое логическое содержание в этот хаос и ставит всё на свои места. Это кому-то может не понравиться, но сетки очень важны и эффективны для современного дизайна и совсем не загоняют вас в рамки. Вы по прежнему сможете творить всё, что вздумается.

Зачем мне необходима сеточная система?

960 Grid и подобные ей системы, позволяют быстро создать вёрстку основанную на сетке. Данный результат достигается при помощи протестированных на кроссбраузерность пресетов ширины страницы, куда вы помещаете свой код.

До CSS3 было довольно таки геморройно создать множество колонок на своей странице и чтобы они смотрелись одинаково во всех браузерах. Ну и конечно надо было запачкаться в математических расчётах.

К примеру, у вас есть контейнер шириной 1000px и вы хотите разделить его на три колонки. При подсчёте вы выясняли, что вам понадобится 333px на одну колонку. Потом начинались заморочки с отступами, потому что если мы хотели добавить внешний отступ в 10 пикселей, то это значило, что нам надо отнять 20 пикселей у каждой колонки. В итоге у нас получались 3 колонки по 313px что в сумме давало 999px, но никак не 1000px.

А что если вам надо сделать ниже ещё 4 колонки? Всё сначала! Вам надо отнять 80px от ширины родительского контейнера. Остаётся 920px, которые мы делим на 4 колонки шириной 230px.

В конце концов, вы хотите добавить блок меню, который будет занимать 1/4 страницы. Вам надо разделить родительский контейнер на 2: один 250px, другой 750px. Далее опять отнять компенсирующую длину в 40px из-за отступов, и получить колонки шириной 730px и 250px

Вот это морока.

Многие дизайнеры сталкивались с этим. Это конечно не высшая математика, но на всё это уходит время и нервы. Представьте, что к всему вышеперечисленному надо добавить ещё и рамку в 1px (и всё по новой).

Где же тот кто нас спасёт от всего этого сумасшествия? Вот он — Nathan Smith, создатель 960 Grid.

Система 960 Gr >

Данная система — это прекрасное решение для тех, кто не имеет ничего против сайтов шириной 960px.

Почему только 960? Во-первых, т.к. данная ширина позволяется сделать n-ое количество пропорциональных сегментов из которых будет состоять страница. Во-вторых, данная длина «удовлетворяет» подавляющее большинство экранных расширений.

Система 960 Grid может быть представлена нам в 2х начальных вариантах, состоящая из 12 или 16 колонок (Но так же есть и 24 колоночная система — но эт для извращенцев).

В 12 колоночной системе первая ячейка имеет 60px, а все последующие 80.

Так что вы можете делать колонки шириной: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей.

Соответственно в 16 колоночной версии, первая будет составлять 40px, а все последующие 60px.

Это значит, что ширина колонки может быть следующей: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей.

CSS классы

На изображениях представленных выше, вы видите большие и маленькие прямоугольники тёмного цвета, которые представляют собой контейнеры.

Для того, чтобы создать такой контейнер необходимо блоку присвоить соответствующий класс и всё!

Названия данных классов очень просты и говорят сами за себя. Например grid_1 — представляет самую короткую ширину, а grid_12 — самую длинную (в 12 колоночной системе).

Теперь, глядя на этот рисунок вы будете видеть не тёмные прямоугольники, а CSS классы:

Как я уже упомянул ранее названия классов говорят сами за себя. Однако запомните, что в 12 колоночной системе на одну строку не может быть больше 12 одно колоночных элементов и т.д. Так что в какой-то степени считать всё-таки надо будет. Но теперь намного легче). В системе с 16 колонками всё то же самое.

К примеру, если у вас 12 колоночная система и вы хотите создать 3 блока текста, следующие друг за другом, то вам этим трём блокам необходимо задать класс grid_4, что в сумме даст 12 (4+4+4)

Точно такая же логика рассуждения справедлива и к 16 колоночной системе для 4х блоков: 4+4+4+4 = 16.

Теперь внимание: для того, что всё это работало все ваши блоки нужно поместить в один родительский контейнер с классом container_12 или container_16.

Если вы никогда не сталкивались с подобными системами, то я представляю, что сейчас с вами происходит.. Теперь всё можно делать намного легче, быстрее и кроссбраузернее 🙂

Пихай туда, пихай сюда!

Кроме примитивных классов, которые мы только что с вами видели, система 960 Grid поддерживает ещё несколько полезных фичей, таких к примеру, как перемещение колонки вперёд или назад. Соответственно классы будут push и pull.

Примеры вы можете увидеть на изображении, которое находится ниже. Первая часть изображения состоит из четырёх колонок с классом grid_3.

На второй половине изображения вы можете увидеть результат применения классов push_1 и pull_1.

Помните, что вы можете перемещать колонки столько, сколько вам надо (но в пределах сетки). Если вы хотите переместить колонку на 2 ячейки, то вам надо выставить ей класс push_2 и т.д.


Данная система позволяет разместить элементы на странице.

Представьте, что у вас такая же ситуация, какая на рисунке, расположенном ниже. Блок логотипа стоит на первом месте.

Теперь задача: оставить блог с логотипом на первой позиции, но сделать так, чтобы на странице он отображался в центре.

До перемещения:

Для решения задачи нам надо применить следующие классы:

Результаты не заставят себя долго ждать.

После перемещения:

Широкие открытые пространства

Если же вам понадобится создать некоторое открытое пространство между блоками, то тут на помощь к вам придут классы prefix и suffix, которые работают практически как push и pull.

К примеру для того, чтобы оставить 1 колонку пустой после блока используйте класс suffix_1 и prefix_1 для пустой колонки до элемента.

В примере выше, вы видите результат применения класса suffix_3 к первому элементу на странице.

В начало и в конец

Последнее, что вам нужно знать, — это ещё два класса: alpha (первый) и omega (последний), которые должны применяться только если элемент является потомком элемента с одним из вышеперечисленных классов.

Данные классы поставят элементы на соответствующие места — на первое и последнее.

Подытожим:

Всё! Теперь вы эксперт в системе 960 Grid.

Вам следует помнить 5 главных идей:

  1. Используйте для родительского элемента класс container_12 если вы хотите использовать 12-колоночную систему и container_16 если 16 колоночную;
  2. Используйте классы gr >Это ещё не всё! В комплекте с этим замечательным CSS фрэймворком идут так же не менее полезные интернет ресурсы.

Flu >Это специальный сайт, вёрстка которого была сделана с помощью системы 960 Grid. Тут вы убедитесь в том, что на этой системе можно делать страницы любой сложности.

The 1KB CSS Gr >Этот сайт предназначен для тех, кого не устраивают стандартные размеры данной системы и он хочет немного другие. Выставляйте свои опции, сайт сформирует для вас новый файл 960 Grid и пользуйтесь на здоровье!

Variable Gr >То же самое, что и прошлый ресурс, только визуально всё понятнее

Gr >Если вы сомневаетесь в возможностях системы 960 Grid, то советую вам просмотреть галерею сайтов, которые были сделаны на данной системе

Typogr >Ещё один CSS фрэймворк, основанный на 960 Grid, предназначенный для оформления текстов

Tiny Flu >Комбинация ресурса 2 и 3

Последние мысли

Несмотря на всю гибкость данной системы у неё есть некоторые ограничения. Всё это не значит, что всем нам нужно переходить на сеточные системы. Это может помешать творчеству разработчиков. Но если у вас нет особых требований, то целесообразнее использовать такую систему.

Как я уже говорил, помимо данной системы, существуют и другие со своими специфическими особенностями. Мы о них ещё поговорим, а пока я бы хотел узнать ваше мнение обо всём вышеизложенном. Спасибо за внимание!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sixrevisions.com/web_design/the-960-grid-system-made-easy/
Перевел: Станислав Протасевич
Урок создан: 17 Февраля 2011
Просмотров: 78471
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

H Переход с HTML Grid на CSS Grid системы в черновиках

.collapse»>Содержание

Пару месяцев назад меня кто-то спрашивал, могу ли я подсказать что-либо по переходу с классов «.col» в Bootstrap на Susy или Neat. И этот вопрос поставил меня в тупик: я никогда не говорил на эту тему, хотя сам уже очень долго пользуюсь сетками Susy!

В любом случае если вы переходите в другую систему впервые, это довольно ответственный шаг. В этой статье я расскажу вам про процесс перехода, состоящий из 4 этапов.

Перед тем как продолжить, предполагается, что вы уже понимаете, почему решили перейти с HTML Grid (типа Bootstrap, Foundationи любого фреймворка) систем на CSS Grid (Susy, Neat или даже Flexboxс CSS).Если же вы до конца не осознаете, почему решили сделать это, то перед переходом настоятельно советую прочитать эту статью. В ней описаны все плюсы и минусы обеих систем.

Наши четыре этапа:

  1. Определяем шаблоны макета
  2. Придумываем новую разметку и классы
  3. Создаем шаблоны макета в CSS
  4. Заменяем старую разметку на новую

Пройдемся по каждому этапу отдельно.

Этап 1: Определяем шаблоны макета

Шаблон макета – шаблон, в котором задано, как ваш макет будет изменяться на разных разрешениях экрана. Примером шаблона макета может послужить макет «content-sidebar». В данном макете на мобильных устройствах область контента и сайдбар занимают все 12 колонок (предполагается, что вы используете 12-тиколоночную систему). При ширине экрана в 600px контент занимает 9 колонок, а сайдбар 3.

Код этого макета в Bootstrap относительно прост. (Давайте предположим, что col-md триггеры на 600px. Я забыл точные разрешения в Bootstrap).

Еще один пример шаблона макета – трехколоночная сетка. На экранах мобильных устройств каждая ячейка занимает все 12 колонок, а при ширине экрана 600px 4 колонки.


Код трехколоночной сетки в Bootstrap также не отличается сложностью:

Иногда приходится работать с более сложными макетами. К примеру, вы хотите вписать два блока в трехколоночную сетку. При ширине экрана 600px и выше каждый блок должен занимать 6 колонок, а не 4.

В Bootstrap код будет выглядеть примерно так:

На данный момент мы просмотрели 3 шаблона:

  1. «content-sidebar» шаблон
  2. Шаблон трехколоночной сетки
  3. Шаблон трехколоночной функциональной сетки

Теперь ваш черед, определите, какие шаблоны макетов используются у вас в дизайне. После этого необходимо придумать новую разметку и классы для каждого шаблона.

Этап 2: Придумываем новую разметку и классы

Один из плюсов HTML Grid систем в том, что нам не нужно думать о разметке и классах, все уже решено за нас. А при переходе на CSS Grid системы нам приходится в спешном порядке создавать классы типа «.some-class-name» на замену классам типа «.col-md-6».

Это огромная проблема, и множество людей застревают на этом месте. Когда я первый раз работал с CSS Grid системой, я тоже тут застрял.

Сначала я пытался соблюдать семантику. Я использовал классы типа .content и .sidebar где только мог, а также по максимуму пытался удалить все наследование. Ниже представлена моя первоначальная разметка для шаблона content-sidebar:

Если ваш макет довольно прост, а на сайте есть только область контента .content и сайдбар .sidebar, то данная разметка, в принципе, подойдет. Все становится чуть запутаннее при добавлении других типов шаблонов.

К примеру, самая простая разметка для трехколоночной сетки, которую я создал, выглядит следующим образом:

Если соединить две разметки вместе, то можно заметить, что мой первоначальный метод не работает с трехколоночной сеткой и шаблоном content-sidebar.

Лучше добавить контейнер div наподобие класса .row в Bootstrap:

Трюк с добавлением div контейнера означает, что для стилизации его прямых наследников можно использовать псевдокласс nth-child:

А значит, больше не нужно задавать классы дочерним элементам контейнера (такие как .content, .sidebar и .grid-item). Разметка становится еще проще:

Тут можно внести еще одно исправление — .content-sidebar-container слишком долго набирать. Я ленивый разработчик и не люблю много печатать.

Я выбрал имена классов наподобие системы SMACSS. В SMACSS рекомендуется все правила для макета записывать с приставкой .l. Так как мы пишем только классы контейнеров, а эти классы в свою очередь задают шаблоны макета, то мы можем сократить .content-sidebar-container до .l-content-sidebar.

Класс .content-sidebar тоже довольно длинный. По желанию его можно сократить до .l-cs. (Вроде бы, понятный класс, так ведь? Просто не забудьте его задокументировать где-нибудь.

Как вывод данного этапа, рекомендую создавать имена классов наподобие:

  1. Шаблон content-sidebar => .l-cs
  2. Шаблон трехколоночной сетки => .l-g3
  3. Шаблон функциональной трехколоночной сетки => .l-fg3

После того, как вы придумали новую разметку и классы, необходимо создать макеты в CSS.

Этап 3: Создаем шаблоны макета в CSS

Создавать шаблоны макета в CSS вы можете с помощью любого метода: Susy, Neat, Bootstrap Sass, Flexbox и т.д. Самое главное здесь это уметь пользоваться этим методом.

  • В любом из методов вам нужно научиться писать медиа запросы для техники mobile-first и работать со свойством CSS Box Sizing.
  • Для работы с Susy, Neat и Bootstrap Sass вам нужно изучить float.
  • Для работы с Flexbox придется изучить Flexbox.

Список можно продолжать, но смысл вы поняли.

Ниже я покажу вам, что вы можете создать совершенно любой макет с помощью любого из этих методов в CSS. Я создам:

  • .l-cs с помощью обтеканий (в чистом SCSS) и Susy
  • .l-g3 с помощью обтеканий (в чистом SCSS) и Susy
  • .l-fg с помощью Flexbox

Сначала разберем .l-cs.

Как создать макет .l-cs с помощью обычного SCSS

Мы уже знаем, как с помощью предложенной мной разметки создавать макеты – использовать псевдокласс nth-child. Также стоит воспользоваться селектором прямого наследования (>), чтобы исключить случайный выбор других div’ов в макете.

Мы знаем, что div’ы по умолчанию занимают 100% ширины. Это означает, что для создания шаблона макета для маленьких экранов нам стили писать вообще не нужно.

С шириной экрана в 600px мы будем использовать float, чтобы область контента занимала 9 колонок из 12, а сайдбар — оставшиеся 3. При работе с float-ами всем div’ам в макете необходимо указать свойства width и float. Код будет следующий:

И еще одно. Чтобы контейнер не схлопнулся при работе с float, ему необходимо добавить clearfix:

Вот и все! Не сложно, правда?

Один минус здесь – вычисление width для области контента и сайдбара. Большинство CSS Grid библиотек типа Susy и Neat стараются избавиться от этой головной боли.

Если работать в Susy, то код выше можно упростить, добавив миксин span(), который автоматически создает нужные свойства:

Со Susy все гораздо проще, правда?

Как создать макет .l-g3 с помощью Susy

Для создания трехколоночной сетки применяется та же техника: псевдокласс nth-child и селектор прямого наследования >.

Тут вам придется выучить все значения псевдокласса nth-child. На сайте CSS Tricks есть nth-tester, с помощью которого можно наглядно изучить данный псевдокласс.

Так как мы создаем трехколоночную сетку с помощью обтеканий, то первым делом нам необходимо добавить clearfix.

Как мы уже говорили выше, div по умолчанию занимает 100% ширины. Так что для маленьких экранов нам вообще стили писать не нужно. Также мы помним, что при ширине экрана в 600px необходимо прописать свойства float и width.

Так как колонок более двух, то в данном случае также необходимо добавить свойство margin для элементов сетки.

Довольно страшный код со свойством nth-child. Выглядит сложно, да еще и нужно вычислять точные значения margin и width.

Писать код в Susy намного проще. Вы можете выбрать один из двух миксинов: span() или gallery().

Если вы создаете сетку, я настоятельно рекомендую использовать gallery(), так как он использует технику изоляции для уменьшения субпиксельных ошибок округления. Код с миксином gallery():


Susy сама автоматически генерирует правильные селекторы nth-child и свойства. Милая штуковина!

Рекомендую ознакомиться со Susy – сильно упрощает создание сеток.

Ну а мы продолжим.
.

Как создать макет .l-fg3 с помощью Flexbox

По сравнению с float-ами во Flexbox сетку создать немного сложнее. Для начала давайте рассмотрим разметку, которую я решил использовать для макета .l-fg3.

Первое, что необходимо сделать при работе с Flexbox, это добавить контейнеру свойство flex. Свойству flex-wrap необходимо задать значение wrap, чтобы ячейки сетки могли перескакивать на второй ряд.

Обратите внимание: для упрощения кода я не стал писал вендорные префиксы. Для генерации префиксов используйте autoprefixer, лучший способ.

Прописав эти свойства, вы заметите, что элементы сетки занимают только необходимое для них пространство:

Ячейки сетки занимают только необходимое им пространство.

Это значит, что для мобильного макета нам придется их заставить вручную растягиваться на 100% ширины. Можно:

  • Задать свойство flex-flow: column для .l-fg
  • Или задать свойство flex-basis: 100% всем элементам сетки

Зададим flex-basis: 100%, его легче понять.

Обратите внимание: Чтобы вы видели границы ячеек, я добавил серую рамку в 1px.

С мобильным макетом мы закончили. Теперь создадим функциональную сетку для ширины 600px. Мы знаем, что на одной строке должно быть три элемента, каждый должен занимать ровно треть от размера окна, если нет дополнительных расстояний между элементами сетки. Для этого необходимо изменить значение свойства flex-basis на 33.333%:

Трехколоночная функциональная сетка без margin’ов.

Теперь необходимо добавить отступы между ячеек.

При работе с flexbox отступы придется разделить пополам и размещать их по краям элементов сетки. Если расстояние между элементами равно 20px, то каждой ячейке необходимо задать margin-left и margin-right в 10px.

Но если вы посмотрите на получившийся макет, то вы, возможно, разочаруетесь и еще больше запутаетесь.

Из-за неправильного значения flex-basis макет поплыл.

Макет поплыл из-за того, что margin’ы прибавляются к значениям flex-basis для каждого элемента. Ширина трех элементов становится равной 100%+60px, что больше 100%. Поэтому браузер просто не может не передвинуть третий блок на следующую строку.

Решение проблемы на удивление простое. Нужно всего лишь удалить margin’ы у всех элементов сетки с помощью calc():

И вы получите нормальную трехколоночную сетку (но с фиксированным отступом 20px).

Теперь впишем два блока в 3 ячейки.

Мы знаем, что каждый элемент должен занимать половину ширины строки (минус 20px между ними). По точно такой же формуле мы можем просто изменить свойство flex-basis для первых двух элементов и получим функциональную сетку.

Обычно, вам не будут нужны margin’ы в 10px по всем сторонам сетки. Удалить внешние отступы можно с помощью отрицательного значения margin на контейнере .l-fg3.

После этого вы обнаружите, что появился скролл вправо, а он нам точно не нужен.

Из-за отрицательного margin’а появляется скролл вправо.

Исправить это можно, создав flex контейнер со свойством overflow-x: hidden и поместив в него контейнер .l-fg:

Вот и все! Кто сказал, что во Flexbox тяжело создавать сетки?

Кстати, так как Flexbox – не главная тема статьи, то по созданию сетки с его помощью я пробежался довольно поверхностно. Но надеюсь вам все понятно.

Этап 4: Заменяем старую разметку на новую

Последний этап – это замена старой разметки на новую. На данном этапе следует внимательно проверить, не допустили ли вы ошибок на 3 этапе.

Заключение

В этой статье мы научились переходить с HTML Grid (в большинстве случаев фреймворки, похожие на Bootstrap) на CSS Grid систему, которую сами и написали.

Обобщая все вышесказанное, можно напомнить, что у нас было 4 этапа:

  1. Определение имеющихся шаблонов макета
  2. Создание новой разметки и классов
  3. Создание шаблона макета в CSS
  4. Замена старой разметки на новую

В заключении статьи хотел сообщить, что на днях мы подготовил для Вас мини-курс «Фреймворк Bootstrap – верстаем адаптивно, просто, быстро».

В этом небольшом курсе мы с вами познакомимся с фреймворком Bootstrap, буквально совсем чуть-чуть прикоснувшись к его возможностям. И в качестве примера сверстаем простой макет сайта-портфолио, нарисованный в минималистичном стиле.
Поэтому, если хотите освоить работу с данным фреймворком, то посмотрите уроки по фреймворку bootstrap.

Помогла ли вам эта статья перейти с HTML Gr >

The 960 Grid System Made Easy

The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of implementing complex layouts so easily.

However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became overwhelmed at how complicated the whole thing seemed.

With all this code, how could this be the easy way to create a layout?

This article is for web designers and front-end web developers who are interested in grid-based layout systems but are at a loss on how to decipher them.

We’ll focus specifically on the 960 Grid System, but after reading this guide, you’ll find that most of the other grid systems out there are similar and will make much more sense after you understand a few basic principles.

Grid-Based Design

Before we get into the specifics of the 960 Grid System, let’s briefly discuss grid-based design in general. The idea is certainly not something that originated on the Web. In fact, it stems from one of the oldest and most basic design principles: alignment.

Our brains like to simplify things to make them readily understandable. This is why we try to impose order on things that seem chaotic, like seeing a face in the craters on the moon.

Naturally, the easier it is to impose order, the quicker our brains can identify a pattern and move on. Grids are so organized and orderly that they require almost no interpretation our part.


Consider the two page layouts represented in the image below.

Though both of these images are simply a gathering of rectangles, the layout at the top seems fundamentally better than the one on the bottom. We can instantly recognize a pattern, accept it, and move on.

The image on the bottom, however, is visually unsettling by comparison. There’s no clear pattern, order, or goal–it’s just looks like a random assortment of shapes.

Our eyes have a tendency to frantically search for fractions of a second while we attempt to identify a trend, which increases the time necessary to take in the scene as a whole.

It’s interesting to note that random can still be beautiful. Random definitely has its place in nature, art, and even design, but it’s no way to logically organize information.

The point is that grids are among the simplest and strongest ways to create order on a page. They may seem cold and rigid, but remember that they are both extremely efficient and effective, and can even be quite flexible if you don’t let your imagination get bogged down by the necessary structure.

Why Do I Need a Grid System?

The 960 Grid System–and other tools and systems like it–provide a fast and easy way to create grid-based layouts using CSS. They do this by providing cross-browser-tested and optimized preset column widths for you to set your content into. These grids can help you save on your online marketing budget.

Before CSS3, it wasn’t exactly easy to break up a page into columns without getting into tedious math.

For instance, if you have a 1,000-pixel wide container and you want to split it up into three columns, that’s 333 and 1/3 pixel per column (not exactly a nice whole number). Further, columns broken up like this would crash into each other, so a margin must be added on each side. If we add a 10-pixel margin to each side of every column, we must also subtract that 20 pixels from the width of each column. This gives us 3 columns roughly 313 pixels wide each with a margin of 10 pixels on each side (even then you’re at 999px and not 1,000px).

Want 4 columns in a row below that? Then you have to start the process over and subtract 80px of margin from 1,000px for a total of 920px and divide that by 4 to get a column width of 230px.

Finally, if you want to add a sidebar that’s a third of the total width of the page, you have to create a column that’s 750px for the content and one that is 250px for the sidebar, then subtract 40px of margin to get one 730px column and one 230px column.

Confused yet?

Other web designers were too. It’s not exactly rocket science, but it’s also not something you want to go through again and again for each project that you create.

The solution? Find someone else to figure out all these crazy column widths, throw them into a CSS document, and let you download it free. (That person happens to be Nathan Smith, creator of the 960 Grid System).

The 960 Grid System

The 960 Grid System is simply a way to lay out websites using a grid that is 960 pixels wide.

The reason it’s 960 pixels wide is because the number 960 makes for a lot of clean divisions utilizing whole numbers when factoring in column widths and margins. And it fits nicely on the majority of screens.

The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid (a 24-column version is included as well for those that really need extra control).

In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80 pixels.

So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.

Similarly, in the 16-column version, the narrowest column is 40 pixels wide and each column after that increases by 60 pixels.

So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 and 940.

CSS Classes Now in Session

When you look at the diagrams above, consider each of the dark blue horizontal bars as a CSS class in the 960 Grid System.

To create an object in your layout that is the width of one of those bars, you simply assign the proper class to your div–that’s it!

The classes are conveniently named according to their size with the grid_1 CSS class being the narrowest and grid_12 CSS class being the widest ( grid_16 is the widest in the 16-column version).

So to reuse our image from above, take a look at the available columns now, but this time, think about them using their respective CSS classes instead of pixel widths.

This naming system makes it incredibly easy to hash out complicated layouts in seconds flat. To fill a page’s width, the trick to keep in mind is that the numbers assigned to your selected classes must equal 12 in the 12-column version and 16 in the 16-column version.

For instance, using the 12-column version, if you have 3 divs of text that you want to be displayed side-by-side in a 3-column layout, simply assign the grid_4 >

Similarly, assigning the grid_4 CSS >

To make sure you’re referring to the proper classes, be sure to place your 12-column elements inside a div with the class container_12 and your 16-column classes inside a div with the class called container_16 .

If you’ve never worked with the 96 GS before, I hope you’re having your “aha” moment right now regarding just how easy it is to spec out a layout in no time at all using this system.

Push Me, Pull Me

The 960 Grid System allows you to reposition elements independently by pushing or pulling them horizontally along the page. This is accomplished by using the push and pull CSS classes.

For instance, consider the two examples in the image below. The first example is a basic 4-column layout using only the grid_3 class.

However, in the second version, I’ve pushed the first column and pulled the last column, resulting in their positions jumping over one column from where they would normally lie in the layout.

Keep in mind that you can push items as far as you want. If I had wanted to push an element two columns over, I would’ve implemented the class push_2 , and so on.

The push/pull system has major implications for how you lay out a page in your HTML document.

For instance, in the example below, imagine the website’s name is typed out in a logo and placed as the first element on the page.

As the most important element on the page, you’d like to keep the logo as the first item in your HTML markup, but visually, you actually want it to appear in the center of the page.

Before pushing/pulling:

To visually position the logo element in between the two text columns, you would use the following HTML:

This results in the layout shown in the image below.

After pushing/pulling:

Despite the fact that the logo comes first in our markup, it will be visually positioned in the center of our page.

Wide Open Spaces

You’ll often find that you want to create empty space in a layout (negative space is a good design device). To accomplish this, apply the prefix and suffix classes to your divs. These are implemented very similar to the push and pull classes.

For instance, to leave a blank space that is the width of one column before an element, use prefix_1 class, or after an element using suffix_1 class.

As you can see, the example above uses a suffix _3 class to create an empty space the width of three columns after it.

The Beginning and The End


The final bit of knowledge you’ll need to know is that you are provided with the alpha (“first”) and omega (“last”) classes that must be applied to any grid units that are the children of other grids.

Obviously, the alpha class will be applied to the first child and the omega class to the last child.

Essentially, these classes provide a margin fix so that you can nest grid units inside of other grid units.

Let’s Review

Armed with this newfound knowledge, you should now be a 960 Grid System expert.

To review, there are basically only 5 concepts you need to remember:

  1. Use the container_12 class for the 12-column version and the container_16 for the 16-column version.
  2. Use the classes grid_1 , grid_2 , grid_3 , etc. to set your column widths. If you want to fill a page horizontally, make sure the numbers add up to 12 or 16 (i.e. grid_4 + grid_2 + grid_6 = 12).
  3. Use the push and pull classes to independently position items on the page, regardless of their position in your page’s markup.
  4. Use the prefix and suffix classes to create empty spaces in your layout.
  5. Use the alpha and omega to fix the margins for any nested grid units.

There is also a CSS reset included with the 960 Grid System. This is a completely optional file based on the ever popular Eric Meyer CSS reset. If you like it, keep it. If not, trash it!

960 Grid System Resources

Now that you’re an expert on grid-basedd web design and the 960 Grid System, here are a few tools and resources to check out to further your understanding.

Fluid 960 Grid System

An awesome fluid version of 960 GS! Fluid web layouts readjust the layout to fit the page. This can make for some really complicated code, but using this system means that it will do all the heavy lifting for you.

The 1KB CSS Grid

An extremely lightweight grid system that is basic and easy to understand. It’s highly customizable but defaults to 960px.

Variable Grid System

A simple and flexible CSS grid builder based on the 960 Grid System.

Grid-Based Design Gallery

If you’re skeptical about the 960 Grid System and what grid-based design can offer you as a web designer, check out this design gallery. As you can see, with a little imagination and ingenuity, the possibilities are endless.

Typogridphy

From the site: “Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.”

Tiny Fluid Grid

This is a grid-builder for a fluid version of the 1KB Grid System above.

Off the Grid

Admittedly, even with all the possibilities and flexibility provided by a grid system like 960 GS, you’re still being placed under restrictive confines. No one is suggesting that all websites should be created on a grid–this would definitely lead to a widespread lack of creativity and lack of variation in page layouts. Whether your web designer uses a grid or not is a question you may want to ask before the project starts.

Further, as you experiment with 960 GS, you’ll find that there are numerous ways to break the layout that will force you to rethink your designs.

The 960 Grid System–and others like it–merely provide a strong foundation for the numerous times you’ll find yourself building a site that doesn’t break the mold with innovation, but instead needs to convey information clearly and logically in a way that is familiar to a large number of users. These are great to use for large sites such as one for a college.

Your Thoughts on Grid Systems?

Leave a comment below and let us know what grid system you prefer and if the information above helped you in your quest to decipher the 960 Grid System. What’s good about grid systems? What’s bad about them? Share your thoughts an opinions below.

Related Content

  • A Brief Look at Grid-Based Layouts in Web Design
  • The Evolution of Web Design
  • The Brads – Alignment in Design
  • Related categories: Web Design and Web Development

We’ve driven over 4 million leads for clients in the last five years.

Переход с 960 Grid на ZURB Foundation

We recommend upgrading to the latest Google Chrome or Firefox.

Join GitHub today

GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.

New pull request

Clone with HTTPS

Use Git or checkout with SVN using the web URL.

Downloading .

Want to be notified of new releases in joetann/zurb-960gs ?

Launching GitHub Desktop .

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop .

If nothing happens, download GitHub Desktop and try again.

Launching Xcode .


If nothing happens, download Xcode and try again.

Launching Visual Studio .

Permalink

  • © 2020 GitHub , Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Создаем неповторимый стиль и оформление

Теперь о преимуществах. 1) Время разработки. Оно сокращается и значительно, особенно если у вас есть минимальный опыт работы с фреймворком и вы используете его в подходящей ситуации. Т.е. нужно потратить какое-то время на изучение, но окупается оно очень быстро. 2) Фреймворки содержат «хаки» для наиболее распространенных браузеров. Каждый раз решать одни и те же проблемы с позиционированием элементов в IE очень быстро надоедает 3) Упрощается поддержка. Вам будет легче прочитать свой же код, написанный полгода назад, если вы все время используете одинаковые имена классов.

Дизайн основанный на сетке

Перед тем, как перейти к специфике системы 960 Grid, я хочу разъяснить что такое дизайн основанный на сетке. В принципе в этой системе нет ничего нового, т.к. она основана на старом и добром «выравнивании»

Итак, расслабляем мозги и начинаем впитывать информацию. Рассмотрим несколько макетов страниц:

Как вы видите на данном рисунке изображены исключительно прямоугольные фигуры. Вы конечно же узнали в них различные блоки ваших сайтов. Идём дальше.

На данный момент не было цели создать что-то логическое. Перед вами просто набор фигур, расположенных в хаотическом порядке. Как вы можете заметить, хаос тоже обладает какой-то своей красотой. Он присутствует везде, в природе, в искусстве, дизайне.

Фишка заключается в том, что сетка приносит некоторое логическое содержание в этот хаос и ставит всё на свои места. Это кому-то может не понравиться, но сетки очень важны и эффективны для современного дизайна и совсем не загоняют вас в рамки. Вы по прежнему сможете творить всё, что вздумается.

Зачем мне необходима сеточная система?

960 Grid и подобные ей системы, позволяют быстро создать вёрстку основанную на сетке. Данный результат достигается при помощи протестированных на кроссбраузерность пресетов ширины страницы, куда вы помещаете свой код.

До CSS3 было довольно таки геморройно создать множество колонок на своей страницы и чтобы они смотрелись одинаково во всех браузерах. Ну и конечно надо было запачкаться в математических расчётах.

К примеру, у вас есть контейнер шириной 1000px и вы хотите разделить его на три колонки. При подсчёте вы выясняли, что вам понадобится 333px на одну колонку. Потом начинались заморочки с отступами, потому что если мы хотели добавить внешний отступ в 10 пикселей, то это значило, что нам надо отнять 20 пикселей у каждой колонки. В итоге у нас получались 3 колонки по 313px что в сумме давало 999px, но никак не 1000px.

А что если вам надо сделать ниже ещё 4 колонки? Всё сначала! Вам надо отнять 80px от ширины родительского контейнера. Остаётся 920px, которые мы делим на 4 колонки шириной 230px.

В конце концов, вы хотите добавить блок меню, который будет занимать 1/4 страницы. Вам надо разделить родительский контейнер на 2: один 250px, другой 750px. Далее опять отнять компенсирующую длину в 40px из-за отступов, и получить колонки шириной 730px и 250px
Вот это морока.

Многие дизайнеры сталкивались с этим. Это конечно не высшая математика, но на всё это уходит время и нервы. Представьте, что к всему вышеперечисленному надо добавить ещё и рамку в 1px (и всё по новой).

Где же тот кто нас спасёт от всего этого сумасшествия? Вот он — Nathan Smith, создатель 960 Grid.

Система 960 Grid

Данная система — это прекрасное решение для тех, кто не имеет ничего против сайтов шириной 960px.

Почему только 960? Во-первых, т.к. данная ширина позволяется сделать n-ое количество пропорциональных сегментов из которых будет состоять страница. Во-вторых, данная длина «удовлетворяет» подавляющее большинство экранных расширений.

Система 960 Grid может быть представлена нам в 2х начальных вариантах, состоящая из 12 или 16 колонок (Но так же есть и 24 колоночная система — но эт для извращенцев).

В 12 колоночной системе первая ячейка имеет 60px, а все последующие 80.

Так что вы можете делать колонки шириной: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 и 940 пикселей.

Соответственно в 16 колоночной версии, первая будет составлять 40px, а все последующие 60px.

Это значит, что ширина колонки может быть следующей: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 и 940 пикселей.

CSS классы

На изображениях представленных выше, вы видите большие и маленькие прямоугольники тёмного цвета, которые представляют собой контейнеры.

Для того, чтобы создать такой контейнер необходимо блоку присвоить соответствующий класс и всё!

Названия данных классов очень просты и говорят сами за себя. Например grid_1 — представляет самую короткую ширину, а grid_12 — саму длинную (в 12 колоночной системе).

Теперь, глядя на этот рисунок вы будете видеть не тёмные прямоугольники, а CSS классы:

Как я уже упомянула ранее названия классов говорят сами за себя. Однако запомните, что в 12 колоночной системе на одну строку не может быть больше 12 одно колоночных элементов и т.д. Так что в какой-то степени считать всё-таки надо будет. Но теперь намного легче). В системе с 16 колонками всё то же самое.

К примеру, если у вас 12 колоночная система и вы хотите создать 3 блока текста, следующие друг за другом, то вам этим трём блокам необходимо задать класс grid_4, что в сумме даст 12 (4+4+4)

Точно такая же логика рассуждения справедлива и к 16 колоночной системе для 4х блоков: 4+4+4+4 = 16.

Теперь внимание: для того, что всё это работало все ваши блоки нужно поместить в один родительский контейнер с классом container_12 или container_16.

Если вы никогда не сталкивались с подобными системами, то я представляю, что сейчас с вами происходит.. Теперь всё можно делать намного легче, быстрее и кроссбраузернее 🙂

Пихай туда, пихай сюда!

Кроме примитивных классов, который мы только что с вам видели, система 960 Grid поддерживает ещё несколько полезных фичей, таких к примеру, как перемещение колонки вперёд или назад. Соответственно классы будут push и pull.

Примеры вы можете увидеть на изображении, которое находится ниже. Первая часть изображения состоит из четырёх колонок с классом grid_3.


На второй половине изображения вы можете увидеть результат применения классов push_1 и pull_1.

Помните, что вы можете перемещать колонки столько, сколько вам надо (но в пределах сетки). Если вы хотите переместить колонку на 2 ячейки, то вам надо выставить ей класс push_2 и т.д.

Данная система позволяет разместить элементы на странице.

Представьте, что у вас такая же ситуация, какая на рисунке, расположенном ниже. Блок логотипа стоит на первом месте.

Теперь задача: оставить блог с логотипом на первой позиции, но сделать так, чтобы на странице он отображался в центре.

До перемещения:

Для решения задачи нам надо применить следующие классы:

Результаты не заставят себя долго ждать.
После перемещения:

Широкие открытые пространства

Если же вам понадобится создать некоторое открытое пространство между блоками, то тут на помощь к вам придут классы prefix и suffix, которые работают практически как push и pull.

К примеру для того, чтобы оставить 1 колонку пустой после блока используйте класс suffix_1 и prefix_1 для пустой колонки до элемента.

В примере выше, вы видите результат применения класса suffix_3 к первому элементу на странице.

В начало и в конец

Последнее что вам нужно знать это ещё два класса: alpha (первый) и omega (последний), которые должны применться только если элемент является потомком элемента с одним из вышеперечисленных классов.

Данные классы поставят элементы на соответствующие места — на первое и последнее.

Подытожим:

Всё! Теперь вы эксперт в системе 960 Grid.

Вам следует помнить 5 главных идей:
1.Используйте для родительского элемента класс container_12 если вы хотите использовать 12-колоночную систему и container_16 если 16 колоночную;
2.Используйте класса gr > 3.Используйте классы push и pull для того, чтобы двигать колонки влево или вправо;
4.Используйте класса prefix и suffix для создания пустых промежутков между блоками;
5.И наконец используйте класс alpha и omega для перемещения колонки на первую или последнюю позицию;
Ресурсы системы 960 Grid

Последние мысли

Несмотря на всю гибкость данной системы у неё есть некоторые ограничения. Всё это не значит, что всем нам нужно переходить на сеточные системы. Это может помешать творчеству разработчиков. Но если у вас нет особых требований, то целесообразнее использовать такую систему.

Как я уже говорила, помимо данной системы, существуют и другие со своими специфическими особенностями. Мы о них ещё поговорим, а пока я бы хотела узнать ваше мнение обо всём вышеизложенном. Спасибо за внимание!

Делаем адаптивный сайт при помощи Foundation

20 августа 2012 | Опубликовано в Веб-дизайн | 10 Комментариев »

В сети существует множество полезных инструментов для создания адаптивных сайтов, в том числе и готовых шаблонных решений, среди которых Тwitter Bootstrat, 1140 Gr >

Окончательный результат:

Знакомство с Foundation

Фреймворк состоит из демонстрационного HTML-кода, CSS- и JavaScript-файлов, а также дополнительных изображений. У вас есть возможность выбрать один из трeх вариантов: скачать версию со стилями по умолчанию (Default CSS), самостоятельно настроить некоторые стили: структуру сетки, цвета и типографику, размер кнопок и т.д. (Custom css) или установить Foundation SCSS ( Sass+Compass).

Создаем структуру сайта

Модульная сетка фреймворка (12-ти колоночная по умолчанию) позволяет с легкостью создавать адаптивные шаблоны шаблоны страниц для десктопа и мобильных устройств. Если вы знакомы с grid-системами, вы будете чувствовать себя, как дома. Она состоит из двух ключевых элементов: строки и столбцов. Строки создают максимальную ширину и содержат столбцы, которые формируют структуру. Размер столбцов будет изменяться в зависимости от размеров экрана монитора. Мы установили максимальную ширину столбца (.row ) 1000px.

Для начала давайте определимся с «фундаментом». Структура макета нашего блога будет выглядеть приблизительно так:

Добавляем логотип

Хочется отметить, что Foundation имеет хорошую типографику с базовой линией и с ней очень удобно работать. Для начала мы добавим следующий код для нашего логотипа:

Затем создадим новый файл стилей и прикрепим его к html-документу (у нас он называется main.css). Для замены текста картинкой мы будем использовать следующее решение:

Не забудьте указать высоту и ширину логотипа.

Добавляем навигацию

Вы можете использовать готовое решение для вашей навигации. Просто выберите один из нескольких вариантов и вставьте код. Мы будем использовать горизонтальное выпадающее меню:

Обратите внимание на то, что родитель имеет класс .has-flyout . Мы изменили названия разделов и добавили выпадающий список к пятому пункту. Меню для нашего блога будет иметь следующую структуру:

Добавляем слайдер (Orient)

Огромный плюс Zurb Foundation в наличии адаптивного слайдера изображений Orbit, который вы также можете использовать отдельно от фреймворка. Для того, чтобы добавить слайдер, мы включили следующий код в контейнер для контента:

Загрузите нужные изображения и проверьте, правильно ли вы указали к ним путь. Чтобы активировать слайдер, добавьте следующий код внизу html-документа под остальными скриптами:

Добавляем публикации

Наши публикации мы обозначили при помощи тега

Обратите вниманию на ссылку «Подробнее». Ей назначен класс «secondary button», благодаря этому она выглядит как кнопка. Фреймворк имеет много вариантов кнопок, и вы можете выбрать размер, тип и радиус кнопки, добавить группу кнопок и кнопки с выпадающим списком.

Добавляем постраничную навигацию

Теперь давайте добавим постраничную навигацию под статьями. С Foundation это сделать очень легко: просто вставьте следующий код:

Добавляем табы

Теперь начнём работать над сайдбаром. Для начала давайте добавим табы. Согласно документации, сделать это можно так:

Добавляем поиск

Фреймворк имеет несколько готовых решений для адаптивных форм, в том числе и для поисковой панели. Для того, чтобы добавить поиск к шаблону, мы вставили следующий код:

Добавляем видео

Чтобы добавить «резиновое» видео, достаточно выбрать нужный вариант , например:

Добавляем футер

Для того, чтобы вставить футер, мы добавили следующий код:

И в файл .main.css я добавила следующие стили:

Последние штрихи

Затем мы немного изменили задний фон. Замечательный сайт subtlepatterns предлагает множество готовых решений. Мы выбрали заливку Bright Squares и установили ее для бекграунда сайта:

А для столбцов (.row) я установила белый цвет

Вот и всё, наш шаблон готов:

Окончательный результат:

Тестируем

Существует множество сервисов для того, чтобы протестировать для того, чтобы протестировать ваш сайт на различных расширениях экранов, вот некоторые из них:

Фреймворк поддерживается всеми нормальными браузерами.

Заключение

Foundation есть еще много интересных возможностей: вы можете добавлять адаптивные модальные окна (Reveal), адаптивные таблицы, слайд-панели и многое другое. Надеюсь, данный урок вам пригодился. Все свои замечания и пожелания пишите в комментариях.

Добавить комментарий
Type Name Latest commit message Commit time
Failed to load latest commit information.