Skip to content

Instantly share code, notes, and snippets.

@blivesta

blivesta/sircus-gutter-system.html

Last active April 30, 2017 14:18
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 blivesta/c4e73071dfaf536f7683dd53f018fa5f to your computer and use it in GitHub Desktop.
Save blivesta/c4e73071dfaf536f7683dd53f018fa5f to your computer and use it in GitHub Desktop.
Download ZIP
Sircus Gutter System
Raw
sircus-gutter-system.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Gutter Control</title>
<style type="text/css">
/* debug */
* {
background-color: rgba(0, 230, 200, .2);
}
html,
body {
background-color: #fff;
}
body,
figure {
margin: 0;
}
img {
vertical-align: middle;
max-width: 100%;
height: auto;
display: inline-block;
}
.Container {
max-width: 40em;
margin: 0 auto;
padding-left: 24px;
padding-right: 24px;
padding-top: 24px;
padding-bottom: 24px;
}
.Grid {
display: flex;
justify-content: space-between;
margin-left: -12px;
margin-right: -12px;
}
.Grid-col {
padding-left: 12px;
padding-right: 12px;
}
.Card {
background-color: white;
padding-left: 12px;
padding-right: 12px;
padding-bottom: 1px;
}
.t-gutterHalf {
padding-left: 6px;
padding-right: 6px;
}
.t-gutter {
padding-left: 12px;
padding-right: 12px;
}
.t-gutter2x {
padding-left: 24px;
padding-right: 24px;
}
.t-gutter3x {
padding-left: 36px;
padding-right: 36px;
}
.t-gutterResetHalf {
margin-left: -6px;
margin-right: -6px;
}
.t-gutterReset {
margin-left: -12px;
margin-right: -12px;
}
.t-gutterReset2x {
margin-left: -24px;
margin-right: -24px;
}
.t-gutterReset3x {
margin-left: -36px;
margin-right: -36px;
}
</style>
</head>
<body>
<div class="Container">
<h1>Sircus Gutter System</h1>
<figure>
<img src="http://placehold.it/1280x240" />
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<figure class="t-gutterReset2x">
<img src="http://placehold.it/1280x240" />
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<hr class="t-gutterReset2x">
<div class="Grid">
<div class="Grid-col">
Grid-col
<div class="Card">
<figure class="t-gutterReset">
<img src="http://placehold.it/1280x240" />
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="Grid-col">
Grid-col
<div class="Card">
<figure class="t-gutterReset">
<img src="http://placehold.it/1280x240" />
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<div class="Grid">
<div class="Grid-col">
Grid-col
<div class="Card">
<figure class="t-gutterReset3x">
<img src="http://placehold.it/1280x240" />
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
<div class="Grid-col">
Grid-col
<div class="Card">
<figure class="t-gutterReset3x">
<img src="http://placehold.it/1280x240" />
</figure>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment