Moonkake

A starter template for layout using Vite, Scss, Pug/Twig, JS.

Setup

pnpx degit pro-verstka/moonkake
pnpm install
pnpm run dev

Available commands

pnpm run dev - Default task for project development
pnpm run build - Build the project
pnpm run tools:generate - Generate components
pnpm run tools:lint - Run linter
pnpm run tools:format - Run formatter

Markup

Image

Pug:

+image({
	default: {
		src: "path/to/image",
		srcset: "path/to/[email protected] 1x, path/to/[email protected] 2x",
		width: 500,
		height: 500,
		alt: ""
	},
	sources: [
		{
			srcset: "path/to/[email protected] 1x, path/to/[email protected] 2x",
			media: "(max-width: 600px)"
		},
		{
			srcset: "path/to/[email protected] 1x, path/to/[email protected] 2x",
			media: "(min-width: 601px)",
			type: "image/webp"
		}
	]
})

Twig:

{{ image({
	default: {
		src: "path/to/image",
		srcset: "path/to/[email protected] 1x, path/to/[email protected] 2x",
		width: 500,
		height: 500,
		alt: ""
	},
	sources: [
		{
			srcset: "path/to/[email protected] 1x, path/to/[email protected] 2x",
			media: "(max-width: 600px)"
		},
		{
			srcset: "path/to/[email protected] 1x, path/to/[email protected] 2x",
			media: "(min-width: 601px)",
			type: "image/webp"
		}
	]
}) }}

Checkbox

Pug:

label.checkbox
	input(type="checkbox", name="checkbox_name")
	span Text

Twig:

<label class="checkbox">
	<input type="checkbox" name="checkbox_name">
	<span>Text</span>
</label>

Radio

Pug:

label.radio
	input(type="radio", name="radio_name")
	span Text

Twig:

<label class="radio">
	<input type="radio" name="radio_name">
	<span>Text</span>
</label>

File

Pug:

div.file
	input(type="file", id="file", name="file_name")
	label(for="file"): span(data-label="Select file") Select file

Twig:

<div class="file">
	<input type="file" id="file" name="file_name">
	<label for="file"><span data-label="Select file">Select file</span></label>
</div>

Select

Pug:

select.select(name="select_name")
	option(value="") text

div.select
	select(data-placeholder="Select...")
		option(value="")
		option(value="") All
		option(value="One") One
		option(value="Two") Two

Twig:

<select class="select" name="select_name">
	<option value="">text</option>
</select>

<div class="select">
	<select data-placeholder="Select...">
		<option value=""></option>
		<option value="">All</option>
		<option value="One">One</option>
		<option value="Two">Two</option>
	</select>
</div>

Form

Pug:

form.form(action="", mathod="", id="form")
	div.form__fieldset
		div.form__group
			div.form__item
				input(type="text", name="", placeholder="Text", value="")

		div.form__group.form__group_row
			div.form__item
				input(type="text", name="", placeholder="Text", value="")
			div.form__item
				input(type="text", name="", placeholder="Text", value="")

	div.form__fieldset
		div.form__group
			div.form__item
				button.button(type="submit") Submit

Twig:

<form class="form" action="" method="" id="form">
	<div class="form__fieldset">
		<div class="form__group">
			<div class="form__item">
				<input type="text" name="" placeholder="Text" value="">
			</div>
		</div>

		<div class="form__group form__group_row">
			<div class="form__item">
				<input type="text" name="" placeholder="Text" value="">
			</div>
			<div class="form__item">
				<input type="text" name="" placeholder="Text" value="">
			</div>
		</div>
	</div>

	<div class="form__fieldset">
		<div class="form__group">
			<div class="form__item">
				<button class="button" type="submit">Submit</button>
			</div>
		</div>
	</div>
</form>

Tabs

Pug:

div.tabs
	div.tabs__title
		div.tabs__item.tabs__item_active(data-hash="tab1") Tab 1
		div.tabs__item(data-hash="tab2") Tab 2
		div.tabs__item(data-hash="tab3") Tab 3

	div.tabs__content
		div.tabs__item.tabs__item_active Tab 1
		div.tabs__item Tab 2
		div.tabs__item Tab 3

Twig:

<div class="tabs">
	<div class="tabs__title">
		<div class="tabs__item tabs__item_active" data-hash="tab1">Tab 1</div>
		<div class="tabs__item" data-hash="tab2">Tab 2</div>
		<div class="tabs__item" data-hash="tab3">Tab 3</div>
	</div>

	<div class="tabs__content">
		<div class="tabs__item tabs__item_active">Tab 1</div>
		<div class="tabs__item">Tab 2</div>
		<div class="tabs__item">Tab 3</div>
	</div>
</div>

Accordion

Pug:

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

Twig:

<div class="accordion">
	<div class="accordion__item">
		<div class="accordion__header">accordion title 1</div>
		<div class="accordion__body">accordion content 1</div>
	</div>
	<div class="accordion__item">
		<div class="accordion__header">accordion title 2</div>
		<div class="accordion__body">accordion content 2</div>
	</div>
</div>

Counter

Pug:

div.counter
	button.counter__minus -
	input(type="text" value="before 5 after" data-prefix="before " data-postfix=" after" data-min="2" data-max="10")
	button.counter__plus +

Twig:

<div class="counter">
	<button class="counter__minus">-</button>
	<input type="text" value="before 5 after" data-prefix="before " data-postfix=" after" data-min="2" data-max="10">
	<button class="counter__plus">+</button>
</div>

Breadcrumbs

Pug:

ul.breadcrumbs
	li.breadcrumbs__item: a.breadcrumbs__link(href="#") Home
	li.breadcrumbs__item: a.breadcrumbs__link(href="#") Section
	li.breadcrumbs__item: span.breadcrumbs__current Page

Twig:

<ul class="breadcrumbs">
	<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="#">Home</a></li>
	<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="#">Section</a></li>
	<li class="breadcrumbs__item"><span class="breadcrumbs__current">Page</span></li>
</ul>

Pagination

Pug:

ul.pagination
	li.pagination__item: a.pagination__link(href="#") 1
	li.pagination__item: a.pagination__link(href="#") 2
	li.pagination__item: a.pagination__link(href="#") 3

Twig:

<ul class="pagination">
	<li class="pagination__item"><a class="pagination__link" href="#">1</a></li>
	<li class="pagination__item"><a class="pagination__link" href="#">2</a></li>
	<li class="pagination__item"><a class="pagination__link" href="#">3</a></li>
</ul>

Modal

Pug:

a(href="#modal_example" data-modal) Open a modal window

div.modal#modal_example
	div.modal__container
		button.modal__close(data-modal-close) &times;
		h2 Header

a(href="https://www.youtube.com/embed/G_hKGYD8gOg" data-modal-video) Open YouTube video
a(href="https://vimeo.com/191947042" data-modal-video) Open Vimeo video
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") Open Image

Twig:

<a href="#modal_example" data-modal>Open a modal window</a>

<div class="modal" id="modal_example">
	<div class="modal__container">
		<button class="modal__close" data-modal-close>&times;</button>
		<h2>Header</h2>
	</div>
</div>

<a href="https://www.youtube.com/embed/G_hKGYD8gOg" data-modal-video>Open YouTube video</a>
<a href="https://vimeo.com/191947042" data-modal-video>Open Vimeo video</a>
<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">Open Image</a>

Calendar

Pug:

input(type="text", name="", data-calendar, placeholder="dd.mm.yyyyyy")

Twig:

<input type="text" name="" data-calendar placeholder="dd.mm.yyyyyy">

Scroll to element

Pug:

a(href="#" data-scroll-to="div_id") Scroll to ID

Twig:

<a href="#" data-scroll-to="div_id">Scroll to ID</a>

Spoiler

Pug:

div(data-spoiler)
	div(data-spoiler-body)
		p Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nisi, pariatur nostrum est est iste sint recusandae? Consequuntur libero ratione cupiditate numquam saepe, odio delectus aliquam voluptatibus. Dolor quis vel ipsa!

Twig:

<div data-spoiler>
	<div data-spoiler-body>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto nisi, pariatur nostrum est est iste sint recusandae? Consequuntur libero ratione cupiditate numquam saepe, odio delectus aliquam voluptatibus. Dolor quis vel ipsa!</p>
	</div>
</div>

Tooltip

Pug:

a(href="#", data-tippy, data-tippy-content="Tippy!") Text

Twig:

<a href="#" data-tippy data-tippy-content="Tippy!">Text</a>

Drawer

Pug:

button(data-drawer-toggle) Open

div.drawer(data-drawer)

Twig:

<button data-drawer-toggle>Open</button>

<div class="drawer" data-drawer></div>

SyncScroll

Pug:

div(data-sync-scroll)
	div(data-sync-scroll-item)
	div(data-sync-scroll-item)

Twig:

<div data-sync-scroll>
	<div data-sync-scroll-item></div>
	<div data-sync-scroll-item></div>
</div>

Name		Name	Last commit message	Last commit date
Latest commit History 264 Commits
.husky		.husky
public/assets/media		public/assets/media
src		src
.editorconfig		.editorconfig
.gitignore		.gitignore
.lintstagedrc		.lintstagedrc
.npmrc		.npmrc
.nvmrc		.nvmrc
README.md		README.md
biome.json		biome.json
package.json		package.json
plopfile.js		plopfile.js
vite.config.js		vite.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Moonkake

Setup

Available commands

Markup

Image

Checkbox

Radio

File

Select

Form

Tabs

Accordion

Counter

Breadcrumbs

Pagination

Modal

Calendar

Scroll to element

Spoiler

Tooltip

Drawer

SyncScroll

About

Uh oh!

Uh oh!

Languages

pro-verstka/Moonkake

Folders and files

Latest commit

History

Repository files navigation

Moonkake

Setup

Available commands

Markup

Image

Checkbox

Radio

File

Select

Form

Tabs

Accordion

Counter

Breadcrumbs

Pagination

Modal

Calendar

Scroll to element

Spoiler

Tooltip

Drawer

SyncScroll

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Uh oh!

Languages