Сетка

[Spark89]

Здравствуйте, в процессе обучения верстке сделал свою сетку. Но есть одна проблема. Допустим есть макет с сеткой http://bloggingtips.moneyreigninc.netdna-cdn.com/wp-content/uploads/2008/05/website-index.jpg. в header есть логотип и меню, есть 24х колоночная сетка. Между логотипом и меню есть 8 колонок. Вопрос: как сверстать этот пробел? Влепить туда пустой блок 1/8 или сделать margin ?

Edited June 27, 2015 by Spark89

[antonKar]

Эм... Float нынче выходит из моды?

 

А если надо будет добавить пару пунктов меню — перевёрстывать блок с 1/8 на что-то иное или переделывать margin?

Edited June 28, 2015 by antonKar

[Spark89]

Тоесть, Вы предлагаете вместо 3х блоков (лого, пробел, меню) сделать всего 2 блока (лого и меню), а их положение паддингами подвигать?

[sigma77]

1) лого - float: left

меню - float: right

 

2) лого - float: left (8 col)

меню - float: left (16 col); text-align: right;

само меню на инлайн-блоках

 

3) в бутстрапе используются марджины для "пропуска блоков" и все блоки имеют float:left

[Spark89]

Спасибо! Кстати, что посетуете: делать свою сетку или брать с bootstrap?

[sigma77]

bootstrap точно не посоветую ))

делайте свою

[DivMan]

bootstrap точно не посоветую ))

делайте свою

 

bootstrap это плохо? 

[Spark89]

У меня вот такая сетка:

.row, .column{    -webkit-box-sizing: border-box;       -moz-box-sizing: border-box;            box-sizing: border-box;         -o-box-sizing: border-box;        -ms-box-sizing: border-box;}.row:before,.row:after{    display: table;    content: " ";}.row:after { clear: both; }.row { margin-bottom: 1px; }.row:last-child { margin-bottom: 0; }.column{    position: relative;    float: left;}.column-1-1 { width: calc((100% - (1/1 - 1) * 1px) / 1 * 1); } /* 1px это gutter*/.column-1-2 { width: calc((100% - (2/1 - 1) * 1px) / 2 * 1); }.column-1-3 { width: calc((100% - (3/1 - 1) * 1px) / 3 * 1); }.column-1-4 { width: calc((100% - (4/1 - 1) * 1px) / 4 * 1); }.column-1-5 { width: calc((100% - (5/1 - 1) * 1px) / 5 * 1); }.column-1-6 { width: calc((100% - (6/1 - 1) * 1px) / 6 * 1); }.column-1-7 { width: calc((100% - (7/1 - 1) * 1px) / 7 * 1); }.column-1-8 { width: calc((100% - (8/1 - 1) * 1px) / 8 * 1); }.column-1-9 { width: calc((100% - (9/1 - 1) * 1px) / 9 * 1); }.column-1-10 { width: calc((100% - (10/1 - 1) * 1px) / 10 * 1); }.column-1-11 { width: calc((100% - (11/1 - 1) * 1px) / 11 * 1); }.column-1-12 { width: calc((100% - (12/1 - 1) * 1px) / 12 * 1); }.column-2-3 { width: calc((100% - (3/2 - 1) * 1px) / 3 * 2); }.column-3-4 { width: calc((100% - (4/3 - 1) * 1px) / 4 * 3); }.column-4-5 { width: calc((100% - (5/4 - 1) * 1px) / 5 * 4); }.column-5-6 { width: calc((100% - (6/5 - 1) * 1px) / 6 * 5); }.column-6-7 { width: calc((100% - (7/6 - 1) * 1px) / 7 * 6); }.column-7-8 { width: calc((100% - (8/7 - 1) * 1px) / 8 * 7); }.column-8-9 { width: calc((100% - (9/8 - 1) * 1px) / 9 * 8); }.column-9-10 { width: calc((100% - (10/9 - 1) * 1px) / 10 * 9); }.column-10-11 { width: calc((100% - (11/10 - 1) * 1px) / 11 * 10); }.column-11-12 { width: calc((100% - (12/11 - 1) * 1px) / 12 * 11); }.row > [class*='column-']:first-child { margin-left: 0; }.row > [class*='column-']:last-child { margin-right: 0; }.row > [class*='column-'] { margin: 0 0.458px 0 0.458px; } /* 1px/2 */

Edited June 28, 2015 by Spark89

[sigma77]

bootstrap это плохо? 

 

Плохо пихать его где ни попадя. Я еще не встречала дизайнов сделанных нормально под бутстрап.

[DivMan]

 

bootstrap это плохо? 

 

Плохо пихать его где ни попадя. Я еще не встречала дизайнов сделанных нормально под бутстрап.

 

 

Для этого надо в команде работать 

[antonKar]

а их положение паддингами подвигать?

Не понял зачем там padding

 

 

 

Вы предлагаете вместо 3х блоков (лого, пробел, меню)

 

О времена, о нравы. Я думал, что распорки в нынешнее время остались разве что в вёрстке e-mail писем.

Edited June 28, 2015 by antonKar

[Spark89]

 

О времена, о нравы. Я думал, что распорки в нынешнее время остались разве что в вёрстке e-mail писем.

Тоесть gutterов вообще сейчас нет?

[antonKar]

Тоесть gutterов вообще сейчас нет?

О, хоть знать буду как распорка в английской терминологии называется. ИМХО это пережиток табличной вёрстки, когда были проблемы с позиционированием элементов.

[sigma77]

О, хоть знать буду как распорка в английской терминологии называется. ИМХО это пережиток табличной вёрстки, когда были проблемы с позиционированием элементов.

gutter - не распорка.

Распорка - пустой блок, не несущий смысловой нагрузки, нужный только для создания пустого пространства 

gutter - расстояние между колонками.

[Spark89]

Такс, я в очередной раз забрел в тупик. Гляньте мою сетку (пост выше, Сегодня, 10:55 ) что там не так? И киньте, плиз, ссылку на "сегодняшние" сетки.

[sigma77]

Если вам с ней удобно работать, то почему нет.

Мне только не понятно зачем использовать расчеты, когда можно сразу в %% писать?

 

Сетки: бутстрап, susy, purecss, 960 и др. - https://goo.gl/VTcH51

[Sergik+]

Susy лучшая сетка что я видел, нету каши из лишних классов в html, я бы мутил свою сетку на flexbox.

[web-tech]

Susy лучшая сетка что я видел, нету каши из лишних классов в html,

 

обоими руками за, но не все пользуют SASS

[sigma77]

я бы мутил свою сетку на flexbox.

 

ага, тоже думаю на досуге заняться

[afdw]

 

я бы мутил свою сетку на flexbox.

 

ага, тоже думаю на досуге заняться

 

На flexbox, по идеи, сетка вообще не нужна.

А вообще, какой смысл в сетке? Я понял, что не понимаю этого.

Edited June 28, 2015 by afdw

[Spark89]

В общем, беру http://purecss.io/ или http://getskeleton.com/ и начинаю все с нуля. Писать все свое, когда только только начинаешь, это огромная трата времени со спорным результатом в конце.

Edited June 28, 2015 by Spark89

[Spark89]

Взял за основу сетку с bootstrap. Возникло пару вопросов:

 

1. Я беру макет 1100px с отступами по бокам в 20px и воссоздаю его px в px для 1140px.  Дальше согласно bootstrap media queries breakpoints я пилю уменьшенные копии для каждой media queries. В размерностях шрифта используем em, размерности всего остального px. Где я не прав? Разве не % должны править балом в responsive design ? Когда нужно использовать em, rem, px, % ?

 

2. Что делать если ОС рендерит шрифт не так как на макете? Если это не CSS Web Safe Fonts, то @font-face в Windows с большой вероятностью всё зафейлит. Что делать? Google fonts накладно по performancу.

 

3. JS библиотеки (html5shiv, respond) лучше грузить с CDN хостинга или с проекта?

Edited June 30, 2015 by Spark89

[Sergik+]

Взял за основу сетку с bootstrap. Возник ещё один вопрос. Я беру макет 1100px с отступами по бокам в 20px и воссоздаю его px в px для 1140px.  Дальше согласно bootstrap media queries breakpoints я пилю уменьшенные копии для media queries. В размерностях шрифта используем em, размерности всего остального px. Где я не прав? Разве не % должны править балом в responsive design ? Когда нужно использовать em, rem, px, % ?

 

Что делать если ОС рендерит шрифт не так как на макете? Если это не CSS Web Safe Fonts, то @font-face в Windows с большой вероятностью всё зафейлит. Что делать? Google fonts накладно по performancу.

 

JS библиотеки (html5shiv, respond) лучше грузить с CDN хостинга или с проекта?

Не знаю почему но мода на em прошла, кучу конф смотрю со скиловыми веб-разработчиками западными так везде шрифты в px, я всегда использовал пиксели, необходимости в em не вижу.

Какая проблема что шрифты не одинаково рендерятся ?

Я с cdn гружу библиотеки.

[Spark89]

Какая проблема что шрифты не одинаково рендерятся ?

Ем, визуальное несходство? Истерика заказчика?)