Skip to content

Instantly share code, notes, and snippets.

@conormcafee

conormcafee/SassMeister-input-HTML.html

Created October 5, 2015 13:18
Show Gist options
  • Save conormcafee/9f9c5e7cf96590cd4663 to your computer and use it in GitHub Desktop.
Save conormcafee/9f9c5e7cf96590cd4663 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Grid</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<!-- One Col -->
<div class="col one-col">
<p>One Col</p>
</div>
<!-- End One Col -->
<!-- Two Col -->
<div class="col two-col">
<p>Two Col</p>
</div>
<div class="col two-col-ng">
<p>Two Col</p>
</div>
<!-- End Two Col -->
<!-- Three Col -->
<div class="col three-col">
<p>Three Col</p>
</div>
<div class="col three-col">
<p>Three Col</p>
</div>
<div class="col three-col-ng">
<p>Three Col</p>
</div>
<!-- End Three Col -->
<!-- Four Col -->
<div class="col four-col">
<p>Four Col</p>
</div>
<div class="col four-col">
<p>Four Col</p>
</div>
<div class="col four-col">
<p>Four Col</p>
</div>
<div class="col four-col-ng">
<p>Four Col</p>
</div>
<!-- End Four Col -->
<!-- Five Col -->
<div class="col five-col">
<p>Five Col</p>
</div>
<div class="col five-col">
<p>Five Col</p>
</div>
<div class="col five-col">
<p>Five Col</p>
</div>
<div class="col five-col">
<p>Five Col</p>
</div>
<div class="col five-col-ng">
<p>Five Col</p>
</div>
<!-- End Five Col -->
<!-- Six Col -->
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col-ng">
<p>Six Col</p>
</div>
<!-- End Six Col -->
<!-- Seven Col -->
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col-ng">
<p>Seven Col</p>
</div>
<!-- End Seven Col -->
<!-- Eight Col -->
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col-ng">
<p>Eight Col</p>
</div>
<!-- End Eight Col -->
<!-- Nine Col -->
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col-ng">
<p>Nine Col</p>
</div>
<!-- End Nine Col -->
<!-- Ten Col -->
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col-ng">
<p>Ten Col</p>
</div>
<!-- End Ten Col -->
<!-- Eleven Col -->
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col-ng">
<p>Eleven Col</p>
</div>
<!-- End Eleven Col -->
<!-- Twelve Col -->
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col-ng">
<p>Twelve Col</p>
</div>
<!-- End Twelve Col -->
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.3.0-beta2)
// ----
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,600);
$container-width: 750px;
$container-height: 440px;
$base-font-size: 1rem;
$base-line-height: 1.25 * $base-font-size;
$type-settings: (
-1: (
font-size: 0.75rem,
line-height: $base-line-height
),
0: (
font-size: 1rem,
line-height: $base-line-height
),
1: (
font-size: 1.333rem,
line-height: $base-line-height * 2
),
2: (
font-size: 1.778rem,
line-height: $base-line-height * 2
)
);
@function type-scale($level) {
@return map-get(
map-get($type-settings, $level), 'font-size');
}
@function line-height($level) {
@return map-get(
map-get($type-settings, $level), 'line-height');
}
@mixin type-setting($level) {
font-size: type-scale($level);
line-height: line-height($level);
}
$recipe-colors: (
'primary': #5ad485,
'background': #e1e1e1,
'gray': #999,
'border': #ccc
);
@function recipe-color($name) {
@return map-get($recipe-colors, $name);
};
.baseline-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
opacity: 0;
transition: opacity 0.2s ease-out;
&:hover {
opacity: 1;
}
}
.guide {
margin-bottom: 5 * $base-line-height;
&, &:before, &:after {
height: $base-line-height;
width: 100%;
outline: 1px solid turquoise;
}
&:before, &:after {
content: '';
display: block;
position: absolute;
top: 200%;
}
&:after {
top: 400%;
}
}
.recipe-container {
font-family: Raleway, sans-serif;
font-weight: 400;
width: $container-width;
height: $container-height;
background-color: white;
overflow: hidden;
box-shadow: 0 0 5rem rgba(black, 0.1);
&:hover {
> .baseline-grid {
opacity: 1;
}
}
}
.recipe-image {
position: absolute;
width: auto;
height: 100%;
left: 0;
top: 0;
}
.recipe-content {
position: absolute;
width: 50%;
height: 100%;
right: 0;
top: 0;
padding: $base-line-height * 2 1rem;
}
.heading-2 {
@include type-setting(-1);
font-weight: 400;
text-transform: uppercase;
margin: 0;
letter-spacing: 4px;
color: recipe-color('gray');
}
.heading-1 {
@include type-setting(2);
font-weight: 200;
text-transform: uppercase;
letter-spacing: 1px;
margin: 1 * $base-line-height 0;
}
.paragraph {
@include type-setting(0);
margin: 0 0 $base-line-height 0;
}
.recipe-list {
list-style-type: none;
padding: 0;
margin: 0;
&.meta {
> .recipe-item {
display: inline-block;
padding-right: 2rem;
}
}
}
.recipe-item {
padding: 0 1rem;
&:first-child {
padding-left: 0;
}
> .recipe-value {
@include type-setting(1);
font-weight: bold;
}
> .recipe-text {
@include type-setting(-1);
}
& + & {
border-left: 1px solid recipe-color('border');
}
}
.recipe-stars {
line-height: $base-line-height * 2;
margin: $base-line-height * 1 0;
font-size: type-scale(0);
line-height: line-height(0) * 2;
}
.recipe-star {
height: auto;
width: auto;
display: inline-block;
&:before {
content: '\2605';
color: gold;
}
&.inactive:before {
color: gray;
}
}
.recipe-ratings {
color: gray;
margin: 0 0.5rem;
}
.recipe-button {
appearance: none;
background-color: recipe-color('primary');
color: white;
border: none;
height: $base-line-height * 2;
padding: 0 1rem;
border-radius: $base-line-height;
font-size: type-scale(-1);
&.transparent {
background-color: transparent;
color: gray;
}
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: recipe-color('background');
}
Raw
SassMeister-output.css
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,600);
.baseline-grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: 2;
opacity: 0;
transition: opacity 0.2s ease-out;
}
.baseline-grid:hover {
opacity: 1;
}
.guide {
margin-bottom: 6.25rem;
}
.guide, .guide:before, .guide:after {
height: 1.25rem;
width: 100%;
outline: 1px solid turquoise;
}
.guide:before, .guide:after {
content: '';
display: block;
position: absolute;
top: 200%;
}
.guide:after {
top: 400%;
}
.recipe-container {
font-family: Raleway, sans-serif;
font-weight: 400;
width: 750px;
height: 440px;
background-color: white;
overflow: hidden;
box-shadow: 0 0 5rem rgba(0, 0, 0, 0.1);
}
.recipe-container:hover > .baseline-grid {
opacity: 1;
}
.recipe-image {
position: absolute;
width: auto;
height: 100%;
left: 0;
top: 0;
}
.recipe-content {
position: absolute;
width: 50%;
height: 100%;
right: 0;
top: 0;
padding: 2.5rem 1rem;
}
.heading-2 {
font-size: 0.75rem;
line-height: 1.25rem;
font-weight: 400;
text-transform: uppercase;
margin: 0;
letter-spacing: 4px;
color: #999;
}
.heading-1 {
font-size: 1.778rem;
line-height: 2.5rem;
font-weight: 200;
text-transform: uppercase;
letter-spacing: 1px;
margin: 1.25rem 0;
}
.paragraph {
font-size: 1rem;
line-height: 1.25rem;
margin: 0 0 1.25rem 0;
}
.recipe-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recipe-list.meta > .recipe-item {
display: inline-block;
padding-right: 2rem;
}
.recipe-item {
padding: 0 1rem;
}
.recipe-item:first-child {
padding-left: 0;
}
.recipe-item > .recipe-value {
font-size: 1.333rem;
line-height: 2.5rem;
font-weight: bold;
}
.recipe-item > .recipe-text {
font-size: 0.75rem;
line-height: 1.25rem;
}
.recipe-item + .recipe-item {
border-left: 1px solid #ccc;
}
.recipe-stars {
line-height: 2.5rem;
margin: 1.25rem 0;
font-size: 1rem;
line-height: 2.5rem;
}
.recipe-star {
height: auto;
width: auto;
display: inline-block;
}
.recipe-star:before {
content: '\2605';
color: gold;
}
.recipe-star.inactive:before {
color: gray;
}
.recipe-ratings {
color: gray;
margin: 0 0.5rem;
}
.recipe-button {
appearance: none;
background-color: #5ad485;
color: white;
border: none;
height: 2.5rem;
padding: 0 1rem;
border-radius: 1.25rem;
font-size: 0.75rem;
}
.recipe-button.transparent {
background-color: transparent;
color: gray;
}
*, *:before, *:after {
box-sizing: border-box;
position: relative;
}
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e1e1e1;
}
Raw
SassMeister-rendered.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Grid</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
<!-- One Col -->
<div class="col one-col">
<p>One Col</p>
</div>
<!-- End One Col -->
<!-- Two Col -->
<div class="col two-col">
<p>Two Col</p>
</div>
<div class="col two-col-ng">
<p>Two Col</p>
</div>
<!-- End Two Col -->
<!-- Three Col -->
<div class="col three-col">
<p>Three Col</p>
</div>
<div class="col three-col">
<p>Three Col</p>
</div>
<div class="col three-col-ng">
<p>Three Col</p>
</div>
<!-- End Three Col -->
<!-- Four Col -->
<div class="col four-col">
<p>Four Col</p>
</div>
<div class="col four-col">
<p>Four Col</p>
</div>
<div class="col four-col">
<p>Four Col</p>
</div>
<div class="col four-col-ng">
<p>Four Col</p>
</div>
<!-- End Four Col -->
<!-- Five Col -->
<div class="col five-col">
<p>Five Col</p>
</div>
<div class="col five-col">
<p>Five Col</p>
</div>
<div class="col five-col">
<p>Five Col</p>
</div>
<div class="col five-col">
<p>Five Col</p>
</div>
<div class="col five-col-ng">
<p>Five Col</p>
</div>
<!-- End Five Col -->
<!-- Six Col -->
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col">
<p>Six Col</p>
</div>
<div class="col six-col-ng">
<p>Six Col</p>
</div>
<!-- End Six Col -->
<!-- Seven Col -->
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col">
<p>Seven Col</p>
</div>
<div class="col seven-col-ng">
<p>Seven Col</p>
</div>
<!-- End Seven Col -->
<!-- Eight Col -->
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col">
<p>Eight Col</p>
</div>
<div class="col eight-col-ng">
<p>Eight Col</p>
</div>
<!-- End Eight Col -->
<!-- Nine Col -->
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col">
<p>Nine Col</p>
</div>
<div class="col nine-col-ng">
<p>Nine Col</p>
</div>
<!-- End Nine Col -->
<!-- Ten Col -->
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col">
<p>Ten Col</p>
</div>
<div class="col ten-col-ng">
<p>Ten Col</p>
</div>
<!-- End Ten Col -->
<!-- Eleven Col -->
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col">
<p>Eleven Col</p>
</div>
<div class="col eleven-col-ng">
<p>Eleven Col</p>
</div>
<!-- End Eleven Col -->
<!-- Twelve Col -->
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col">
<p>Twelve Col</p>
</div>
<div class="col twelve-col-ng">
<p>Twelve Col</p>
</div>
<!-- End Twelve Col -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment