Jump to content

Spark89

User
  • Posts

    34
  • Joined

  • Last visited

About Spark89

  • Birthday 11/22/1989

Information

  • Sex
    Мужчина

Spark89's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. Spark89

    Сетка

    Ем, визуальное несходство? Истерика заказчика?)
  2. 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 хостинга или с проекта?
  3. Spark89

    Сетка

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

    Сетка

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

    Сетка

    Тоесть gutterов вообще сейчас нет?
  6. 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 */
  7. Spark89

    Сетка

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

    Сетка

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

    Сетка

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

    HTML5

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

    HTML5

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

    HTML5

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

    HTML5

    Хм, немного проясняется. Чтобы закрепить, допустим есть такое: название статьи фотография к статье текст статьи автор статьи комментарии к статье <!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>
  14. Spark89

    HTML5

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

    HTML5

    Здравствуйте, уже неделю пытаюсь разобраться с новыми тегами <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 документа не должно быть. Разметка это не то над чем нужно сидеть несколько дней, имхо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy