Skip to content

Instantly share code, notes, and snippets.

@pixelwhip
Created October 14, 2013 00:18
Show Gist options
  • Save pixelwhip/6968881 to your computer and use it in GitHub Desktop.
Save pixelwhip/6968881 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<header class="brand">
<img src="" class="brand-logo"/>
<h1 class="brand-name">The Sass Way</h1>
<p class="brand-price">5/6</p>
</header>
<div class="cover">
<h1 class="cover-title">The Marber Grid</h1>
<cite class="cover-author">Singularity GS</cite>
</div>
// ----
// Sass (v3.2.10)
// Compass (v0.13.alpha.4)
// ----
@import "singularitygs";
// Singularity Settings
$g-marber: 9.75 16.82 15.58 7.85 50;
$grids: $g-marber;
$gutters: 0;
$output: 'isolation';
%l--constrained {
max-width: 60em;
margin-left: auto;
margin-right: auto;
}
%bordered {
border-bottom: black 1px solid;
}
body { font-family: Helvetica, arial, sans-serif; }
//
// Branding
//
.brand {
@extend %l--constrained;
@extend %bordered;
}
.brand-logo {
@include grid-span(1, 1);
display: block;
background: red;
font-size: 1em;
}
.brand-name {
@include grid-span(2, 4);
background: red;
font-size: 1em;
margin-left: -100%;
}
.brand-price {
@include grid-span(2, 4);
margin-left: -100%;
}
//
// Cover
//
.cover {
@extend %l--constrained;
clear: both;
}
.cover-title {
@extend %bordered;
padding-left: column-span(2, 1);
border-bottom: black 1px solid;
}
.cover-author {
@extend %bordered;
display: block;
padding-left: column-span(3, 1);
}
.brand, .cover {
max-width: 60em;
margin-left: auto;
margin-right: auto;
}
.brand, .cover-title, .cover-author {
border-bottom: black 1px solid;
}
body {
font-family: Helvetica, arial, sans-serif;
}
.brand-logo {
width: 9.75%;
float: left;
margin-right: -100%;
margin-left: 0%;
clear: none;
display: block;
background: red;
font-size: 1em;
}
.brand-name {
width: 57.85%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
background: red;
font-size: 1em;
margin-left: -100%;
}
.brand-price {
width: 57.85%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
margin-left: -100%;
}
.cover {
clear: both;
}
.cover-title {
padding-left: 26.57%;
border-bottom: black 1px solid;
}
.cover-author {
display: block;
padding-left: 42.15%;
}
<header class="brand">
<img src="" class="brand-logo"/>
<h1 class="brand-name">The Sass Way</h1>
<p class="brand-price">5/6</p>
</header>
<div class="cover">
<h1 class="cover-title">The Marber Grid</h1>
<cite class="cover-author">Singularity GS</cite>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment