Первая верстка с помощью flexbox.

[DmitryPavlov 1]

Приветствую. Снова.

Сайт — http://flexboxtryfirst.16mb.com/

Макет — https://yadi.sk/i/2xULK9O9tjq4R

Сайт выглядит одинаково почти во всех браузерах, кроме любимого IE. Валидация HTML и CSS пройдена без ошибок.

769 - 1024

(max-width: 1024px) and (min-width: 769px)

Мобильная версия сайта

(max-width: 480px) and (min-width: 320px)

Прошу!

1. Указать на ошибки в использовании Flexbox. (Правильно ли я вообще использовал flexbox?)
2. Указать на различия между версткой и макетом.
3. Высказать свое субъективное мнение по поводу верстки в общем. Что стоит изменить или как делать не нужно.
4. Да и вообще указать на любые ошибки.

Жду любую критику)

Спасибо!

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

Изменено 29 июля, 2016 пользователем DmitryPavlov

[alexriz 674]

3 часа назад, DmitryPavlov сказал:

Указать на ошибки в использовании Flexbox. (Правильно ли я вообще использовал flexbox?)

Можно избавиться от .wrapper. Он у тебя, по сути, ничего не ограничивает. На первом этапе, все что обвязано на .wrapper, можно смело перенести на body. Вообще, строго говоря, прменение на этом участке flexbox, не обязательно. А в режиме flex-direction: row; flex-wrap: wrap; вообще не много странно. Окей, если на флексах, то тогда, для начала, стоит переключиться в режим flex-direction: column;, у тебя ведь корневые секции колонкой идут, вот и выстраивай их по колонке. flex-wrap оставить в состоянии по умолчанию nowrap. Так это будет более складно. В твоем случае это бесполезно, но есть задача, когда нужно прижимать футер к полу, если недостаточно контента при этом футер должен быть способным растягиваться по контенту, то есть нефиксированной высоты. Вот так, например https://jsfiddle.net/alexriz/kdcjo2oo/

 

3 часа назад, DmitryPavlov сказал:

Указать на различия между версткой и макетом.

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

3 часа назад, DmitryPavlov сказал:

Высказать свое субъективное мнение по поводу верстки в общем. Что стоит изменить или как делать не нужно.

Вцелом все очень неплохо, код чистый, именования понятные, читабельные. Стилистика указания классов понятная. Для основных header и footer, стоит тоже прописать классы и стилизировать по ним, а не по селектору тега. Так как, технически теги header и footer, могут быть не единственными на странице. В ситуации появления на странице какого-то article, например, со своим header  и footer, при стилизации у тебя гарантированно возникнет коллизия стилей с твоими основными хедером и футером. Это, так или иначе, повлечет переписывание кода, по этому, стоит избегать подобных ситуаций. Это сэкономит, в итоге, тебе общее время, нервы и избавит от лишней отладки страницы.

Еще у тебя в начале css есть такой код:

 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
        display: block;
}
body {
        line-height: 1;
}
ol, ul {
        list-style: none;
}
blockquote, q {
        quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
        content: '';
        content: none;
}
table {
        border-collapse: collapse;
        border-spacing: 0;
}

На эту тему, на форуме, уже было немеряно споров. Но мое лично имхо - это абсолютно бесполезный кусок кода. Все эти обнуляторы/reset.css/normalize.css и прочий хлам скорее всё сломает, чем реально поможет. Я понимаю, это по началу может показаться непонятным. Понимание этого факта приходит с опытом, сам проходил через это. Но мой тебе совет, избавляйся от подобного, это ни к чему, серьезно. Рано или поздно ты дойдешь к тому, что напишешь для себя очень не большой начальный снипет, который ты будешь только минимально подстраивать под конкретный проект. Вот это будет эффективно.

Вот это вот:

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

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

Еще по поводу классов. Стоит все же не много больше применять классов, заодно избавляться в css от излишней вложенности селекторов. Например, взять блок .client. У тебя внутри этого блока есть элементы: фото, заголовок, должность и краткое описание. Это можно было оформить вот так:

<div class="client">
    <img src="img/client-logo.png" alt="" class="client-photo">
    <h3 class="client-name">Jonathan Doe</h3>
    <span class="client-role">Co Founder</span>
    <p class="client-description">“Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec id gravida at eget metus. Etiasem malesuada magn”</p>
</div>

css

.client {
  width: 340px;
  height: 300px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.client-photo {
  border: 2px solid #1d1e24;
  width: 80px;
  height: 80px;
}

.client-name {
  margin-top: 25px;
  color: white;
  font-family: Exo;
  font-size: 22px;
  font-weight: 500;
  font-style: normal;
}

.client-role {
  color: #ff6d6d;
  font-size: 16px;
  font-weight: 500;
  font-family: Exo;
  margin-top: 8px;
  font-style: normal;
}

.client-description {
  opacity: 0.66;
  color: white;
  font-family: Exo;
  font-size: 16px;
  font-weight: 400;
  font-style: italic;
  text-align: center;
  letter-spacing: 0.64px;
  margin-top: 20px;
  line-height: 26px;
}

Тем самым ты отвязываешься от конкретных тегов и лишней вложенности в css. Ты можешь вместо h3, span и p, хоть просто div'ы натыкать и это будет работать.

Но есть ситуации, когда стоит стилизировать именно через теги от контекста, в местах где контент добавляется с какого-то wysiwyg, например. Тогда стоит создавать какой-то контейнер в который будет вставляться подобный неуправляемый контент, без классов и прочего (может и с классами, тем не менее). И уже от контекста этого контейнера стилизировать контент. В общем для всего свое место.

 

[DmitryPavlov 1]

50 минут назад, alexriz сказал:

стоит переключиться в режим flex-direction: column;

Точно-точно, не заметил даже как-то.

57 минут назад, alexriz сказал:

Стоит все же не много больше применять классов

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

Учту всё вышеприведенное. Спасибо

[alexriz 674]

23 минуты назад, DmitryPavlov сказал:

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

Да просто во всем есть своя мера и баланс. Любые варианты решают свою задачу. Со временем, будешь на уровне интуиции и опыта, делать как лучше

[DmitryPavlov 1]

В IE flexbox поплыл. Как с этим бороться? 

[DmitryPavlov 1]

22 часа назад, DmitryPavlov сказал:

стоит переключиться в режим flex-direction: column;

Я попробовал flex-direction: column (Естественно без flex: 1 100%;) И получается вот такая штука на телефоне. При flex-flow: row wrap; и flex-grow: 1; и flex-basis: 100%; все работает нормально.

 

[alejandro13 15]

2 часа назад, DmitryPavlov сказал:

В IE flexbox поплыл. Как с этим бороться? 

В ИЕ какой версии? До 9-й включительно flexbox не поддерживается

[alexriz 674]

2 часа назад, DmitryPavlov сказал:

Я попробовал flex-direction: column (Естественно без flex: 1 100%;) И получается вот такая штука на телефоне. При flex-flow: row wrap; и flex-grow: 1; и flex-basis: 100%; все работает нормально.

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

[DmitryPavlov 1]

В 30.07.2016 в 22:35, alejandro13 сказал:

В ИЕ какой версии?

10

 

[alexriz 674]

В ie 10 не много отличается синтаксис и значения свойств по умолчанию. скорее всего где-то вокруг этого что сломалось