View index.html
<div class="g g--masonry-2-to3-up">
<div class="g__item">
<figure class="block">
<img src="http://placehold.it/450x200/" alt="" class="block__img" />
<figcaption><h2 class="block__title">Jemand musste Josef K. verleumdet haben!</h2></figcaption>
</figure><!--end block-->
</div><!--end g__item-->
<div class="g__item">
View SassMeister-input-HTML.html
<article>article</article>
<aside>aside</aside>
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
input.broken {
/* border: 2px solid; */
/* border-width: 2px; */
View dabblet.css
/**
* CSS variables test
*/
html { background: red }
@supports (--variables: yes) { /* any variable and any value works */
/* Code here will only be applied in CSS variable-supporting UAs */
html {
background: green;
View SassMeister-input-HTML.html
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">One Level deeper</a></li>
<li><a href="#">Deepest Level</a></li>
</ul>
View dabblet.css
/**
* heading decorated
*/
html
{
height: 100%;
background: linear-gradient(
to right bottom,
yellow,
View dabblet.css
/**
* keyboard order and flexbox ordering
*/
nav {
display: flex;
padding: 20px;
}
a:nth-of-type(2) {
order: -1;
View dabblet.css
/**
* Scrolling hints
*/
ul {
display: inline-block;
overflow: auto;
width: 7.2em;
height: 7em;
border: 1px solid silver;
View SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
%placeholder {
foo: bar;
&:first-child {
first: child;
}