Skip to content

Instantly share code, notes, and snippets.

@ianhobbs
Created March 22, 2014 10:48
Show Gist options
  • Save ianhobbs/9705099 to your computer and use it in GitHub Desktop.
Save ianhobbs/9705099 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<body>
<div class="page">
<header>Hello i'm your header</header>
<div class="main">
<article>article</article>
<div class="right">
<date><h2>1298</h2></date>
<div class="text"><h1>my heading</h1></div>
<div class="pic">A picture here</div>
<div class="body"><p>yaddaa tagga</p></div>
</div>
</div>
</div>
<footer>footer</footer>
</body>
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Susy (v2.1.1)
// ----
@import "susy"
div, nav, article, header
background: RGBA(230,12,129,0.3)
$total-columns: 12
$neutBlack: #4c4c4c
$susy: (columns: 12, gutters: 0.3,math: fluid,output: float,gutter-position: inside,)
$show-column-grid-backgrounds : true
div.page
@include container (960px)
@include border-box-sizing
header
@include span(full)
background: rgba(120,120,59, 0.1)
height: 40px
div.main
@include span(full)
article
@include span(8 of 12)
div.right
@include span(3 of 12)
@include push(1)
date
@include span(1 of 4)
div.text
@include span( 3 of 4)
div.pic
@include span(1 of 4)
div.body
@include span(2 of 4)
div, nav, article, header {
background: RGBA(230, 12, 129, 0.3);
}
div.page {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
div.page::after {
content: " ";
display: block;
clear: both;
}
div.page *, div.page *::before, div.page *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.page header {
width: 100%;
float: left;
padding-left: 0.96154%;
padding-right: 0.96154%;
background: rgba(120, 120, 59, 0.1);
height: 40px;
}
div.page div.main {
width: 100%;
float: left;
padding-left: 0.96154%;
padding-right: 0.96154%;
}
div.page div.main article {
width: 66.66667%;
float: left;
padding-left: 0.96154%;
padding-right: 0.96154%;
}
div.page div.main div.right {
width: 25%;
float: left;
padding-left: 0.96154%;
padding-right: 0.96154%;
margin-left: 8.33333%;
}
div.page div.main div.right date {
width: 25%;
float: left;
padding-left: 2.88462%;
padding-right: 2.88462%;
}
div.page div.main div.right div.text {
width: 75%;
float: left;
padding-left: 2.88462%;
padding-right: 2.88462%;
}
div.page div.main div.right div.pic {
width: 25%;
float: left;
padding-left: 2.88462%;
padding-right: 2.88462%;
}
div.page div.main div.right div.body {
width: 50%;
float: left;
padding-left: 2.88462%;
padding-right: 2.88462%;
}
<body>
<div class="page">
<header>Hello i'm your header</header>
<div class="main">
<article>article</article>
<div class="right">
<date><h2>1298</h2></date>
<div class="text"><h1>my heading</h1></div>
<div class="pic">A picture here</div>
<div class="body"><p>yaddaa tagga</p></div>
</div>
</div>
</div>
<footer>footer</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment