Мы начинаем верстку сайта с использованием шаблона:

 

 

 

Для начала возьмите на заметку этот архиватор:

 

http://www.kekaosx.com/ru/

 

 

 

Будем верстать - этот макет:

 

 

Скачаем стартовый шаблон:

 

 

Распакованный архив переименуем в папку нашей дальнейшей верстки, например:

 

    _html    

 

 

Здесь сами будем писать    mixin  

 

Это кусок кода - или формула

 

 

в который можно подставлять свои значения:

 

 

Так подключается библиотека     bootstrup   

 

 

Тут можно обновить      Node.js    

 

https://nodejs.org/en/download/

 

или здесь можно скачать:

 

https://nodejs.org/en/

 

Далее установим    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   

 

По ссылке:      http://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  

 

 

 

   Элементарно! Путь до файла!   

 

 

Давайте проверим правильно ли мы подключили

 

Если таких    красных сообщений    нет - то все ок!

 

 

Все подключилось верно!

 

Далее верстаем телефон:

 

Перейдем на сайт:

 

http://fontawesome.io/

 

 

 

 

 

 

И смотрим - она появилась:

 

 

 

Стилизуем наш телефон:

 

 

И что бы телефон   не переносился    на мобильных устройствах:

 

 

 

Имеем:

 

 

Займемся иконкой телефона:

 

Стиль пишем по классу     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   

 

По ссылке:      http://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-САЙТ. Будет адаптироваться под различные экраны.