Разворачиваем проект и верстаем адаптивный макет на базе CSS Grid.
| Оглавление | |
| 1 - Настройка окружения |  |
| 2 - Настройки/Шрифты/Переменные/ |
|
| 3 - .main-header | |
| 4 - .main-header .button | |
| 5 - Gulp build | |
| 6 - .portfolio-section grid | |
| 7 - .landing-section | |
| 8 - .formsection | |
| 9 - .blog-home grid | |
| 10 - .blog-home grid увеличение картинок |
|
| 11 - .main-footer | |
| 12 - _media.sass | |
| 13 - UI External: 128.68.155.56:3001 | |
Мы будем верстать - используя стартовый шаблон:
Стартовый gulp-шаблон
| 1 - Настройка окружения |
Скачаем архив, распакуем, и переименуем папку в ready-html
Содержимое папки: ready-html (gulp-start-folder)
На MAC файлы будут не видны:
Однако их можно увидеть в Sublime Text
Также скачаем папку с референсами (картинки, готовая верстка):
Затем
Откроем консоль/terminal - и проверим версии пакетов:
Работаем уже из папки проекта:
Установим все пакеты: npm i
Успешно!
Запустим слежение: gulp watch
Запустится браузер со стартовой страницей:
Окружение настроено!
| 2 - Настройки/Шрифты/Переменные/ |
Откроем index.html - и удалим демо-контент:
Далее из скаченной папки references - скопируем все шрифты в папку fonts нашего проекта:
Дальше перенесем в проект ИЗОБРАЖЕНИЯ
Прежде чем начать верстать - необходимо задать:
дефолтные переменные
Во первых копируем акцентный цвет
#f0650d
И прошипим акцентный цвет в: _vars.sass
Далее идем по цветам:
Так же цвет оверлея для шапки:
#293A43
Следующий цвет серый цвет фона секции:
#EDEDED
#4b5a65
Также, выведем в переменную ГАТТЕР
Далее: Зададим шрифты:
Причем в этом шаблоне - мы подключим только файлы *.woff
Потому что в данном примере, мы используем только CSS-grid
Если уж браузер не поддерживает CSS-grid - то он не поддерживает и woff - и не нужны никакие расширения TTF, SVG.
Т.е. - для подключения шрифтов - достаточно одного типа файлов!
У нас уже подключены 2 шрифта.
Допишем суфиксы. -grid
Что бы наверняка знать - что файл шрифта подключен из нашего проекта.
Давайте подключим еще начертание шрифта:
И пропишем толщину шрифта: 800
И еще подключим один шрифт, но уже не reIeway, а intro
Он понадобиться для ЗАГОЛОВКА:
Все! Шрифты подключены.
==================================================
Не много по стартовому шаблону:
У нас по дефолту - подключены только 2 библиотеки:
normolize-css - это когда у ВСЕХ брузеров, он приводит к одному и тому же виду - все элементы.
Т.е. нет необходимости "сбрасывать":
- размеры заголовков
расстояния между параграфами
Сама библиотека normalize-css подключена тут:
_base.sass - содержит базовые стили
Для body :
Основной шрифт
.img-responsive - вспомогательный класс
.text-center
text-align: center - часто-используемый
И все собственно!
В итоге:
_fonts.sass - Здесь мы подключаем шрифты fonts
_vars.sass - Здесь задаются Дефолтные переменные (акцентные цвета)
_libs.sass - Здесь мы подключаем CSS - библиотеки
_media.sass - Содержит брек-поинты для адаптивной верстки
main.sass - собирает все _name.sass - файлы
ХВАТИТ ПРЕДИСЛОВИЙ!
==================================================
Посмотрим внимательно на макет:
| .main-header |
Верстаем - ШАПКУ
Откроем index.html
напишем:
Поскольку в ШАПКЕ у нас ЗАГОЛОВОК центрируется и по ширине и по высоте - сделаем это при помощи grid.
GRID - Полностью заменяет Flex
Создадим класс grid в main.sass
Далее: Видим - у нас есть ОВЕРЛЕЙ-ФОН по верх картинки:
И прописывать ее будем Инлайново - с помощью стилей style - а не в файле CSS.
Так как в CSS - его будет трудно менять! после посадки на CMS.
И пока ничего еще не увидим - потому что еще ничего в header - нет! Имеет нулевую высоту.
Теперь поработаем на стилями header
Запустим gulp watch и увидим страницу:
Бэкграунд появился - но он расползается
Поэтому пропишем:
Готово. Работает. Смотрим!
И затем центрируем background
И по скольку у нас в нутри будут какие то элементы располагаться - то сделаем:
position: relative
И обратим внимание!
Поскольку тэгу header - присвоили класс grid
Далее:
Давайте сначала сделаем всю верстку на html - а потом уже все оформим.
Пропишем внутри header
Дальше у нас идет ЗАГОЛОВОК
Получим пока такой результат:
Дальше у нас идет так называемый Button-Set
Пока имеем такое безобразие:
Далее пропишем 2-ю кнопку:
Разметка HTML - Готова!
Теперь поработаем над стилями:
А именно - давайте выроним вертикально по центру наши элементы (контент):
Теперь у нас есть ВЕРТИКАЛЬНОЕ ЦЕНТРИРОВАНИЕ КОНТЕНТА
Причем центрирование у нас АДАПТИВНОЕ:
Далее, произведем и горизонтальное центрирование.
Но сразу, после Интересной вещи:
Зададим наконец - OVERLAY
и дополним параметрами:
и на всю высоту тоже))
В таком состоянии получим - сплошную заливку:
И не забываем добавить прозрачность - opacity
И получим фон Overlay: 92%
Все хорошо - но под нашим Overlay - скрылся наш контент).
Т.е. слой с текстовым блоком ниже чем слой с bacround-ом.
Как решить эту проблему:
.header-content - мы начнем его оформлять - что бы решить проблему "видимости".
И наши элементы: КНОПКИ и ЗАГОЛОВОК - вылезли на верх
Результат:
Добавим выравнивание:
Текстовый блок - ВЫРОВНЯЛСЯ ПО ЦЕНТРУ ГОРИЗОНТА
Займемся паддингами ( padding )
Поэтому сделаем паддинги "контролируемыми".
Получим отличные отступы:
ДЕЛАТЬ ВЕРСТКУ АДАПТИВНОЙ МЫ БУДЕМ УЖЕ В КОНЦЕ.
КОГДА ВСЕ СВЕРСТАЕМ.
Далее -> - оформим ЗАГОЛОВОК
Укажем размер шрифта заголовка:
Уточним что это - h1
ПОЛУЧИМ:
Имеем чрезмерную жирность (она идет от h1 - по умолчанию) - поэтому сбросим толщину шрифта:
Чуть-менее жирный заголовок получим:
Исправим очень большие Маргины margin
Далее:
| .main-header .button |
КНОПКИ - для них есть
Скопируем код-sass для buttons и вставим его в main.css
И получим кнопки с АКЦЕНТНЫМ цветом :
Далее:
Создадим button для header-content
Далее добавим код кнопки:
И увидим перемены - в отступах:
Поработаем теперь с кнопками:
Результат:
Далее &::after -
Поиграемся настройками:
Настройка hover - цвета при наведении на кнопки:
изменим значение (% - процент)
для темного цвета при наведении - введем переменную:
Далее: оформим 2-ю кнопку СЕРУЮ
И смотрим результат:
и переопределим &::after
и нужно переопределить &: hover
Однако при наведении Нижний бордюрчег - не реагирует:
исправим это:
Работает!
И еще опишим состояние кнопки: Active - нажатая
Кнопки мы закончили!
И шапку мы закончили!
===================================================
| 5 - Gulp build |
Давайте реанимируем Таск build - сборку готового проекта.
Скопируем все содержимое файла: gulpfile.js
в такой же gulpfile.js - но уже нового проекта.
Однако - этого не достаточно!
Необходимо доставить все необходимы пакеты.
И обязательно - подключить эти пакеты в gulpjs.js
==================================================
Подключение JS-scripts
Готовенький файл скриптов будет экспортирован в папку:
Кроме того, подключим скаченные и установленные через bower библиотеки в нашем файле:
libs.sass
а именно, подключим:
magnific-popup.css
==================================================
НАЧНЕМ ПО ПОРЯДКУ:
Установка библиотек:
Давайте До-Ставим сторонние популярные библиотеки, которые могут нам пригодиться при разработке сайта, а точнее - для добавления различных эффектов (надстроек) на странице.
Установка: Magnefic-PopUp
и этой же командой устанавливается jQuery - плагин:
Зайдем в Terminal и выполним команда обращенную к bower
bower i jquery magnific-popup
Плагин magnific-popup и плагин jquery установлены в нужную папку!
Далее >>
Установим пакет для сжатия библиотек:
gulp css nano
gulp rename
Команда установки:
npm i gulp-cssnano gulp-rename --save-dev
Далее >>
Давайте подключим пакет del — он позволяет подчистить лишние потроха проекта.
Команда установки:
npm i del --save-dev
Далее >>
Для оптимизации изображений — нам нужно установить 2 пакета:
gulp-imagemin
imagemin-pngquant
Команда установки:
npm i --save-dev gulp-imagemin imagemin-pngquant
Далее >>
Все замечательно — до тех пор пока у нас не так много картинок.
Когда картинок становиться много — они обрабатываются очень долго!
Поэтому нужно, что бы наши картинки кэшировать !
Поэтому установим: gulp-cash
Команда установки:
npm i gulp-cache --save-dev
Далее >>
Установим пакет вендерных префиксов.
gulp-autoprefixer
Нужен для АВТОМАТИЧЕСКОГО создания — Автопрефиксов!
— в css это нужно для обеспечения:
максимальной совместимости со ВСЕМИ БРАУЗЕРАМИ
То есть, написав :
dysplay: flex — это новый модуль в CSS (и ему обязательно нужны вендерные префиксы)
(в sass или css) — у нас бы автоматически — распаковывались бы все префиксы:
web-kit-flex
moz-flex
ms-flex
Команда установки:
npm i --save-dev gulp-autoprefixer
Далее >>
Установим пакет:
gulp-uglifyjs — для сжатия файлов JS
UX npm i gulp-uglifyjs --save-dev
—save-dev ключи нужны чтобы сохранить версии пакетов
Все пакеты gulp - УСТАНОВЛЕНЫ!
Тепрь Build - Настроен и можно выполнить сборку!
Получим сборку проекта:
===================================================
| 6 — .portfolio-section grid |
Следующая секция - Гриды:
Создадим новую секцию:
Давайте позаботимся о заготовке для Emmit
И внутри секции - добавим div - вы - с классом portfolio-item
Каждый item - у нас тоже будет Grid - ом!
Что бы нам вертикально центрировать в нем текст.
В каждом item-grid - будет картинка!
Вот эти картинки:
Поэтому зададим простой шаблон для Emmit
.portfolio-item.grid[style="background-image: url(../img/$.jpg)"]*9>span{Cool }
Распаковываем наш шаблон Emmit и получим абзац кода:
Пока это ересь) Поэтому переходим к стилям:
Видим отступы со всех сторон:
Далее сделаем grid-разметку:
Обратим внимание - что у нас сетка состоит из 4-х колонок:
Допишим:
grid-template-columns: repeat(4, 1fr)
Проверяем:
Так лучше видно:
Теперь работаем с item - ми
Но прям тут ничего делать не нужно:
Давайте лучше стилизовать в main.sass класс portfolio-item
Смотрим:
Смотрим результат:
Теперь ровняем текст по центру:
Текст - центрирован по горизонтали:
Можно быстренько поменять повторяющееся слово - например на : Лучший
в index.html
.portfolio-item.grid[style="background-image: url(../img/$.jpg)"]*9>span{Лучший }
И допишем наши названия в ячейках:
Теперь ровняем текст по вертикали:
Выронили:
Добавим еще padding что бы исключить "прилипание" текста к краям ячеек:
Мы ничего не увидим - нужно сжимать окно.
Далее: Поработаем над шрифтом наших названий.
Нам нужен такой результат:
Зададим толщину шрифта:
Затем цвет текста:
Видим цвет текста:
Далее - для item - сделаем position: relativ
Что бы у нас случайно не выезжали какие то элементы.
Далее сделаем Overlay
Причем при наведении hover - фон темнеет.
Причем сделаем ПЛАВНОЕ ЗАТЕМНЕНИЕ
Изменим курсор:
И зададим hover
Изменять будем еще color text наших названий:
Теперь делаем Overlay:
на базе &::before
Получим результат:
Смотрим:
Однако! Контент внутри - у нас не виден.
Поэтому сделаем любого потомка с z-index: 1
Смотрим:
Поэтому добавим еще и изменение overlay-фона:
Затем на hover - элементе .portfolio-item
мы поработаем с &::before
Смотрим результат:
Мы закончили базовую разметку!
Но нам еще нужно оформить наши Grid-ы, так же как на макете, т.е. так же с разной шириной ячеек:
Это просто!
Начнем считать:
1-я ячейка - занимает 2 колонки
Смотрим результат:
Далее продолжаем считать:
Поэтому переходим к 5-й ячейке
Смотрим результат:
Далее делаем Вертикальную ячейку:
Пишем код:
Смотрим результат:
Вот так делаются сетки
И еще добавим кнопочку в ячейку:
Посмотрим где появилась кнопка:
Кнопка болтается внизу наших Grido-d
Будем исправлять:
Возьмем наш новый класс из index.html :
Перейдем в main.sass
и зададим параметры класса:
В инспекторе кода - хорошо видны Паддинги
Готово! Мы сверстали ячейки портфолио!
| 7 - .landing-section |
Далее верстаем следующую секцию:
Здесь у нас вводится понятие - контейнер.
Контент теперь заверстан в рамках контейнера:
В Bootstrup - есть готовый контейнер, ну а тут мы его напишем.
В Grid - ширина элементов более гибкая - чем в Bootstrup.
В Bootstrup необходимо заходить в кастомизатор - и кастомизировать каждую колонку.
Необязательно задавать кратные значения - можно указать любые удобные нам ширины - и все они будут адаптивными - потому, что это Grid - ы.
Зададим класс и ширину контейнера:
У нас будет универсальная секция - с одинаковыми отступами: сверху и снизу.
Это main.sass - ИСПРАВИТЬ!
И тут же в index.html - ИСПРАВИТЬ!
Так же сразу зададим параметры для h2 (заголовка):
Font Size: 34px
ExtraBold
Raleway - шрифт
Цвет и меж строчное расстояние:
Затем идем index.html и создадим секцию:
Далее идет контейнер - который ограничивает ширину контента.
Теперь наполним наши колонки, а потом уже будем стилизовать.
Все еще ничего не должно появляться (секция в смысле)
Далее идет килограмм текста:
Посмотрим на промежуточный результат:
Далее оформим правую колонку: ready-right
Просто вставим картинку:
Промежуточный результат:
Контент секции создан - и теперь будем его оформлять:
Go to main.sass
Стиль пропишем по колонкам.
Скопируем класс: section-ready
из index.html в main.sass и разобьем его на 2 колонки:
И видим 2 колонки:
Теперь давайте оформим, каждую из колонок:
Обратим внимание, у нас будет тонкая вертикальная линеечка:
Возьмем цвет бордюла - пипеткой:
И у нас не подключился шрифт: Realway
Потому что мы не прописали корректное название:
font-family: 'raleway-grid'
в _base.sass
Пропишем шрифт:
Шрифт починили!
Далее продолжаем оформлять колонки:
Далее:
Поэтому Go в .section-ready
НЕ забудь! Нажать TAB!
Все теперь секция - полностью залита нужным цветом:
Теперь переходим к оформлению правой колонки:
ready-right
Проинспектируем картинку - и увидим, что она прилипает ко всем углам, поэтому:
Что бы посмотреть на маленьком мониторе - как на большом:
Нажмем: Crtl + '-'
Смотрим:
Все! Секция с колонками и картинкой мы закончили!
| 8 - .formsection |
Дальше сверстаем секцию с формой отправки:
Если внимательно на нее посмотрим, то увидим что форма состоит из 4-х колонок. - Адаптивных
Но адаптивить будем уже в конце:
Работаем по привычной методике.
Сначала пишем разметку на html - а потом оформляем CSS стили.
Создаем секцию и контейнер.
Как видим нам не нужны никакие framework-и, что бы создавать контейнеры.
Далее:
Далее:
Потом передумали:
Далее допишим, еще div для кнопки:
Смотрим что получилось:
Далее Go в sass > >
Смотрим:
Все input - ты - лучше оформлять - отдельно, т.к. они могут использоваться еще где-то.
Смотрим:
Далее расширим (до-оформим) .formsection
Далее, будем менять placeholder
Далее разобьем на колонки нашу форму:
Теперь бъем на колонки:
Смотрим, наши элементы встали в ряд:
Далее, видим, что наша кнопка выбивается по стилю.
Исправим это:
И смотрим результат:
Готова секция с формой отправки!
| 9 — .blog-home grid |
Далее переходим:
к верстке следующей секции: BLOG
Очевидно у нас тут есть контейнер - так как не всю ширину:
Имеем результат:
Весь контент секции - заключим в блок:
И если это грид, то далее идут items
Но не просто items - но и полноценными ссылками
Смотрим: (тут возможно чуть в перед забежали)
Далее идет непосредственно - контент
Далее про-дублируем наш Item
6 БЛОКОВ У НАС. Поэтому - сделаем 6 копий и поменяем у них картинки:
И в конце - добавим div - с классом кнопки:
<div class="buttoncase text-center">
<a href="#" class="button">View Portfolio</a>
</div>
Увидим это:
Go в sass
Оформлять наш блог:
Считаем так: имеем 4 колонки ( элемента )
Далее, оформим сам item
Перейдем в
_base.sass - базовые переменные
добавим цвет:
Вернулись в main.sass
И зададим РОЛЫ
СМОТРИМ РЕЗУЛЬТАТ:
Далее, сделаем, что бы при наведении - менялся бы bg - и менялся бы резко!
Но сначала пропишем настройки для нормального показа картинок в роллах.
И укажем разные картинки:
Смотрим:
| 10 — .blog-home grid увеличение картинок |
И еще добавим эффект УВЕЛИЧЕНИЯ КАРТИНОК - при наведении.
Перейдем в index.html
Здесь в 6-м блоке - допишемв class -> grid
Уберем синеву текста:
Давайте оформим заголовок:
Параметры заголовка:
18 bold Raleway
Дальше, мы будем анимировать:
- ФОН
- КАРТИНКУ
- ЦВЕТ ЗАГОЛОВКА
Поэтому пишем:
Далее:
В .blog-item проработаем hover
Продолжим оформлять реакцию на наведение курсора:
Теперь ЗАГОЛОВОК в блоке:
Далее:
Реализуем увеличение картинки:
Командой: transform
Но есть небольшой косяк!
Нижний край картинки при увеличении наползает на блок с текстом.
Теперь расставим наши grid согласно макету:
И не забываем 4-ю ячейку поставить в 2 колонки:
Смотрим:
Далее, поправим наш заголовок.
Сейчас он прилип между 2-мя секциями.
А еще даже не оформляли .section-blog
Подровняли заголовок между секциями:
Далее в инспекторе кода Firefox - увидим, что у кнопки, слишком большой padding
Поэтому немного переопределим наш класс кнопки именно в секции: .section-blog
Отлично! На данном этапе имеем такую верстку.
| 11 - .main-footer |
Теперь сверстаем ФУТЕР
Произведем Замер высоты до ЛОГО:
Затем, перейдем в index.html - и создадим футер.
Причем, зададим ему класс main-footer
Потому, что футеры, разными бывают.
И более того - создадим футер в .container - что бы на мобильном устройстве - у нас ГАРАНТИРОВАННО были отступы.
Далее соберем все параметры текста + лого:
И эти надписи имею цвета соответственно:
Верхнее слово: #4E5355
Нижнее слово: #707476
Знак Копирайта: Цвет: #494D50
Будем - оформлять:
И чуть ниже, разместим .footer-copy
И скопируем туда символы: ~©~
Смотрим результат:
Go в main.sass
Делаем стили для футера:
Вообще у нас есть образцы цветов:
Что бы потом их быстро применять к другим элементам.
Не нужно стесняться копировать названия классов из index.html
а то БЛЯТЬ, получиться как в прошлый раз !!!
Далее:
Продолжаем оформлять <span>
Теперь переходим к оформлению: Copyright
Если шрифты в Футере - не как на скрине, то возможно:
Готово! Любуемся футером:
ГОТОВО! САЙТ СВЕРСТАН ПОЛНОСТЬЮ!
| 12 - _media.sass |
Начнем Адаптиветь сайт:
Для различных мобильных устройств!
В browser-synk - включим "Режим адаптивного дизайна"
Начинаем адптивить - по традиции с шапки:
А именно: Хватаемся за край и начинаем уменьшать область экрана до тех пор пока у нас не "прыгнет" заголовок.
Вообще ИДЕМ от БОЛЬШЕГО разрешения к МЕНЬШЕМУ
Поэтому, мы вернемся к пропущенному разрешению:
И сделаем соответствующие адаптивные изменения:
для 992 px
И еще здесь уменьшим размеры текста на КНОПКАХ:
Теперь для 992 px - уменьшим количество колонок:
Будем уменьшать до 3-х колонок:
А то они (колонки) - какие то съеженные!
Поэтому: Поработаем над .buttoncase
Допишем:
Далее поработаем над portfolio-item:
Работает!
Из 4-х колонок при уменьшении получаем 3 колонки
получаем:
Далее уменьшаем размеры экрана
для 768 px
Из этого:
в это:
Go в media.sass:
И найдем в нем
Далее сделаем ширину экрана - МЕНЬШЕ 768px
И будем адаптиветь:
А именно: СДЕЛАЕМ МЕНЬШЕ КЕГЕЛЬ ЗАГОЛОВКА
Для этого проинспектируем наш ЗАГОЛОВОК в header
Выделим для себя:
header-content и h1
Мысленно выделяем для себя конструкцию:
Затем копируем прямо из инспектора кода:
Поработаем над кеглем ЗАГОЛОВКА и вуаля:
А после уменьшения кегля:
Вдобавок!
У самого header-content - сделаем padding - меньше!
Результат увидим в инспекторе:
Отлично! Двигаемся дальше!
Причем на этом разрешении ( 768 px ) Ячейки портфолио смотрятся и так отлично: (на наши 3 колонки) - поэтому тут ничего не переделываем:
Идем дальше:
Уменьшим еще ширину нашего экрана:
для 480 px
У него возник КОСЯК (у меня нет его),
Однако будем править все равно:
У нас выпирает следующая секция:
Займемся тогда секцией ПОРТФОЛИО
Для 480 px - пропишем высоту ячеек по меньше: 15vh
Смотрим результат:
Или можно пойти дальше и сделать не 3 а 1 колонку:
Поэтому поработаем над .buttoncase
Отлично - получили Портфолио в 1-колонку:
И внизу отлично стоит КНОПОЧКА на 1-ну колонку:
Но хочется шрифтец - по Громче сделать:
Смотрим:
Огонь!
Далее Поработаем над следующей секцией:
Ready
У него, причем - большой отступ с верху!
У меня же картинка прилипла в верхней границе:
В чем дело - пока ХЗ!
А вот в чоМ!
Имеем такую же картину: Большой отступ с верху:
Исправляем это:
Смотрим было стало:
Отлично, далее:
Поработаем с .section-ready
grid - элементом тут является контейнер.
И выстраиваем наши Левую и Правую - блоки
в 1 - ну колоночку
И если не накалываться с названиями, то получим это:
Но с права - у нас осталась линия!
И странные paddings
Исправим это:
И получим красивые отступы:
Теперь давайте сбросим БОРДЕР (тот что с права)
Смотрим:
Далее уменьшим Размер заголовка - чтоб не бил по глазам.
Готово! Нормас заголовок!
Дале уменьшаем до разрешения:
360 px
Хотя следующим минимальным разрешением идет
320 px
Вообще разрешение i-Phone 5S
Далее переходим к адаптации секции:
ФОРМА ОТПРАВКИ:
Пока имеем - очень зажатую форму отправки:
Начнем с ней работать с 768 px
Давайте разложим форму на 2 фракции:
Отлично! Видим 2 фракции:
И в отличии от Bootstrup - здесь Абсолютно Резиновые элементы.
Т.е. Полный Responsive
На узком разрешении - тоже хорошо:
Делее еще адаптируем Форму для разрешения уже:
480 px
Отлично! Но заголовок в Хэдере у нас огромный.
Поэтому уменьшим его:
Смотрим результат:
И наш блог) Смотрите как он скукожился!
Его прям перекорячило)
Давайте решим - с какого разрешения нам нужно начинать его адаптивить:
Начнем с 1200 px
На 1200px - он такой:
Ну парню что то там показалось - поэтому тоже тогда поработаем начиная с разрешения 1200 px
Пока получилась ерунда:
Причем buttoncase - тоже должен занимать меньше места.
Сразу исправим это:
Пока видим скукоженность:
(пока не поправим &:nth-child )
Далее исправим: blog-item
Все нормально - но 1 элемент у нас не влезает:
Переукажем grid-row
Отлично!
Далее Blog для 992 px
Просто скопируем - начиная с blog-home
И модифицируем для нашего разрешения:
И вуаля! Смотрим:
Далее для 768px
Скопируем это:
Вставим для 768px
Однако этого не достаточно: продолжаем
И отлично - теперь блог смотрится великолепно - даже на откровенно-мобильных устройствах.
Отлично!
Осталось поправить Футер!
В целом он не плох, но расстояния с верху / снизу - великоваты:
Стилизуем на 480px
И подправим КОПИРАЙТ:
Поднимем Значок Copyright
Порядок!
Отлично! Мы закончили Адаптивить верстку!
| 13 - UI External: 128.68.155.56:3001 |
Что бы проверить адаптивность на реальном мобильном устройстве, то перейдем в terminal:
И при его запуске - в самом начале: увидим внешний ip-adress
Работает синхронно:
И еще исправим косяки с кнопкой при ресайзе:
