Weavy Collection

Weavy Collection is the best companion of Weavy. Pick up any snippet (a fragment of codes). And then copy and paste it onto the code editor of Weavy.

We hope you'll have a nice markup experience.

General Snippets

Normalized Page with Microdata

!DOCTYPE[html]
html[lang=_lang()][itemscope][itemtype="http://schema.org/WebPage"] {
	head {
		meta[charset="UTF-8"]
		link[rel="stylesheet"][type="text/css"][href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css"]
	}
	body {
	}
}

Inserting jQuery

script[src="https://code.jquery.com/jquery-3.1.0.slim.min.js"][integrity="sha256-cRpWjoSOw5KcyIOaZNo4i6fZ9tKPhYYb6i5T9RSVJG8="][crossorigin="anonymous"] {}

Heading and Paragraph

h1 "Heading"
p "Text"

List of Links

ul {
	li a[href="#"] "Link"
	li a[href="#"] "Link"
	li a[href="#"] "Link"
}

Page Header with Microdata

header.navbar.navbar-default[itemscope][itemtype="http://schema.org/WPHeader"] {
	a[href="@{_home}index.html"][itemprop="headline"] "Brand Name"
}

Article with Microdata

article[itemscope][itemtype="http://schema.org/Article"] {
	h1[itemprop="headline"] { "Heading" }
	[itemprop="articleBody"] {
		p "Body"
	}
}

Page Footer with Microdata

footer.container-fluid[itemscope][itemtype="http://schema.org/WPFooter"] {
	[itemprop="copyrightHolder"] "Copyright Description"
}

Bootstrap Snippets

Bootstrap Page with Microdata

!DOCTYPE[html]
html[lang=_lang()][itemscope][itemtype="http://schema.org/WebPage"] {
	head {
		meta[charset="UTF-8"]
		meta[http-equiv="X-UA-Compatible"][content="IE=edge"]
		meta[name="viewport"][content="width=device-width, initial-scale=1"]
		meta[name="format-detection"][content="telephone=no"]
		link[rel="stylesheet"][href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"][integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"][crossorigin="anonymous"]
	}
	body {
		.container {
			
		}

		script[src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"] {}
		script[src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"][integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"][crossorigin="anonymous"] {}
	}
}

Header Nav with Microdata

header.navbar.navbar-default[itemscope][itemtype="http://schema.org/WPHeader"] {
	.container {
		.navbar-header {
			button[type="button"].navbar-toggle.collapsed[data-toggle="collapse"][data-target="#header-collapse"] {
				.icon-bar {}
				.icon-bar {}
				.icon-bar {}
			}
			a.navbar-brand[href="@{_home}index.html"][itemprop="headline"] "Brand Name"
		}
		nav#header-collapse.collapse.navbar-collapse[itemscope][itemtype="http://schema.org/SiteNavigationElement"] {
			ul.nav.navbar-nav {
				li a[href="#"] "Link"
				li a[href="#"] "Link"
				li a[href="#"] "Link"
			}
		}
	}
}

Breadcrumb Nav with Microdata

nav[itemscope][itemtype="http://schema.org/SiteNavigationElement"] {
	ol.breadcrumb {
		li a[href="#"] .glyphicon.glyphicon-home{}
		li a[href="#"] "Now"
		li a[href="#"] "You"
		li a[href="#"] "Are"
		li.active "Here"
	}
}

Jumbotron Article with Microdata

article.jumbotron[itemscope][itemtype="http://schema.org/Article"] {
	h1[itemprop="headline"] { "Heading" }
	[itemprop="articleBody"] {
		p "Body"
		p.text-right a.btn.btn-primary.btn-lg "Read More"
	}
}

List with Thumbnails

ul.media-list {
	li.media {
		.media-left img.media-object[width="100"][height="100"]
		.media-body {
			h3.media-heading "Heading"
			p "Body"
			p.text-right {
				a[href="#"].btn.btn-default "Read More"
			}
		}
	}
	li.media {
		.media-left img.media-object[width="100"][height="100"]
		.media-body {
			h3.media-heading "Heading"
			p "Body"
			p.text-right {
				a[href="#"].btn.btn-default "Read More"
			}
		}
	}
}

Panel

.panel.panel-default {
	.panel-heading {
		"Heading"
	}
	.panel-body {
		p "Body"
	}
}

Stacked Nav

ul.nav.nav-pills.nav-stacked {
	li a[href="#"] { "Link" }
	li a[href="#"] { "Link" }
	li a[href="#"] { "Link" }
}

Table

table.table.table-striped {
	tr { th "One" th "Two" th "Three" }
	tr { td "Apple" td "Banana" td "Cherry" }
	tr { td "Apple" td "Banana" td "Cherry" }
	tr { td "Apple" td "Banana" td "Cherry" }
}

Left Sidebar

.row {
	main.col-md-9.col-md-push-3 {
		"Main Column"
	}
	aside.col-md-3.col-md-pull-9 {
		"Sidebar"
	}
}

Right Sidebar

.row {
	main.col-md-9 {
		"Main Column"
	}
	aside.col-md-3 {
		"Sidebar"
	}
}

Two Columns

.row {
	.col-sm-6 {
		img[width="760"][height="300"]
		p "Column Text"
	}
	.col-sm-6 {
		img[width="760"][height="300"]
		p "Column Text"
	}
}

Three Columns

.row {
	.col-md-4 {
		img[width="760"][height="300"]
		p "Column Text"
	}
	.col-md-4 {
		img[width="760"][height="300"]
		p "Column Text"
	}
	.col-md-4 {
		img[width="760"][height="300"]
		p "Column Text"
	}
}

Four Columns

.row {
	.col-sm-6.col-lg-3 {
		img[width="760"][height="300"]
		p "Column Text"
	}
	.col-sm-6.col-lg-3 {
		img[width="760"][height="300"]
		p "Column Text"
	}
	.col-sm-6.col-lg-3 {
		img[width="760"][height="300"]
		p "Column Text"
	}
	.col-sm-6.col-lg-3 {
		img[width="760"][height="300"]
		p "Column Text"
	}
}

Subscription Form

form[method="post"][action="#"] {
	.input-group {
		input[type="text"][placeholder="mail@example.com"].form-control
		.input-group-btn button[type="submit"].btn.btn-primary "Subscribe"
	}
}

form[method="post"][action="#"].form-inline {
	.form-group {
		.input-group {
			.input-group-addon "USERNAME"
			input[type="text"].form-control
		}
	}
	.form-group {
		.input-group {
			.input-group-addon "PASSWORD"
			input[type="password"].form-control
		}
	}
	button[type="submit"].btn.btn-primary "Login"
}

Search Form

form[method="post"][action="#"] {
	.input-group {
		.input-group-addon .glyphicon.glyphicon-search{}
		input[type="text"].form-control
		.input-group-btn button[type="submit"].btn.btn-primary "Search"
	}
}

Dismissable Alert

.alert.alert-success.alert-dismissable {
	button[type="button"].close[data-dismiss="alert"] "&times;"
	"Message"
}