Skip to content

Instantly share code, notes, and snippets.

@taupecat

taupecat/SassMeister-input-HTML.html

Created September 29, 2014 13:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save taupecat/4b4317bfbd69e0138316 to your computer and use it in GitHub Desktop.
Save taupecat/4b4317bfbd69e0138316 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="leadership__container">
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----
@import "breakpoint";
@import "susy";
/* ==========================================================================
Breakpoint settings
========================================================================== */
$container-width: 1000px;
$breakpoint-to-ems: true;
$hidpi: min-resolution 1.5dppx;
$bp-navigation: 550px;
$bp-footer: 740px;
$bp-small: 321px;
$bp-medium: 600px;
$bp-large: $container-width;
$bp-xlarge: $container-width + 30px;
/* ==========================================================================
Susy settings
========================================================================== */
$susy: (
columns: 24,
container: $container-width,
gutters: 1,
);
.leadership {
/**
* Layout
*/
&__container {
@include container;
}
&__person {
@include container;
@include breakpoint($bp-medium) {
@include gallery(24 / 3)
}
@include breakpoint($bp-large) {
@include gallery(24 / 4);
}
}
&__photo {
@include span(12);
@include breakpoint($bp-medium) {
@include span(24);
}
img {
height: auto;
width: 100%;
}
}
&__content {
@include span(12 last);
@include breakpoint($bp-medium) {
@include span(24);
}
}
}
Raw
SassMeister-output.css
/* ==========================================================================
Breakpoint settings
========================================================================== */
/* ==========================================================================
Susy settings
========================================================================== */
.leadership {
/**
* Layout
*/
}
.leadership__container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.leadership__container:after {
content: " ";
display: block;
clear: both;
}
.leadership__person {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.leadership__person:after {
content: " ";
display: block;
clear: both;
}
@media (min-width: 37.5em) {
.leadership__person {
width: 31.91489%;
float: left;
}
.leadership__person:nth-child(3n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.leadership__person:nth-child(3n + 2) {
margin-left: 34.04255%;
margin-right: -100%;
clear: none;
}
.leadership__person:nth-child(3n + 3) {
margin-left: 68.08511%;
margin-right: -100%;
clear: none;
}
}
@media (min-width: 62.5em) {
.leadership__person {
width: 23.40426%;
float: left;
}
.leadership__person:nth-child(4n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.leadership__person:nth-child(4n + 2) {
margin-left: 25.53191%;
margin-right: -100%;
clear: none;
}
.leadership__person:nth-child(4n + 3) {
margin-left: 51.06383%;
margin-right: -100%;
clear: none;
}
.leadership__person:nth-child(4n + 4) {
margin-left: 76.59574%;
margin-right: -100%;
clear: none;
}
}
.leadership__photo {
width: 48.93617%;
float: left;
margin-right: 2.12766%;
}
@media (min-width: 37.5em) {
.leadership__photo {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
}
.leadership__photo img {
height: auto;
width: 100%;
}
.leadership__content {
width: 48.93617%;
float: right;
margin-right: 0;
}
@media (min-width: 37.5em) {
.leadership__content {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
}
Raw
SassMeister-rendered.html
<div class="leadership__container">
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
<div class="leadership__person">
<div class="leadership__photo">
<img src="http://placekitten.com/g/150/150">
</div>
<div class="leadership__content">
<h2 class="leadership__name">Beth Johnson</h2>
<div class="leadership__title">Principal, President</div>
<div class="leadership__biography--wide"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p></div>
<ul class="leadership__social social">
<li class="email"><a href="mailto:bjohnson@rp3agency.com">Email</a></li>
<li class="linkedin"><a href="https://www.linkedin.com/pub/beth-johnson/1/366/256">LinkedIn</a></li>
<li class="twitter"><a href="https://twitter.com/bethjohnson">Twitter</a></li>
</ul>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment