Мы начинаем верстку сайта с использованием шаблона:
Для начала возьмите на заметку этот архиватор:
Будем верстать - этот макет:
Скачаем стартовый шаблон:
Распакованный архив переименуем в папку нашей дальнейшей верстки, например:
_html
Здесь сами будем писать mixin
Это кусок кода - или формула
в который можно подставлять свои значения:
Так подключается библиотека bootstrup
Тут можно обновить Node.js
https://nodejs.org/en/download/
или здесь можно скачать:
Далее установим Gulp
Или по сути - мы его обновляем:
Командой:
npm i -g gulp npm-check-updates
Не забываем для MAC - нужно указывать пароль
Хорошо!
И прежде чем устанавливать пакеты (они устаревают)
проверим их актуальность командой: ncu
ОБНОВИТЬ ВСЕ ПАКЕТЫ:
И запускаем команды в таком формате:
gulp - это запуск synk-браузра
gulp build - удаление и сборка проекта
Обновить все пакеты можно командой: ncu -u
но это не точно)
Ну и далее, установим все пакеты: npm i
Отлично!
Теперь введя команду gulp - откроется наш стартовый шаблон:
Не забываем про Git и Bower:
Качать тут: https://git-scm.com/
npm i -g bower
Или установить со страницы
С помощью Bower
мы можем устанавливать необходимые пакеты:
Установим пакет fotorama
bower i fotorama
Установили! Появилась папочка:
Вот так выглядит рабочий пример слайдера fotorama:
ОБЩЕЕ ПРАВИЛО ВЕРСТКИ:
Если что то модно сверстать средствами CSS - лучше сверстать! А не использовать изображения!
Например тут видео о шрифтовых icon-pack:
Стандарт ширины фонов: Width: 1920 px
Для редактирования SVG-logo используем программу
хотя можно использовать и Illustrator
| НАСТРОЙКА ПРОЕКТА |
Настроим шрифты:
Оказывается, существую on-line - конвертеры для конвертирования шрифтов в нужные форматы:
Копируем Fonts - из материалов урока:
Еще о фонт-паках:
Подключаем fonts:
Шрифтов на странице - не увидим!
Поэтому идем в _vars.sass
Прописали - сохранили - РАБОТАЕТ!
Добавим Bold - начертание
И результат:
В html - пропишем тег: <strong></strong>
Смотрим - текст ExtraBold:
Теория MIXIN для подключения шрифтов:
Эта конструкция убыстряет процесс подключения шрифтов:
Посмотрим main.min.css
В Gulp - файле посмотрим:
Выполним: gulp-sass
Получим развернутый css - стиль
Вернем настройки:
Со шрифтами все!
| Переменные _var.sass |
Акцентные цвета:
Откроем Дизайн - файл в браузере - что бы сразу пипеткой брать цвета:
main.sass
Проверим дефолтные настройки для body
И давайте - удалим все демо-данные:
И в index.html - удалим Демо-данные:
Все! Подготовили Макет к верстке!
Для удобства верстки - визуально разобьем секцию
<header> на части:
Меню будем делать с помощью плагина mmenu:
Устанавливать его можно с помощью bower:
Или он уже есть у нас в материалах урока:
Давайте сразу перенесем его в наш проект:
После этого - подключим mmenu в gulp-файл
в наш ТАСК js
Теперь плагин mmenu - необходимо подключить
в _libs.sass
Теперь запустим наш проект:
Давайте обратимся к документации: mmenu
По ссылке: https://mmenu.frebsite.nl/
Код конструкции:
<body>
<div id="my-page">
<div id="my-header"></div>
<div id="my-content"></div>
<div id="my-footer"></div>
</div>
</body>
И вставим код в index.html
Вызывать плагин mmenu - пока не будем!
Вот код вызова (находится там же по ссылке)
Далее: Приведем в порядок наш index.html
Color Picker :
Далее:
Тут исправить! Не "is", а ""
Далее смотрим на наш макет шапки:
Всю шапку - возьмем в тэг header
И давайте загрузим картинки из файлов урока - в наш проект:
и указываем путь к фоновой картинке.
Однако картинка пока не видна!
Поэтому:
И появиться наш фон:
Смотрим:
Далее устраним мелькания при имитации первой загрузки:
и вставим нашу переменную $dark
Ок! Далее)
Посмотрев еще раз на макет:
Отметим, что почти все секции имеют фон-картинкой!
Поэтому сделаем ВСЕ секции с фоновой картинкой
а там где фона не будет, то мы его кастамизируем (но это не точно).
Начнем с каркаса в index.html
Теперь стилизуем секцию и header заодно
И еще стилизуем отдельно секцию с белым фоном (у нашего дизайна есть секции с белым фоном):
Поставили фон на все окно (cover) + по центру:
Продолжим работу над <top-line>
Появилось SVG-лого
Лого пока очень большой)
Будем сразу стилизовать.
Далее: По эскизу отступ у Лого - с верху 40 px
Видим отступ:
Дальше, видим у нас очень сложная структура полосок:
правой панели с соц. сетями.
top-line сделаем position-absolute, что бы он заплывал на вертикальную правую панельку (кнопки соц. сетей)
Уточняем размеры лого:
А по скольку это у нас img (SVG) - то достаточно указать только ширину.
Смотрим Лого с отступами (с верху) и (с лева)
Далее верстаем телефон:
Поэтому подключим FontAwesome в _libs.sass
Скопируем папку со шрифт-паком в наш проект:
Здесь у нас Font Awesome уже адаптированный!
А именно - прописаны ДРУГИЕ ПУТИ до шрифта:
fontawesome-webfont.eot
А если скачивать Font Awesome с официального сайта - то будут другие пути.
Другими словами: Нужно что бы был правильный путь до самого шрифта: fontawesome-webfont.eot
Элементарно! Путь до файла!
Давайте проверим правильно ли мы подключили
Если таких красных сообщений нет - то все ок!
Все подключилось верно!
Далее верстаем телефон:
Перейдем на сайт:
И смотрим - она появилась:
Стилизуем наш телефон:
И что бы телефон не переносился на мобильных устройствах:
Имеем:
Займемся иконкой телефона:
Стиль пишем по классу fa:
Мы покрасили иконку телефона в серый цвет!
Далее:
По ссылке уже готовые анимированные иконки:
https://jonsuh.com/hamburgers/
Давайте скачаем плагин прямо с сайта:
Затем копируем файлик hamburgers.css
Все примеры анимаций Меню-hamburgers, можно посмотреть в файле:
Идем в html - работать над кнопкой:
Смотрим:
Стилизуем его:
Пишем стили:
color: #fff ЗДЕСЬ УБРАТЬ!
Смотрим результат:
Далее анимируем Гамбургер-меню
Давайте сделаем каркас меню:
Далее инициализируем плагин mmenu
Так как он у нас уже подключен:
Причем применяем к id 
Пропишем параметры плагина:
Смотрим:
Давайте добавим эффекты для отъезжающего контента:
Давайте прикрутим лого в шапку отъезжающего меню.
Видим лого в меню:
Сейчас КНОПКА справа, а МЕНЮ слева.
Смотрим:
Далее поработаем над анимацией - ГАМБУРГЕРА:
Смотрите: Сейчас мы используем api .mmenu
- для того что бы создать call-back
для кнопки гамбургера
что бы она меняла свое состояние для положений (open/close)
Если мы переопределяем какие то параметры - лучше их сначала найти в инспекторе, а потом переопределить!
Проверяем - МЕНЮ Гамбургер работает как надо!
Поправим ЛОГО:
Как до него добраться??
Go в Инспектор!
Дело в том - что это лого мы выводили с помощью плагина - и этот плагин добавляет нам ТЭГ: mn-navbar
ОК! ЛОГО вписали!
Добавим отступы с верху-снизу и т.д.
mm-title явно вываливается
за пределы mm-navbar
Давайте поймем почему: проинспектируем
mm-navbar
Потому что у него фиксированная высота: 40 px
Более того, имеет абсолютное позиционирование
и поэтому, он заезжает, на все другие элементы
Не стесняемся - и пере-определяем весь каскад, так как он есть:
Далее:
Далее видим - у нас заезжает все таки title - на само меню:
далее в инспекторе встанем на mm-listview
УБЕРЕМ РАЗДЕЛИТЕЛЬНЫЕ ПОЛОСКИ:
Находим в инспекторе где он формируется:
Убрали:
Но давайте уберем косяк со сролом:
Go в инспектор:
Используем его:
Далее найдем класс mm-panels
- это полностью класс ВСЕЙ ПАНЕЛИ - и просто сдвинем его на 18px в право!
Это стандартное значение скролла!
Убрали скролл - смотрим что получилось:
Дальше убираем линии:
Смотрим в инспектор - НЕ СТЕСНЯЕМСЯ - там все видно!
Смотрим - линии отключены:
Отлично!
Обратим на строки: Первую и последнюю
обычно они могут ОТЛИЧАТСЯ ОФОРМЛЕНИЕМ (Так уж повелось у разработчиков плагинов)
Все ок!
Теперь внимательно посмотрим на пункт меню:
Убрали серый фон у полоски
background-color: transparent
и добавили акцентный цвет:
Это мы подкрасили - ВЫДЕЛЕННЫЙ ПУНКТ - т.е. после нажатия будет светиться.
Давайте также подкрасим АКТИВНЫЙ ПУНКТ
Но тут отдельным блоком кода (не в обще куче переопределенных каскадов) - потому что это уже кастомизация не зависимая от плагина.
Смотрим - у нас еще всегда горит АКТИВНЫЙ пункт:
Кроме того давайте поправим ОТСТУПЫ и добавим в каждый пункт ИКОНКУ:
Смотрим отступы:
Видим:
Добавим иконки:
Go по ссылке:
Здесь можем скопировать Абсолютно любую иконку:
В жопу Сheatsheet
Go в
Ищем иконку - и добываем кодировку этой иконки:
Копируем и вставляем:
Множественные выделения возникают из-за пункта
active - его можно удалить, но он нужен для посадки на CMS
УРОК 5 - Решаем проблемы с mmenu
Для этого - идем на сайт:
Давайте обратимся к документации: mmenu
По ссылке: https://mmenu.frebsite.nl/
Идем >
Давайте посмотрим - что же у нас изменилось то?
Однако! У нас поменялись Хуки!
В общем когда я внес эти изменения в common.js - у меня наоборот все сломалось)
Пришлось вернуть как было! Думаю дело в том что в материалах урока идет немного другая версия плагина mmenu.
Пока ее мне хватает, а если накатывать новую с сайта, то видимо тут нужны эти новые правки по коду.
Все откатил! Меню работает!
ТИП АНИМАЦИИ:
А выбираем анимацию тут:
Лежит тут:
ВЕРСТАЕМ ДАЛЬШЕ:
Сделаем блок текста Приветствия:
Есть некоторые особенности:
Данный текстовый блок - всегда должен быть по центру - между девушкой и левым краем окна:
Реализуем это с помощью FLEX:
Flex - это набор CSS - правил!
Или Модуль CSS - который расширяет возможности CSS.
FLEX-сы старые браузеры - могут не поддерживать.
Лучше их не использовать в ключевых местах верстки: Таких как : сетки, отображения элементов:
А можно - для стилизации каких то элементов.
Go в index.html
Тектовый блок верстаем сразу за top-line
Создадим контейнер для flex:
Установим шрифты для Windows
Откроем файл ЭСКИЗА Abode XD -> Photoshop
В общем - берем половину сетки!
Т.е. верстаем контейнер Bootstrup:
И нам нужно взять - в определенное количество колонок -
Блок текста:
Возьмем блок текста - не в 6, а в 7 - колонок - что бы по шире!
И контейнер для нашей композиции:
Верстаем по частям:
Далее идем стилизовать и заодно все заголовки разом:
Go в main.sass
Пока имеем такую картину:
Продолжаем верстать композицию:
Далее копируем по ссылке:
Гист кнопки: Button Sass Styles (Universal Starter)
И вставляем код кнопки в main.sass
И наша кнопочка появилпсь:
Продолжаем стилизовать нашу КОМПОЗИЦИЮ
Go в самый низ main.sass
Смотрим результат:
Продолжаем стилизацию:
Линии, по бокам заголовка:
Добро пожаловать в профессиональный
Будем делать при помощи FLEX:
Теперь начинается магия БОКОВЫХ ЛИНИЙ -
оформим их при помощи ::before и ::after
И смотрим на новенькие ЛИНИИ:
Давайте стилизуем class h1
Но вначале посмотрим на Дизайн и проинспектируем заголовок
- на предмет ОТСТУПОВ!
Стилизуем иконки:
Результат:
Далее стилизуем текст в композиции:
НЕ НУЖНО ДОБАВЛЯТЬ ПЕРЕНОСЫ В ЭТОМ ТЕКСТЕ - ПОСКОЛЬКУ У НАС RESPONSIVE-САЙТ. Будет адаптироваться под различные экраны.
