Jump to content
  • Sign Up
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Progrmergr
      <button class="but" onclick="tap">Пельмени</button> Как я могу в JS получить слово "Пельмени"?
    • By shumz
      Задача: Создать линию определённых размеров и расположить её по центру экрана.
      Код HTML: 
      <div class="line"></div>
      Код CSS:
      .line {
          position:absolute
          margin-top:650px;
          height:2px;
          width:1200px;
          background: black;
      }
  • Member Statistics

    46,841
    Total Members
    1,451
    Most Online
    Robel
    Newest Member
    Robel
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Мучаюсь, не могу не как попасть на иконки вацапа и вайбера, используя карту изображений. Не как не пойму как эти координаты высчитать. Подскажите пожалуйста - https://codepen.io/
    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, проблема осталась
  • Popular Contributors

×
×
  • Create New...