Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.html

Created March 21, 2014 19:37
Show Gist options
  • Save starryeyez024/9694458 to your computer and use it in GitHub Desktop.
Save starryeyez024/9694458 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<div class="container">
<div class="row">
<div class="right">
right<br/>
right<br/>
right<br/>
right<br/>
right<br/>
</div>
<div class="left">
Left<br/>
Left<br/>
Left<br/>
Left<br/>
Left<br/>
</div>
</div>
</div>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.0)
// ----
@import "breakpoint";
@import "compass";
@import "singularitygs";
/////////////////////////////
// Set legacy support
//
// If you need support for IE6 or IE7, you should install the Box Sizing polyfill.
// In your project's folder from the command line, type the following:
// compass install singularitygs/box-sizing
//////////////////////////////
$legacy-support-for-ie6: false;
$legacy-support-for-ie7: false;
$legacy-support-for-mozilla: false;
//////////////////////////////
// Import Base
//////////////////////////////
$grids: 4;
$grids: add-grid(12 at 768px);
$gutters: 1/3;
* {
box-sizing: border-box;
}
body{
padding: 0;
margin: 0;
background: green;
}
.container{
max-width: 960px;
@include background-grid;
margin: 0 auto;
@include clearfix;
background: white;
}
.right {
border: 1px solid red;
@include grid-span(4);
@include breakpoint(768px) {
@include grid-span(5,8);
}
@include breakpoint(960px) {
@include grid-span(4,9);
}
}
.left {
border: 1px solid red;
@include grid-span(4);
@include breakpoint(768px) {
@include grid-span(6,2);
}
@include breakpoint(960px) {
@include grid-span(7,2);
}
}
.button{
@include grid-span(2);
background: white;
height: 30px;
}
.row{
@include clearfix;
}
.ad{
background: rgba(0,0,255,0.5);
width: 300px;
height: 250px;
margin: 0 auto;
border: 2px dotted blue;
&:before{
content: "300x250"
}
}
.pencil-ad{
background: rgba(0,0,255,0.5);
border: 2px dotted blue;
height: 50px;
margin: 10px auto;
@include breakpoint(300px) {
width: 300px;
&:before{
content: "300"
}
}
@include breakpoint(500px) {
width: 500px;
&:before{
content: "500"
}
}
@include breakpoint(768px) {
width: 768px;
&:before{
content: "768"
}
}
@include breakpoint(960px) {
width: 960px;
&:before{
content: "960"
}
}
}
section{
@include clearfix;
}
Raw
SassMeister-output.css
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background: green;
}
.container {
max-width: 960px;
margin: 0 auto;
overflow: hidden;
*zoom: 1;
background: white;
}
.right {
border: 1px solid red;
width: 32.20339%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
@media (min-width: 768px) {
.right {
width: 40.67797%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
}
@media (min-width: 960px) {
.right {
width: 32.20339%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
}
.left {
border: 1px solid red;
width: 32.20339%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
@media (min-width: 768px) {
.left {
width: 49.15254%;
float: left;
margin-right: -100%;
margin-left: 8.47458%;
clear: none;
}
}
@media (min-width: 960px) {
.left {
width: 57.62712%;
float: left;
margin-right: -100%;
margin-left: 8.47458%;
clear: none;
}
}
.button {
width: 15.25424%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
background: white;
height: 30px;
}
.row {
overflow: hidden;
*zoom: 1;
}
.ad {
background: rgba(0, 0, 255, 0.5);
width: 300px;
height: 250px;
margin: 0 auto;
border: 2px dotted blue;
}
.ad:before {
content: "300x250";
}
.pencil-ad {
background: rgba(0, 0, 255, 0.5);
border: 2px dotted blue;
height: 50px;
margin: 10px auto;
}
@media (min-width: 300px) {
.pencil-ad {
width: 300px;
}
.pencil-ad:before {
content: "300";
}
}
@media (min-width: 500px) {
.pencil-ad {
width: 500px;
}
.pencil-ad:before {
content: "500";
}
}
@media (min-width: 768px) {
.pencil-ad {
width: 768px;
}
.pencil-ad:before {
content: "768";
}
}
@media (min-width: 960px) {
.pencil-ad {
width: 960px;
}
.pencil-ad:before {
content: "960";
}
}
section {
overflow: hidden;
*zoom: 1;
}
Raw
SassMeister-rendered.html
<body>
<div class="container">
<div class="row">
<div class="right">
right<br/>
right<br/>
right<br/>
right<br/>
right<br/>
</div>
<div class="left">
Left<br/>
Left<br/>
Left<br/>
Left<br/>
Left<br/>
</div>
</div>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment