Skip to content

Instantly share code, notes, and snippets.

@mrDarcyMurphy

mrDarcyMurphy/index.html

Created March 5, 2012 19:04
Show Gist options
  • Save mrDarcyMurphy/1980392 to your computer and use it in GitHub Desktop.
Save mrDarcyMurphy/1980392 to your computer and use it in GitHub Desktop.
Download ZIP
OOCSS Inspired Responsive Framework
Raw
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<title>OOCSS Inspired Responsive Framework</title>
<link rel="stylesheet" href="./structure.css" />
</head>
<body>
<div data-role="page" class="row">
<div class="column x100">
<section class="row collapse-768">
<header class="siteHeader">
<h1>
<img src="/img/header.jpg" alt="Site Name" />
</h1>
</header>
<aside class="column x25 show-over-768">
<menu>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</menu>
</aside>
<article class="column x75">
<section>
<header class="row">
<h1 class="column x100">Layout Foundations</h1>
</header>
<section class="row">
<div class="column x100">
<div class="element">
<p>100</p>
</div>
</div>
</section>
<section class="row">
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
<div class="column x75">
<div class="element">
<p>75</p>
</div>
</div>
</section>
<section class="row">
<div class="column x33">
<div class="element">
<p>33</p>
</div>
</div>
<div class="column x66">
<div class="element">
<p>66</p>
</div>
</div>
</section>
<section class="row">
<div class="column x50">
<div class="element">
<p>50</p>
</div>
</div>
<div class="column x50">
<div class="element">
<p>50</p>
</div>
</div>
</section>
<section class="row">
<div class="column x66">
<div class="element">
<p>66</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>33</p>
</div>
</div>
</section>
<section class="row">
<div class="column x75">
<div class="element">
<p>75</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
</section>
<section class="row">
<div class="column x33">
<div class="element">
<p>33</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>33</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>33</p>
</div>
</div>
</section>
<section class="row">
<div class="column x50">
<div class="element">
<p>50</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
</section>
<section class="row">
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
<div class="column x50">
<div class="element">
<p>50</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
</section>
<section class="row">
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
<div class="column x50">
<div class="element">
<p>50</p>
</div>
</div>
</section>
<section class="row">
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>25</p>
</div>
</div>
</section>
</section>
<section>
<h1>Responsive Mutations</h1>
<section class="row collapse-480">
<div class="column x33">
<div class="element">
<p>4</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>8</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>0</p>
</div>
</div>
</section>
<section class="row collapse-600">
<div class="column x33">
<div class="element">
<p>6</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>0</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>0</p>
</div>
</div>
</section>
<section class="row collapse-768">
<div class="column x33">
<div class="element">
<p>7</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>6</p>
</div>
</div>
<div class="column x33">
<div class="element">
<p>8</p>
</div>
</div>
</section>
<section class="row collapse-1024">
<div class="column x25">
<div class="element">
<p>1</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>0</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>2</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>4</p>
</div>
</div>
</section>
<section class="row collapse">
<div class="column x25">
<div class="element">
<p>co</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>ll</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>ap</p>
</div>
</div>
<div class="column x25">
<div class="element">
<p>se</p>
</div>
</div>
</section>
</section>
<section class="row">
<h1>Show When&hellip;</h1>
<div class="column x50">
<p>Show Under&hellip;</p>
<ol>
<li class="show-under-480">480</li>
<li class="show-under-600">600</li>
<li class="show-under-768">768</li>
<li class="show-under-1024">1024</li>
</ol>
</div>
<div class="column x50">
<p>Show Over&hellip;</p>
<ol>
<li class="show-over-480">480</li>
<li class="show-over-600">600</li>
<li class="show-over-768">768</li>
<li class="show-over-1024">1024</li>
</ol>
</div>
</section>
</article>
</section>
</div>
</div>
</body>
</html>
Raw
structure.css
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: none;
margin: 0;
min-height: 100%;
}
div[data-role="page"] {
margin: 0;
max-width: 960px;
overflow: hidden;
}
@media screen and (min-width: 960px) {
div[data-role="page"] {
margin: 0 auto;
}
}
img {
display: block;
width: 100%;
}
.row {
*zoom: 1;
display: block;
margin: 0;
padding: 0;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: 100%;
}
.x100 {
width: 100%;
}
.x75 {
width: 75%;
}
.x66 {
width: 66.667%;
}
.x50 {
width: 50%;
}
.x33 {
width: 33.333%;
}
.x25 {
width: 25%;
}
.x20 {
width: 20%;
}
.element {
margin: 0 4px 0 0;
}
.column:first-child .element {
margin-left: 4px;
}
.column:last-child .element {
margin-right: 4px;
}
.row.collapse .column {
float: none;
width: 100%;
}
@media screen and (max-width:1024px) {
.row.collapse-1024 > .column {
float: none;
width: 100%;
}
.show-over-1024 {
display: none;
}
}
@media screen and (max-width:768px) {
.row.collapse-768 > .column {
float: none;
width: 100%;
}
.show-over-768 {
display: none;
}
}
@media screen and (max-width:600px) {
.row.collapse-600 > .column {
float: none;
width: 100%;
}
.show-over-600 {
display: none;
}
}
@media screen and (max-width:480px) {
.row.collapse-480 > .column {
float: none;
width: 100%;
}
.show-over-480 {
display: none;
}
}
@media screen and (min-width:1025px) {
.show-under-1024 {
display: none;
}
}
@media screen and (min-width:769px) {
.show-under-768 {
display: none;
}
}
@media screen and (min-width:601px) {
.show-under-600 {
display: none;
}
}
@media screen and (min-width:481px) {
.show-under-480 {
display: none;
}
}
/* Media Blocks */
.media {
margin-bottom: 0;
overflow: hidden;
*overflow: visible;
zoom: 1;
}
.media, .bd {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.media .img {
float: left;
margin-right: 8px;
}
.media .img img {
display: block;
}
.media .imgExt {
float: right;
margin-left: 8px;
}
/* Useless illustrative styles. */
.row {
background: rgba(0, 143, 88, 0.1) #008f58;
}
.column {
background: rgba(0, 85, 142, 0.1);
}
.element {
background: rgba(84, 30, 141, 0.1);
}
.element > p:only-child {
text-align: center;
}
Raw
structure.scss
@import "compass/utilities/general/clearfix";
// Basics
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: none;
margin: 0;
min-height: 100%;
}
div[data-role="page"] {
margin: 0;
max-width: 960px;
overflow: hidden;
@media screen and (min-width: 960px) {
margin: 0 auto;
}
}
img {
display: block;
width: 100%;
}
// Layout Foundations
.row {
@include pie-clearfix;
display: block;
margin: 0;
padding: 0;
}
.column {
display: inline-block;
float: left;
margin: 0;
padding: 0;
width: 100%;
}
.x100 { width: 100%; }
.x75 { width: 75%; }
.x66 { width: 66.667%; }
.x50 { width: 50%; }
.x33 { width: 33.333%; }
.x25 { width: 25%; }
.x20 { width: 20%; }
.element { margin: 0 4px 0 0; }
.column:first-child .element { margin-left: 4px; }
.column:last-child .element { margin-right: 4px; }
// Responsive Mutations
.row.collapse .column { float: none; width: 100%; }
@media screen and (max-width:1024px) {
.row.collapse-1024 > .column { float: none; width: 100%; }
.show-over-1024 { display: none; }
}
@media screen and (max-width:768px) {
.row.collapse-768 > .column { float: none; width: 100%; }
.show-over-768 { display: none; }
}
@media screen and (max-width:600px) {
.row.collapse-600 > .column { float: none; width: 100%; }
.show-over-600 { display: none; }
}
@media screen and (max-width:480px) {
.row.collapse-480 > .column { float: none; width: 100%; }
.show-over-480 { display: none; }
}
@media screen and (min-width:1025px) {
.show-under-1024 { display: none; }
}
@media screen and (min-width:769px) {
.show-under-768 { display: none; }
}
@media screen and (min-width:601px) {
.show-under-600 { display: none; }
}
@media screen and (min-width:481px) {
.show-under-480 { display: none; }
}
// Media Blocks
.media { margin-bottom: 0; overflow:hidden; *overflow:visible; zoom:1; }
.media, .bd { overflow:hidden; _overflow:visible; zoom:1; }
.media .img { float:left; margin-right: 8px; }
.media .img img { display:block; }
.media .imgExt { float:right; margin-left: 8px; }
/* Useless illustrative styles. */
.row { background: transparentize(#008f58,0.9) #008f58; }
.column { background: transparentize(#00558e,0.9); }
.element { background: transparentize(#541e8d,0.9); }
.element > p:only-child { text-align: center; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment