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 хостинга или с проекта?

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

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

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

У меня вот такая сетка: .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 */

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

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

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

Если верить этому комментарию из http://www.creativebloq.com/html5/truth-about-structuring-html5-page-9122842#null : то все новые теги это сплошной epic fail и div вечен .

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

А стоит ли добавлять Microdata? ARIA attributes вроде как обязательно.

Хм, немного проясняется. Чтобы закрепить, допустим есть такое: название статьи фотография к статье текст статьи автор статьи комментарии к статье <!DOCTYPE html><html><head></head><body><article> <header> <h1>название статьи</h1> </header> <figure> <img src="фотография к статье"> <figcaption>название фотографии</figcaption> </figure> <section> // <section> можно и на <div> поменять <p>текст статьи</p> </section> <footer> <p>автор статьи </p> </footer> <article> // согласно спецификации, но почему коменты нельзя обернуть в <aside>? <header> <h3>тема комента</h1> </header> <section> <p>сам коментарий</p> </section> <footer> <p>автор комента </p> </footer> </article></article></body></html>

тоесть это div, но это не div <article> должен содержать часть самодостаточной информации, которая может быть вырвана из контекста всей страницы без потери смысла. Руководствуясь етим правилом я могу всю в страницу в <article> исписать Я видел ее в оригинале. Она помогла со всеми элементами кроме <article> и <section>

Здравствуйте, уже неделю пытаюсь разобраться с новыми тегами <section>, <article>, <header>, <footer>, <nav>, <aside> . Залез в спецификации w3c и WHATWG, пролистал http://html5doctor.com/. В теории все получается просто, но когда начинаешь реально что-то писать приходит понимание, что ты нечего не понимаешь. Набрел на http://www.creativebloq.com/html5/truth-about-structuring-html5-page-9122842#null (комменты вообще бомба) и понял, что никто толком о новых элементах HTML5 ничего не знает. Сейчас думаю начать изучение верстки стандартными divами с ролями ARIA с точечными вкраплениями HTML5. Можно конечно лепить структурные теги HTML5 как вздумается, но где гарантия, что они будут в духе семантики? Когда начинаешь думать какая разница между <section> и <article> - крыша едет. Мне чистый JS дался с легкостью, а тут на таком простом застрял. Вопрос к профессионалам, расскажите как и где Вы применяете <section>, <article>, <header>, <footer>, <nav>, <aside> ? Просто в моем понимании таких проблем со структурированием HTML документа не должно быть. Разметка это не то над чем нужно сидеть несколько дней, имхо.

Огромное спасибо всем участникам дискуссии ! Буду учить, то что Вы посоветовали. Когда появится что-то мало-мальски пристойное - обязательно выложу на всеобщее осуждение .

Ещё один + за FlexBox http://www.sitepoint.com/browser-trends-january-2015-ie8-usage-triples/. Кстати, а есть какая-то книга где описывается верста по новым стандартам? Или FlexBox нужно собирать только по статьям в интернете?

Последний вопрос. Судя по этой статье http://rafaltomal.com/a-web-developerss-guide-to-photoshop/ web developer должен знать: Что-то ещё есть? Помимо brackets буду photoshop грызть. Как обстоят дела с векторной графикой?

Ваша статья у меня в закладках . Это само собой разумеется, но, что Вы предпочитаете?

http://frontender.info/a-guide-to-flexbox/ и http://www.planningforaliens.com/blog/2014/03/11/real-world-flexbox/ агитируют за Flexbox. Скорее всего я тоже буду учить Flexbox. Правда тогда смысл в bootstrap и тп. отпадает, Flexbox затащит . Что посоветуете LESS или SCSS? На первый взгляд, мне LESS по синтаксису больше нравится.

Меня интересуют только требования работодателя

Я тоже привел ссылку на http://caniuse.com/#feat=flexbox , но мне ответили вот этим. Что посоветуете LESS или SCSS?

Что посоветуете LESS или SCSS? Что скажете относительно использования FlexBox уже сейчас?

Я имел ввиду, что с помощью функционала Bracket можно спокойно работать с .psd без Photoshop. Это верно?

У меня на PC тоже, но на ноутбуке с 4 ГБ ОЗУ как-то не очень. Brackets с Extract for Brackets (Preview) может заменить Photoshop? Впринципе, с препроцессоров мне как-то LESS по синтаксису будет ближе. Ведь сейчас, что LESS, что SCSS одинаковы. Но опять же я ими пока не пользовался. Относительно FlexBox, может Вы и правы. Только напрягает отсутствие полной поддержки, но если это суровая действительность начну переучиваться.