Skip to content

Instantly share code, notes, and snippets.

@yodasw16

yodasw16/SassMeister-input-HTML.html

Created June 18, 2014 13:43
Show Gist options
  • Save yodasw16/d1571acfe780932a3a8c to your computer and use it in GitHub Desktop.
Save yodasw16/d1571acfe780932a3a8c to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ul class="list--bare cards">
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
</ul>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.1)
// ----
@import "breakpoint";
@import "singularitygs";
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.card {
box-shadow: 0 0 0 8px lightgrey;
}
.card__header {
background-color: lightgrey;
}
.card__details {
background: white;
}
.cards > li {
@include breakpoint(40em) {
&:nth-child(odd) {
@include grid-span(1, 1, $grid: 2, $gutter: .1);
clear: left;
}
&:nth-child(even) {
@include grid-span(1, 2, $grid: 2, $gutter: .1);
clear:right;
}
}
@include breakpoint(60em) {
&:nth-child(3n+1) {
@include grid-span(1, 1, $grid: 3, $gutter: .1);
clear: left;
}
&:nth-child(3n+2) {
@include grid-span(1, 2, $grid: 3, $gutter: .1);
}
&:nth-child(3n+3) {
@include grid-span(1, 3, $grid: 3, $gutter: .1);
clear: right;
}
}
}
.card {
box-shadow: 0 0 0 8px lightgrey;
}
Raw
SassMeister-output.css
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.card {
box-shadow: 0 0 0 8px lightgrey;
}
.card__header {
background-color: lightgrey;
}
.card__details {
background: white;
}
@media (min-width: 40em) {
.cards > li:nth-child(odd) {
width: 47.61905%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
clear: left;
}
.cards > li:nth-child(even) {
width: 47.61905%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
clear: right;
}
}
@media (min-width: 60em) {
.cards > li:nth-child(3n+1) {
width: 31.25%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
clear: left;
}
.cards > li:nth-child(3n+2) {
width: 31.25%;
float: left;
margin-right: -100%;
margin-left: 34.375%;
clear: none;
}
.cards > li:nth-child(3n+3) {
width: 31.25%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
clear: right;
}
}
.card {
box-shadow: 0 0 0 8px lightgrey;
}
Raw
SassMeister-rendered.html
<ul class="list--bare cards">
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
<li>
<article class="card">
<header class="card__header">
<h4 class="mbn"><a href="">ql2push1</a> (prod)</h4>
<time datetime="2014-06-16 15:22">Jun 16, 2014 3:22 PM</time>
</header>
<section class="card__details">
<ul class="split">
<li>
<span class="split__title">Last push:</span>
Error
(<a href="/push/116">116</a>)
</li>
<li>
<span class="split__title">Build:</span>
<a href="/build/92edcc5f7da2ccc4183826930ee6204fc96247dd">92edcc5f7d</a>
</li>
<li>
<span class="split__title">Branch:</span>
tag/2.0.1
</li>
<li>
<span class="split__title">Commit:</span>
<a href="http://git/web-core/hal/commit/29b146c9dc73553948ad1ec0a6d6350b4defef2b">29b146c</a>
</li>
</ul>
<a class="btn--full rollback" href="/repositories/:id/rollback/2">
Rollback
</a>
</section>
</article>
</li>
</ul>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment