moonkake

v10.4.0

Published

17 days ago

Site starter template based on Vite, Scss, Pug/Twig, JS

0High
0Medium
0Low

p1rate

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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

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