Skip to content

Instantly share code, notes, and snippets.

@yumyo

yumyo/SassMeister-input-HTML.html

Created October 15, 2015 12:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yumyo/de24193ceb470eba9460 to your computer and use it in GitHub Desktop.
Save yumyo/de24193ceb470eba9460 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>General Asymmetric Grid</h1>
<div id="asymmetric-general">&nbsp;</div>
<h1>Compound Grid</h1>
<div id="compound">&nbsp;</div>
<h1>Ratio Grid <em>(ea. col is double the width of previous)</em></h1>
<div id="ratio">&nbsp;</div>
<h1>Ratio Grid <em>(using the Golden Ratio)</em></h1>
<div id="golden">&nbsp;</div>
<h1>Spiral Grid</h1>
<div id="golden-spiral">@TODO: Couldn't actually get this to work...</div>
<h1>Snap Grid</h1>
<div id="snap-external">A standard symmetric grid of 10 columns.</div>
<div id="snap">This is a snap grid, which makes sure that the gutters actually line up. Make sure the sum of the relative column widths equals the same number of columns in the symmetric grid; otherwise, it won't line up regardless.</div>
<div id="not-snap">This uses the same column widths in a regular custom asymmetric grid, without snap, and the gutters don't line up.</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Singularity Extras (v1.0.0)
// ----
/**
* Examples for Presentation: Advanced Responsive Web Design
* Part 5A: Asymmetric Grid Samples with Singularity Extras
* For More Information: http://github.com/tsmith512/arwd
*/
@import "compass";
@import "singularitygs";
@import "singularity-extras";
// To see this grid using background-grid, we need debugging options:
@include sgs-change('debug', true);
// Each example creates its own grid override using layout(), but
// we still need to specify a gutter size.
@include add-gutter(1/3);
$grid-color: #ddd;
// Box sizing: border box all the things!
*, *:before, *:after {
@include box-sizing('border-box');
}
@include layout(5 2 3 3 7 9) {
#asymmetric-general {
@extend %container;
@include background-grid($color: $grid-color);
}
}
@include layout(compound(3, 5)) {
#compound {
@extend %container;
@include background-grid($color: $grid-color);
}
}
@include layout(ratio(2, 4, 'small')) {
#ratio {
@extend %container;
@include background-grid($color: $grid-color);
}
}
@include layout(ratio($golden, 4, 'large')) {
#golden {
@extend %container;
@include background-grid($color: $grid-color);
}
}
// @include layout(ratio-spiral(5, $golden)) {
// @TODO: Can't get this to actually work.
// Error is "Undefined operation: "09.01699 2.12862 3.44419 23.60680.33333-0.33333/71.15373 times 100%"."
#golden-spiral {
@extend %container;
// @include background-grid($color: $grid-color);
}
// }
@include layout(10, 1/3) {
#snap-external {
@extend %container;
@include background-grid($color: $grid-color);
}
@include layout(snap(1 2 5 2, 1/3)) {
#snap {
@extend %container;
@include background-grid($color: $grid-color);
}
}
@include layout(1 2 5 2) {
#not-snap {
@extend %container;
@include background-grid($color: $grid-color);
}
}
}
%container {
@include clearfix; // Have container clear floats properly
max-width: 960px; // Outer Container
margin: 0 auto; // Center Container
padding-bottom: 10em; // For space to see
border: 1px solid #333;
}
h1 {
max-width: 960px;
margin: 2em auto 0.25em auto;
}
Raw
SassMeister-output.css
/**
* Examples for Presentation: Advanced Responsive Web Design
* Part 5A: Asymmetric Grid Samples with Singularity Extras
* For More Information: http://github.com/tsmith512/arwd
*/
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#asymmetric-general {
background-image: linear-gradient(to right, #ddd 0%, #ddd 16.30435%, #e5e5e5 16.30435%, #e5e5e5 17.3913%, #ddd 17.3913%, #ddd 23.91304%, #e5e5e5 23.91304%, #e5e5e5 25.0%, #ddd 25.0%, #ddd 34.78261%, #e5e5e5 34.78261%, #e5e5e5 35.86957%, #ddd 35.86957%, #ddd 45.65217%, #e5e5e5 45.65217%, #e5e5e5 46.73913%, #ddd 46.73913%, #ddd 69.56522%, #e5e5e5 69.56522%, #e5e5e5 70.65217%, #ddd 70.65217%, #ddd);
}
#compound {
background-image: linear-gradient(to right, #ddd 0%, #ddd 17.64706%, #e5e5e5 17.64706%, #e5e5e5 19.60784%, #ddd 19.60784%, #ddd 31.37255%, #e5e5e5 31.37255%, #e5e5e5 33.33333%, #ddd 33.33333%, #ddd 39.21569%, #e5e5e5 39.21569%, #e5e5e5 41.17647%, #ddd 41.17647%, #ddd 58.82353%, #e5e5e5 58.82353%, #e5e5e5 60.78431%, #ddd 60.78431%, #ddd 66.66667%, #e5e5e5 66.66667%, #e5e5e5 68.62745%, #ddd 68.62745%, #ddd 80.39216%, #e5e5e5 80.39216%, #e5e5e5 82.35294%, #ddd 82.35294%, #ddd);
}
#ratio {
background-image: linear-gradient(to right, #ddd 0%, #ddd 6.45161%, #e5e5e5 6.45161%, #e5e5e5 7.52688%, #ddd 7.52688%, #ddd 20.43011%, #e5e5e5 20.43011%, #e5e5e5 21.50538%, #ddd 21.50538%, #ddd 47.31183%, #e5e5e5 47.31183%, #e5e5e5 48.3871%, #ddd 48.3871%, #ddd);
}
#golden {
background-image: linear-gradient(to right, #ddd 0%, #ddd 41.98213%, #e5e5e5 41.98213%, #e5e5e5 44.02383%, #ddd 44.02383%, #ddd 69.97021%, #e5e5e5 69.97021%, #e5e5e5 72.01192%, #ddd 72.01192%, #ddd 88.04766%, #e5e5e5 88.04766%, #e5e5e5 90.08936%, #ddd 90.08936%, #ddd);
}
#snap-external {
background-image: linear-gradient(to right, #ddd 0%, #ddd 7.69231%, #e5e5e5 7.69231%, #e5e5e5 10.25641%, #ddd 10.25641%, #ddd 17.94872%, #e5e5e5 17.94872%, #e5e5e5 20.51282%, #ddd 20.51282%, #ddd 28.20513%, #e5e5e5 28.20513%, #e5e5e5 30.76923%, #ddd 30.76923%, #ddd 38.46154%, #e5e5e5 38.46154%, #e5e5e5 41.02564%, #ddd 41.02564%, #ddd 48.71795%, #e5e5e5 48.71795%, #e5e5e5 51.28205%, #ddd 51.28205%, #ddd 58.97436%, #e5e5e5 58.97436%, #e5e5e5 61.53846%, #ddd 61.53846%, #ddd 69.23077%, #e5e5e5 69.23077%, #e5e5e5 71.79487%, #ddd 71.79487%, #ddd 79.48718%, #e5e5e5 79.48718%, #e5e5e5 82.05128%, #ddd 82.05128%, #ddd 89.74359%, #e5e5e5 89.74359%, #e5e5e5 92.30769%, #ddd 92.30769%, #ddd);
}
#snap {
background-image: linear-gradient(to right, #ddd 0%, #ddd 7.69231%, #e5e5e5 7.69231%, #e5e5e5 10.25641%, #ddd 10.25641%, #ddd 28.20513%, #e5e5e5 28.20513%, #e5e5e5 30.76923%, #ddd 30.76923%, #ddd 79.48718%, #e5e5e5 79.48718%, #e5e5e5 82.05128%, #ddd 82.05128%, #ddd);
}
#not-snap {
background-image: linear-gradient(to right, #ddd 0%, #ddd 9.09091%, #e5e5e5 9.09091%, #e5e5e5 12.12121%, #ddd 12.12121%, #ddd 30.30303%, #e5e5e5 30.30303%, #e5e5e5 33.33333%, #ddd 33.33333%, #ddd 78.78788%, #e5e5e5 78.78788%, #e5e5e5 81.81818%, #ddd 81.81818%, #ddd);
}
#asymmetric-general, #compound, #ratio, #golden, #golden-spiral, #snap-external, #snap, #not-snap {
overflow: hidden;
*zoom: 1;
max-width: 960px;
margin: 0 auto;
padding-bottom: 10em;
border: 1px solid #333;
}
h1 {
max-width: 960px;
margin: 2em auto 0.25em auto;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>General Asymmetric Grid</h1>
<div id="asymmetric-general">&nbsp;</div>
<h1>Compound Grid</h1>
<div id="compound">&nbsp;</div>
<h1>Ratio Grid <em>(ea. col is double the width of previous)</em></h1>
<div id="ratio">&nbsp;</div>
<h1>Ratio Grid <em>(using the Golden Ratio)</em></h1>
<div id="golden">&nbsp;</div>
<h1>Spiral Grid</h1>
<div id="golden-spiral">@TODO: Couldn't actually get this to work...</div>
<h1>Snap Grid</h1>
<div id="snap-external">A standard symmetric grid of 10 columns.</div>
<div id="snap">This is a snap grid, which makes sure that the gutters actually line up. Make sure the sum of the relative column widths equals the same number of columns in the symmetric grid; otherwise, it won't line up regardless.</div>
<div id="not-snap">This uses the same column widths in a regular custom asymmetric grid, without snap, and the gutters don't line up.</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment