Jump to content

Адаптивный сайт flexbox grid


WebNewbe
 Share

Recommended Posts

Добрый вечер. Вот только закончил верстать свой второй адаптивный дизайн. Первый делал на бустрапе. Здесь же я решил использовать flexbox причем сразу же с сеткой.
Вот что получилось:
https://alex2033.github.io/
Оцените пожалуйста и покритикуйте, если есть что)
P.s. Вот действительно практика - лучший инструмент обучения. Когда только начинал этот макет верстать, о флексах ничего не знал и не понимал как они работают. А щас чувствую себя этаким специалистом:DD

Link to comment
Share on other sites

Кстати, если в взгляните на код, то в том же логотипе заместо img вы увидите код svg и текст, и в других иконках, например, в секции expertise тоже самое. Делал не просто так, мне, внезапно, взбрело в голову мысль: "А давай я в sass сделают основной цвет сайта(в данном случае сине-зеленый) в виде переменной и соответственно, если заказчик(воображаемый) скажет: "а пусть вместо сине-зеленого цвет сайта будет красным", то мне будет достаточно в одной переменной изменить цвет, как все на сайте,что нужно, измениться на нужный лад.
Как считаете это того стоит?)
Просто, наблюдая верстки других людей и видеоуроки, я заметил, что в том же лого просто через img вставляют и все

Link to comment
Share on other sites

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

А вообще, смотрится очень здорово.

P. S. в блоке EXPERTISE на телефонной ширине теряются где границы блоков и какая иконка куда относится. Разделитель есть только между 3 и 4 блоком. 
Главное меню нужно адаптивным сделать IMHO.

Link to comment
Share on other sites

В 18.08.2017 в 03:19, Kolya_YA сказал:

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

А вообще, смотрится очень здорово.

P. S. в блоке EXPERTISE на телефонной ширине теряются где границы блоков и какая иконка куда относится. Разделитель есть только между 3 и 4 блоком. 
Главное меню нужно адаптивным сделать IMHO.

Благодарю за отзыв.
1) Кнопка поиска и поле ввода. Я так понимаю вы говорите о высоте? Потому что ширина ну никак одинаковой у них быть не должна. Теперь с высотой. Высота у этих двух блоков одинаковая. Однако, если достаточно приблизить, можно увидеть, что высота кнопки вот буквально чуть-чуть больше. Уменьшив хотя бы на один пиксель, мы получим картинку еще хуже. Ну а вообще, не считаю это проблемой, потому что заметить эту разницу можно только очень хорошо вглядевшись. Если у вас есть решение, подсобите)
2) Социконки. Опять же, так ведь и должно выглядеть). Понятное дело, я могу убрать последнюю и все будет как надо. Но я пытался сделать верстку как можно гибче, то есть, если вдруг мне взбредет в голову добавить туда еще какое-то кол-во иконок, все не полетит в тартарары. Есть блок социконок, и если количество элементов этого блока заходит за ширину его самого, то они переносятся на другую строку. Вроде все правильно. Не совсем понял, что вам именно здесь не нравится)
3) Нижнее левое меню. Исправлено, решил до определенного размера сделать их просто в виде колонок.
4) Внешний вид. Вообще во мне, как мне кажется, очень мало от дизайнера:D Но я сделал несколько изменений, посмотрите. Но я не знаю, как тут все кардинально  можно поменять, чтобы стало все прекрасно)
5) Секция Expertise. Расстояния между блоками были увеличены.
6) Разделитель в секции expertise. Вообще это из разряда "не баг, а фича":D. Я посчитал, что делать разделитель под каждым блоком излишне и решил каждую тройку делить этой прямой.
7) Признаюсь честно, не хотел сильно париться насчет меню, просто если тот же togle использовать, то на флексах там возникают некоторые проблемы. Решил посмотреть как будет выглядеть меню в том виде, в котором оно сейчас находится. В следующих работах будут уже, конечно, делать через раскрывающиеся меню. Хотя по факту это меню так же можно назвать адаптивным) Ну по крайне мере мне так хочется думать

Edited by WebNewbe
Link to comment
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.

 Share

  • Similar Content

    • By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • By zeiger2
      Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью 
      background-image: none;     background: url(../img/check_icon_red.png) left no-repeat;   Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими
    • By Seadjus
      Добрый день!
      Огромная просьба камнями не кидаться!
      Начал изучать JS , пока нет особых продвижений в изучении.
      помогите оптимизировать игру в пары. по условиям задания необходимо реализовать игру в пары с таймером, выбором количества карт .
      Ниже
      https://codepen.io/Seadjus/pen/VwVedaP
    • By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
×
×
  • 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