Moonkake
Стартовый шаблон для верстки с использованием BEM, Gulp, Sass, Pug, JS/ES6.
Установка
Шаг 1. Установить NodeJS - https://nodejs.org/
Шаг 2. Установить Gulp
npm i gulp -g
Шаг 3. Установить пакеты из package.json
npm i
Запуск
npm run dev
Доступные команды
// Задача по-умолчанию для разработки проекта
npm run dev
// Сборка проекта
npm run build
Доступные настройки gulpfile.js
{
// файлы css из папки src/css/pages будут подключаться отдельно в head
separateCssToPages: true,
// файлы js из папки src/js/pages будут подключаться отдельно после app.js
separateJsToPages: true,
// файлы шрифтов из папки src/fonts будут подключаться в head
appendFontsToHead: true
}
Разметка
Сheckbox
label.checkbox
input(type="checkbox", name="checkbox_name")
span Текст
Radio
label.radio
input(type="radio", name="radio_name")
span Текст
File
div.file
input(type="file", id="file", name="file_name")
label(for="file"): span(data-label="Выберите файл") Выберите файл
Select
select.select(name="select_name")
option(value="") текст
Form
form.form(action="", mathod="", id="form")
div.form__fieldset
div.form__group
div.form__item
input(type="text", name="", placeholder="Текст", value="")
div.form__group.form__group_row
div.form__item
input(type="text", name="", placeholder="Текст", value="")
div.form__item
input(type="text", name="", placeholder="Текст", value="")
div.form__fieldset
div.form__group
div.form__item
button.button(type="submit") Отправить
Tabs
div.tabs
div.tabs__title
div.tabs__item.tabs__item_active(data-hash="tab1") Таб 1
div.tabs__item(data-hash="tab2") Таб 2
div.tabs__item(data-hash="tab3") Таб 3
div.tabs__content
div.tabs__item.tabs__item_active Таб 1
div.tabs__item Таб 2
div.tabs__item Таб 3
Accordion
div.accordion
div.accordion__item
div.accordion__header accordion title 1
div.accordion__body accordion content 1
div.accordion__item
div.accordion__header accordion title 2
div.accordion__body accordion content 2
Counter
div.counter
button.counter__minus -
input(type="text" value="до 5 после" data-prefix="до " data-postfix=" после" data-min="2" data-max="10")
button.counter__plus +
Breadcrumbs
ul.list.breadcrumbs
li.list__item: a.list__link(href="#") Главная
li.list__item: a.list__link(href="#") Раздел
li.list__item: span.list__current Страница
Pagination
ul.list.pagination
li.list__item: a.list__link(href="#") 1
li.list__item: a.list__link(href="#") 2
li.list__item: a.list__link(href="#") 3
Modal
a(href="#modal_example" data-modal) Открыть модальное окно
div.modal#modal_example
div.modal__container
button.modal__close(data-modal-close) ×
h2 Заголовок
a(href="https://www.youtube.com/embed/G_hKGYD8gOg" data-modal-video) Открыть видео YouTube
a(href="https://vimeo.com/191947042" data-modal-video) Открыть видео Vimeo
a(href="https://images.unsplash.com/photo-1561444533-fa0a9266bf67?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" data-modal-image, title="Image Caption") Открыть изображение
Calendar
input(type="text", name="", data-calendar, placeholder="дд.мм.гггг")
Scroll to element
a(href="#" data-scroll-to="div_id") Прокрутка к ID
Spoiler
div(data-spoiler)
div(data-spoiler-body)
p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nisi, pariatur nostrum est iste sint recusandae? Consequuntur libero ratione cupiditate numquam saepe, odio delectus aliquam voluptatibus. Dolor quis vel ipsa!
Tooltip
a(href="#", data-tippy, data-tippy-content="Tippy!") Text