DmitryPavlov

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

Recommended Posts

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

Сайт — 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. Да и вообще указать на любые ошибки.

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

Спасибо!

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

Edited by DmitryPavlov

Share this post


Link to post
Share on other sites
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 сказал:

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

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

YkgbaccqCgeJYFJOkv1bURYFO3UCEg.png

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, например. Тогда стоит создавать какой-то контейнер в который будет вставляться подобный неуправляемый контент, без классов и прочего (может и с классами, тем не менее). И уже от контекста этого контейнера стилизировать контент. В общем для всего свое место. :)

 

Share this post


Link to post
Share on other sites
50 минут назад, alexriz сказал:

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

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

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

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

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

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

Share this post


Link to post
Share on other sites
23 минуты назад, DmitryPavlov сказал:

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

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

Share this post


Link to post
Share on other sites
22 часа назад, DmitryPavlov сказал:

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

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

 eIut-4a8Qw8.jpg

Share this post


Link to post
Share on other sites
2 часа назад, DmitryPavlov сказал:

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

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

Share this post


Link to post
Share on other sites
2 часа назад, DmitryPavlov сказал:

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Svenden
      Как слово эквилибриум сдвинуть немного вниз ? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Эквилибриум </title> <link rel="stylesheet" href="/ecomapp/assets/css/style.css"> <meta name="description" content=""/> <meta name="keywords" content=""/> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"> </div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-8"> <ul class="nav navbar-nav"> {% if not request.get_full_path == '/' %} <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Категории <span class="caret"></span></a> <ul class="dropdown-menu"> {% for category in categories %} <li><a href="{{ category.get_absolute_url }}">{{ category.name }}</a></li> {% endfor %} </ul> </li> {% endif %} </ul> </div> </nav> <!-- Page Content --> <div class="container"> {% block content %} <div class="row"> <div class="col-lg-3"> <p class="lead">Эквилибриум</p> <div class="list-group"> {% for category in categories %} <a href="{{ category.get_absolute_url }}" class="list-group-item">{{ category.name }}</a> {% endfor %} </div> </div> <!-- /.col-lg-3 --> <div class="row"> {% for product in products %} <div class="col-lg-4 col-md-6 mb-4"> <div class="thumbnail"> <img src="{{ product.image.url }}" alt="" style="width:100px; height: 150px;"> <div class="caption"> <h4 class="pull.right">{{ product.price }} руб.</h4> <h5><strong><a href="{{ product.get_absolute_url }}">{{ product.title }}</a></strong></h5> <p>{{ product.description }}</p> </div> </div> </div> {% endfor %} </div> <!-- /.row --> </div> <!-- /.col-lg-9 --> </div> <!-- /.row --> </div> <!-- /.container --> <div class="container"> {% endblock content %} </div> </body> </html> <footer class="py-0 bg-dark"> <div class="container"> <p class="m-145454 text-green">Copyright © Your Website 2019</p> </div> <!-- /.container --> </footer>
    • By Valery Subbotin
      Здравствуйте, подскажите пожалуйста как избавиться от отступов в тексте, чтобы границы блока обтекали текст пиксель в пиксель.
      Все padding-и разумеется убрал, но непонятный зазор между границей блока и текстом все ровно остался.

  • Member Statistics

    46,436
    Total Members
    3,128
    Most Online
    bauka2288
    Newest Member
    bauka2288
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.