Справочник

Сборка даёт базовые компоненты, сетку, иконки, кнопки, формы, модалки, минимальная стилизация и базовый функционал позволяют кастомизировать её как угодно

Общее

.site - обертка разметки, содержит в себе:

  • Header - ~/components/Header.vue
  • Main - содержимое страницы, обёрнуто в .site__content, по умолчания растягивется на всю высоту страницы прижимая футер книзу экрана
  • Footer - ~/components/Footer.vue

.flex - класс для флекс блока

.flex-с - класс для флекс блока с align-items: center

.like-link -

Шрифты грузятся в папку ~/assets/fonts и подключаются в файле ~/assets/less/fonts, там же прописываются шрифтовые классы

$device - Справка по модулю , служит для определения устройства пользователя, не работает с ssr

$global - доступ к глобальным методам, можно ыбло бы подключать миксины, но я не хочу, все методы описываются в файле ~/plugins/global.js путем добавления новых свойств в объект global

При желании можно разнести методы по разным глобальным переменным

SEO

Установлен модуль @nuxtjs/sitemap Справка по модулю

Добавлен файл ./static/robots.txt с деолтным содержимым

Не забудте поменять адрес сайта в настроках sitemap и в robots.txt

Переходы

fade - выход из прозрачности

                <transition name='fade'></transition>
            

Директивы

v-bsl - блокировка прокрутки сайта, документация

v-click-outside - обработка клика вне элемента, документация

Переменные

  • Переменная: значение по умолчанию - описание
  • @spacer: 16px; - отступ между колонок сетки
  • @spacerMd: 10px; - отступ между колонок сетки для планшетов
  • @spacerSm: 10px; - отступ между колонок сетки для мобильных
  • @columnCount: 12; - количество колонок
  • @baseWidth: 100% / @columnCount; - ширина колонки в процентах
  • @siteWidth: 1280px; - ширина сайта/контейнера
  • @containerPadding: 64px; - отступы контейнера
  • @containerPaddingMd: 32px; - отступы контейнера для планшетов
  • @containerPaddingSm: 16px; - отступы контейнера для мобильных
  • @large: 1600px; - ширина десктопа до
  • @largeStart: @medium + 1px; - ширина десктопа от
  • @medium: 768px; - ширина планшета до
  • @mediumStart: @small + 1px; - ширина планшета от
  • @small: 414px; - ширина мобильного до
  • @sm: ~'screen and (max-width: @{small} )'; - @media для мобильных
  • @md: ~'screen and (max-width: @{medium} )'; - @media для планшетов
  • @notsm: ~'screen and (min-width: @{mediumStart} )';- @media для планшетов и десктопов
  • @supersm: ~'screen and (max-width: 320px )'; - @media для маленьких мобильных
  • @mainZ: 10; - базовый z-index
  • @baseFont: 'Circe', 'Arial', serif; - основной шрифт
  • @baseFontSize: 14px; - основной размер шрифта
  • @headerFont: 'Circe', 'Arial', serif; - шрифт заголовков
  • @primary: #000; - основной цвет
  • @secondary: #ddd; - дополнительный цвет
  • @accent: red; - цвет акцента

Работа с медиа-запросами

После настройки брейкпойнтов медиа-запросы можно прописывать прямо в стилях селектора
                .foo{
                    display: block; // на больших (от 769px) - блок
                    @media @md{
                        display: inline; // на средних (от 415px до 768px) инлайн
                        .bar{
                            display: block;
                        }
                    }
                    @media @sm{
                        display: none; // на малых (до 414px) скрыто
                    }
                    @media @notsm{
                        background: #ccc // не на малых экранах (от 415px) - серый фон
                    }
                    @media @supersm{
                        display: flex; // на очень маленьких экранах (до 320px)  - флекс, и без фона
                    }
                }
            

Контейнер

.container - органичение ширины сайта, максимальная ширина указывается в ~/assets/less/vars.less

.container-ignore - служит для вписывания блока внутрь контейнера игнорируя отступы контейнера

Сетка

GridRow - компонент сетки, отвечает за количество колонок, атрибуты:

  • fullwidth: Boolean (false) - ряд строго вписывается в родительский блок, не компенсируя отступы колонок
  • size: Number (12) - указывает на количество колонок в ряду, по умолчанию 12, для смены нужно @columnCount в ~/assets/less/vars.less и значение атрибута по умолчанию в файле компонента ~/components/grid/Row.vue

GridCol - компонент сетки, отвечает за колонку, атрибуты:

  • size: String ('12,12,12') - указывает на ширину колонки в ряду, по синтаксис - 'lg,md,sm' - ширина колонки для десктопа, планшета и мобилки, число не может быть больше текущего количествва колонок у ряда
  • size: Boolean (false) - центрует колонку посередине ряда
  • end: Boolean (false) - прижимает колонку к правому краю ряда
  • padding-left: Boolean (false) - оставляет только левый отступ колонки
  • padding-right: Boolean (false) - оставляет только правый отступ колонки
  • no-padding: Boolean (false) - убирает отступы колонки, полезно для fullwidth ряда
Пример - ряд из трёх колонок, есть компенсация отступов колонок, поэтому содержимое колонки упирается в край контейнера
                <GridRow>
                    <GridCol no-padding size='4,6,12'>1</GridCol>
                    <GridCol padding-left size='4,6,12'>lorem</GridCol>
                    <GridCol size='4,6,12'>3</GridCol>
                    <GridCol size='4,6,12'>4</GridCol>
                    <GridCol padding-right size='4,6,12'>ipsum</GridCol>
                    <GridCol size='4,6,12'>6</GridCol>
                </GridRow>
1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae obcaecati ad et omnis exercitationem aliquam enim quidem iste minima fuga, deleniti laudantium doloremque magnam cumque quibusdam repellat nulla veritatis nam.
3
4
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae obcaecati ad et omnis exercitationem aliquam enim quidem iste minima fuga, deleniti laudantium doloremque magnam cumque quibusdam repellat nulla veritatis nam.
6
Пример - ряд из трёх колонок без компенсации отступов колонок
                <GridRow fullwidth :size='3'>
                    GridCol size='1,2,3'>1</GridCol>
                    <GridCol size='2,2,3'>2</GridCol>
                    <GridCol size='3'>3</GridCol>
                </GridRow>
            
1
2
3

Пример - ряд из трёх колонок без компенсации отступов колонок и с игнорированием отступов контейнера
                <div class='container-ignore'>
                    <GridRow fullwidth>
                        <GridCol size='4,6,12'>1</GridCol>
                        <GridCol size='2,6,12'>2</GridCol>
                        <GridCol size='2,6,12'>3</GridCol>
                        <GridCol size='4,6,12'>4</GridCol>
                    </GridRow>
                </div>
1
2
3
4

Иконки

Для работы с конками используется модуль @nuxtjs/svg-sprite, cпрайт генерируется из иконок в папке ~/assets/icons

Компонент svg-icon, атрибуты:

  • name: String ('') - название иконки, равно названию необходимого файла из ~/assets/icons
  • width: String ('') - желаемая ширина иконки
  • height: String ('') - желаемая высота иконки

В коде иконки можно заменить цвета на currentColor и она начнет принимать цвет родтеля (см. пример с кнопками). Иконка вписывается в указанные размеры, либо использует встроенные.

                    <div class='flex-c'>
                        Иконка с крестиком - <svg-icon name='close' width='24' height='24' />
                    </div>
                    
Иконка с крестиком -

Кнопки

UiButton - компонент кнопки, атрибуты:

  • to: String|Null (null) - адрес ссылки, если передать этот атрибут, то button заменится на nuxt-link
  • wide: Boolean (false) - растягивает конпку на всю ширину родителя
  • centered: Boolean (false) - центрует кнопку внутри родителя, можно применять во flex-блоках
  • disabled: Boolean (false) - блокирует кнопку
  • hollow: Boolean (false) - кнопка без фона с обводкой
  • dark: Boolean (false) - устанавливает цвет фона из less-переименной @primary
  • [color]: Boolean (false) - название цвета кнопки, при необходимости дописывается в компоненте кнопки, генерирует класс .button--[color], который можно стилизовать
                    <div class='flex'>
                        <UiButton>Базовая кнопка</UiButton>
                        <UiButton dark>Тёмная кнопка</UiButton>
                        <UiButton green>Зелёная кнопка</UiButton>
                        <UiButton hollow>Кнопка с обводкой</UiButton>
                        <UiButton disabled green>Зелёная заблокированная кнопка</UiButton>
                        <UiButton hollow>Кнопка с иконкой <svg-icon name='close' width='24' height='24' /></UiButton>
                    </div>
                    

Формы

Все поля и настройки формы описываются в data компонента

UiForm - основной компонент формы, атрибуты:

  • form: Object ({}) - все параметры и свойства формы и её полей
                    ...
                    data() {
                        return {
                            form: {
                                hideSubmit: false                          // Скрывать или нет кнопку отправки
                                submit: {                                  // Кнопка отправки формы
                                    label:'Отправить форму'                // подпись кнопки
                                    callback: () => {                      // функция выполняемая при отправке формы
                                        this.form.submit.label = this.form.fields.input1.value
                                    },
                                },
                                agree: {                                   // показыват чекбокс с согласием на обработку пд
                                    checked: false,                        // рядом с кнопкой отправки формы, кнопка заблокированная пока чекбокс не выбран
                                    type: 'checkbox',
                                    label: 'Даю согласие на обработку <a href='#' target='_blank'>персональных данных</a>',
                                },
                                fields: {                                  // список полей формы
                                    input1: {                              // одиночное поле формы
                                        value: 'Value',                    // значение поля
                                        label: 'input1 label',             // подпись поля
                                        placeholder: 'Placeholder',        // плейсхолдер поля
                                        type: 'email',                     // тип поля, любой из валидных типов
                                        required: true,                    // обязательное поле
                                        validationMessage: '',             // текст ошибки валидации (с сервера )
                                    },
                                    group1: {                              //группа полей формы
                                        childs: {                          //список полей группы
                                            input2: {
                                                value: 'Value',
                                                label: 'input2 label',
                                                placeholder: 'Placeholder',
                                                type: 'select',            // селект
                                                hasSearch: true,           // фильтрация элементов селекта
                                                options: {                 // элементы селекта
                                                    0: 'Option 1',
                                                    1: 'Option 2',
                                                },
                                            },
                                            input3: {
                                                value: 'Value',
                                                label: 'input3 label',
                                                placeholder: 'Placeholder',
                                            },
                                        },
                                    },
                                },
                            },
                        }
                    },
                    ...
                        <UiForm :form='form'></UiForm>

                    

Слайдер

Используется компонент обортка для Splide slider UiSlider атрибуты:

  • options: Object ({}) - параметры слайдера
                    ...
                    data(){
                        return {
                            sliderOptions: {
                                perPage: 4,
                                gap: '32px',
                            },
                        }
                    }
                    ...
                    
                    <UiSlider :options='sliderOptions'>
                        <splide-slide>
                            <img src='https://picsum.photos/200/300' />
                        </splide-slide>
                        <splide-slide>
                            <img src='https://picsum.photos/200/300' />
                        </splide-slide>
                        ...
                    </UiSlider>

                    

Модальное окно

UiModal - отображает содержимое в модальном окне, атрибуты:

  • open: Boolean (false) - состояние модалки, открыто/закрыто
  • position: String ('') - Положение окна, писать через пробел нужное положение top / bottom, left / right, по умолчанию окно находится по центру
                    ...
                    data(){
                        return {
                            isModalOpen: false,
                        }
                    }
                    ...
                    
                    <UiButton dark @click.native='isModalOpen = true'
                        >Открыть модальное окно</UiButton
                    >
                    <UiModal
                        v-model='isModalOpen'
                        :open='isModalOpen'
                        position='top right'
                    >
                        <h3>Простое модальное окно</h3>
                    </UiModal>