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 Таб 3Accordion
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 2Counter
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="#") 3Modal
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") Прокрутка к IDSpoiler
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
