Справочник
Сборка даёт базовые компоненты, сетку, иконки, кнопки, формы, модалки, минимальная стилизация и базовый функционал позволяют кастомизировать её как угодно
Общее
.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>
<GridRow fullwidth :size='3'> GridCol size='1,2,3'>1</GridCol> <GridCol size='2,2,3'>2</GridCol> <GridCol size='3'>3</GridCol> </GridRow>
<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>
Иконки
Для работы с конками используется модуль
@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-linkwide: 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>