Skip to content

Instantly share code, notes, and snippets.

@morningtoast

morningtoast/7xgrid.html

Last active August 29, 2015 14:05
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save morningtoast/24173be6730f1b46a267 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save morningtoast/24173be6730f1b46a267 to your computer and use it in GitHub Desktop.
Download ZIP
7x grid
Raw
7xgrid.html
<html>
<head>
<title>Stylesheet Toggling</title>
<style>
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.row:after {content: ""; display: table; clear: both; }
.row .col { float: left; }
.row.row--padding > .col { padding:0 15px; }
.row.row--bottom { margin-bottom: 20px; }
.col1 { width: 14.2857%; }
.col2 { width: 28.5714%; }
.col3 { width: 42.8571%; }
.col4 { width: 57.1428%; }
.col5 { width: 71.4285%; }
.col6 { width: 85.7142857143%; }
.col7 { width: 100%; }
.col50 { width: 50%; }
.col33 { width: 33.3333333333%; }
@media screen and (max-width: 940px) {
.row.row--collapse-wide > .col { width:100%; float:none; }
}
@media screen and (max-width: 769px) {
.row.row--collapse-tablet > .col { width:100%; float:none; }
}
@media screen and (max-width: 660px) {
.row.row--collapse-medium > .col { width:100%; float:none; }
}
@media screen and (max-width: 550px) {
.row.row--collapse-small > .col { width:100%; float:none; }
}
@media screen and (max-width: 450px) {
.col { float:none; width:100%; }
}
/* ====== media ====== */
.mediabox, .mediabox__content {overflow:hidden; _overflow:visible; zoom:1;}
.mediabox__media {float:left; margin-right: 15px;}
@media screen and (max-width: 450px) {
.mediabox.mediabox--hidesmall .mediabox__media { display:none; }
}
/* forms */
.form small { color:#666; font-size:13px; font-weight:normal; display:block; }
.form label { display:block; margin-bottom: 10px; font-weight:bold; }
.form label input[type=text],
.form label select
{ display:block; margin-right:15px;}
.form .form__inline input[type=text],
.form .form__inline select
{ display:inline; }
.form .form__group { margin-bottom:10px; }
.form .form__group label { margin-bottom:0; }
.form .form__group input+label { display:inline; margin-right:15px; font-weight:normal; }
</style>
</head>
<body>
<div style="max-width:1120px">
<h1>Grid 7x</h1>
<h3>7x</h3>
<div class="row row--bottom row--padding">
<div class="col col1">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col1">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col1">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col1">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col1">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col1">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col1">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h3>50%, full</h3>
<div class="row row--bottom row--padding">
<div class="col col50">
1Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col50">
2Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h3>50% collapse wide</h3>
<div class="row row--bottom row--padding row--collapse-wide">
<div class="col col50">
1Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col50">
2Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h3>50% collapse tablet</h3>
<div class="row row--bottom row--padding row--collapse-tablet">
<div class="col col50">
1Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col50">
2Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h3>50% nested, collapse medium</h3>
<div class="row row--bottom row--collapse-medium">
<div class="col col50">
<div class="row row--padding ">
<div class="col col50">
1Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col50">
2Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
</div>
<div class="col col50">
<div class="row row--padding ">
<div class="col col50">
3Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col50">
4Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
</div>
</div>
<h3>33% collapse tablet</h3>
<div class="row row--bottom row--padding row--collapse-tablet">
<div class="col col33">
1Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col33">
2Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col33">
3Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h3>Unbalanced collapse medium</h3>
<div class="row row--bottom row--padding row--collapse-medium">
<div class="col col4">
1Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col3">
2Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h3>Unbalanced collapse medium</h3>
<div class="row row--bottom row--padding row--collapse-medium">
<div class="col col2">
1Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
<div class="col col5">
2Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h1>Media box</h1>
<div class="mediabox">
<a href="http://morningtoast.com" class="mediabox__media">
<img src="http://placehold.it/64x64" alt="me" />
</a>
<div class="mediabox__content">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h3>Mediabox, hide media on small</h3>
<div class="mediabox mediabox--hidesmall">
<a href="http://morningtoast.com" class="mediabox__media">
<img src="http://placehold.it/64x64" alt="me" />
</a>
<div class="mediabox__content">
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut luctus, magna quis molestie iaculis, ligula turpis aliquam enim, eu facilisis ex quam nec elit.
</div>
</div>
<h1>Form</h1>
<form class="form">
<label for="input3">First name
<input type="text" id="input3" size="35" />
<small>This is helper text</small>
</label>
<label for="input4">Last name
<input type="text" id="input4" size="35" />
<small>This is helper text</small>
</label>
<label for="input4">Full name
<div class="form__inline"><input type="text" id="input4" size="35" /> <input type="text" id="input8" size="35" /></div>
<small>This is helper text</small>
</label>
<label for="input5">Pick one
<select id="input5">
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
</select>
<small>This is helper text</small>
</label>
<div class="form__group">
<label>Pick one</label>
<input type="radio" id="radio11" name="radio1"> <label for="radio11">Red</label>
<input type="radio" id="radio12" name="radio1"> <label for="radio12">Blue</label>
<input type="radio" id="radio13" name="radio1"> <label for="radio13">Green</label>
</div>
<div class="form__group">
<label>Pick one</label>
<input type="checkbox" id="radio14" name="radio1"> <label for="radio14">Red</label>
<input type="checkbox" id="radio15" name="radio1"> <label for="radio15">Blue</label>
<input type="checkbox" id="radio16" name="radio1"> <label for="radio16">Green</label>
</div>
</form>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment