Skip to content

Instantly share code, notes, and snippets.

@branquito

branquito/app.css

Created September 1, 2014 11:53
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 branquito/e008fb873b8656e8605f to your computer and use it in GitHub Desktop.
Save branquito/e008fb873b8656e8605f to your computer and use it in GitHub Desktop.
Download ZIP
susy2 grid example
Raw
app.css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
.container {
max-width: 1140px;
margin-left: 0;
margin-right: auto;
background-image: linear-gradient(to right, rgba(0, 128, 0, 0.25), rgba(0, 204, 0, 0.25) 88.88889%, transparent 88.88889%);
background-size: 8.41121%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
font-size: small; }
.container:after {
content: " ";
display: block;
clear: both; }
.one {
width: 66.35514%;
float: left;
margin-left: 16.82243%;
margin-right: -100%;
height: 200px;
background-color: blue;
color: white; }
.buttons a {
width: 15.49296%;
float: left;
margin-left: 8.4507%;
margin-right: -100%; }
.notice {
clear: both;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: yellow; }
.notice {
padding: 5px 8px; }
em {
background-color: yellow;
color: black;
font-weight: bold; }
Raw
app.scss
@import 'susy';
$susy: (
flow: ltr,
output: float,
math: fluid,
// column-width: false,
container: 1140px,
container-position: left,
last-flow: to,
columns: 12,
gutters: 1/8,
gutter-position: after,
global-box-sizing: border-box,
debug: (
image: show,
color: rgba(green, .25),
output: background,
toggle: top right
),
);
@include global-box-sizing(border-box);
.container {
@include container;
font-size: small;
}
.one {
@include span(isolate 8 at 3); // can be narrow(default), wide & wider
height: 200px;
background-color: blue;
color: white;
}
.buttons a {
// @include break;
@include span(isolate 2 at 2);
}
.notice {
@include full;
background-color: yellow;
}
.notice {
padding: 5px 8px;
}
em {
background-color: yellow;
color: black;
font-weight: bold;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Working with Susy 2 Grid Layouts</title>
<link rel="stylesheet" href="css/app.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
<div class="notice"><h3>Susy is GREAT.. But really..!</h3></div>
<div class="container">
<div class="one"><strong>1</strong><br />
@include span(8)<br />
@include prefix(1) <em>//padding</em><br />
</div>
<div class="buttons">
<a href="#" class="pure-button">A Pure Button</a>
</div>
<div class="notice">this is some notice</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment