Skip to content

Instantly share code, notes, and snippets.

@vinayraghu

vinayraghu/SassMeister-input-HTML.html

Created March 14, 2014 06:26
Show Gist options
  • Save vinayraghu/9542982 to your computer and use it in GitHub Desktop.
Save vinayraghu/9542982 to your computer and use it in GitHub Desktop.
Download ZIP
Ratio based grids by Singularity
Raw
SassMeister-input-HTML.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="container">
<section class="primary-sidebar"></section>
<section class="secondary-sidebar"></section>
<section class="content-area"></section>
<aside class="informational-sidebar"></aside>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.2)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.2)
// Singularity.gs (v1.2.0)
// Singularity Extras (v1.0.0.alpha.3)
// ----
@import "breakpoint";
@import "singularitygs";
@import "singularity-extras/generators/ratio";
@import "singularity-extras/generators/snap";
@import "singularity-extras/outputs";
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
div, aside, section {
height: 100vh;
margin: 0;
padding: 0;
}
@include add-grid(1 1.33 7.478 1);
@include add-gutter(1/7.478);
.primary-sidebar {
background: #AF4657;
@include grid-span(1,1);
}
.secondary-sidebar {
background: #51A898;
@include grid-span(1,2);
}
.content-area {
background: #00D89D;
@include grid-span(1,3);
}
.informational-sidebar {
background: #5A8395;
@include grid-span(1,4);
}
Raw
SassMeister-output.css
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
div, aside, section {
height: 100vh;
margin: 0;
padding: 0;
}
.primary-sidebar {
background: #AF4657;
width: 8.9212617408%;
float: left;
margin-right: -100%;
margin-left: 0;
clear: none;
}
.secondary-sidebar {
background: #51A898;
width: 11.8652781153%;
float: left;
margin-right: -100%;
margin-left: 10.1142627759%;
clear: none;
}
.content-area {
background: #00D89D;
width: 66.7131952977%;
float: left;
margin-right: -100%;
margin-left: 23.1725419264%;
clear: none;
}
.informational-sidebar {
background: #5A8395;
width: 8.9212617408%;
float: right;
margin-left: 0;
margin-right: 0;
clear: none;
}
Raw
SassMeister-rendered.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div class="container">
<section class="primary-sidebar"></section>
<section class="secondary-sidebar"></section>
<section class="content-area"></section>
<aside class="informational-sidebar"></aside>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment