Skip to content

Instantly share code, notes, and snippets.

@guyroutledge

guyroutledge/index.html

Created June 25, 2012 10:54
Show Gist options
  • Save guyroutledge/2987939 to your computer and use it in GitHub Desktop.
Save guyroutledge/2987939 to your computer and use it in GitHub Desktop.
Download ZIP
Adding 'stacked' modifier to CSS modules via @CodePen.io
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen &middot; A Pen by guyroutledge</title>
<style>
/* reset */
* {
margin: 0;
padding: 0;
}
ul, ol {
padding-left: 0;
}
h1, h2, h3 {
margin-bottom: 1em;
}
body {
padding: 1em;
}
p {
margin-bottom: 1em;
}
/* imgblock aka mediablock */
.imgblock .img {
float: left;
margin: 0 1em 0 0;
}
.imgblock .img img {
display: block;
}
.imgblock .content {
display: table-cell;
/* new block formatting context */
width: 10000px;
/* avoid shrink-wrap of table-cell */
*width: auto;
/* override for old IE */
*zoom: 1;
/* legacy block formatting context */
}
.imgblock.flipped .img {
float: right;
margin: 0 0 0 1em;
}
/* nav module */
.nav {
list-style: none;
margin: 0;
}
.nav li {
float: left;
display: block;
}
/* stacked modifier */
.stacked .content, .stacked li {
clear: both;
display: block;
}
.stacked .img {
margin-bottom: 1em;
}
/* skin for example sections */
.wrapper {
width: 50%;
}
.example {
margin-bottom: 1em;
padding: 1em;
background: #f4f4f4;
border: 1px solid #999;
border-radius: 10px;
}
/* skin for nav items */
.main-nav li {
padding: 0.5em 1em;
background: #eee;
border: 1px solid #ccc;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #999;
text-align: center;
}
.secondary-nav li {
width: 50%;
text-align: left;
}
/* clearfix */
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
*zoom: 1;
/* For IE 6/7 (trigger hasLayout) */
}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
window.alert = function(){};
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
</head>
<body>
<h2>adding <code>class="stacked"</code> to multiple modules</h2>
<section class="example wrapper">
<h3><code>.imgblock</code> module</h3>
<div class="imgblock group">
<img class="img" src="http://placekitten.com/100/100">
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
</section>
<section class="example wrapper">
<h3><code>.imgblock .flipped</code> with image to the right</h3>
<div class="imgblock flipped group">
<img class="img" src="http://placekitten.com/100/100">
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
</section>
<section class="example wrapper">
<h3><code>.imgblock .stacked</code> with content below image</h3>
<div class="imgblock stacked block group">
<img class="img" src="http://placekitten.com/200/200">
<div class="content stacked">
<p>Pellentesque habitant morbi</p>
</div>
</div>
</section>
<section class="example wrapper">
<h3><code>.nav</code> module to make a horizontal list</h3>
<ul class="nav main-nav block group">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
</ul>
</section>
<section class="example wrapper">
<h3><code>.nav .stacked</code> to make a stacked list</h3>
<ul class="nav stacked main-nav secondary-nav block group">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
</ul>
</section>
<script src="http://codepen.io/javascripts/libs/modernizr.js"></script>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/guyroutledge/pen/3/15">Edit this Pen</a>
</div>
</body>
</html>
Raw
markup.html
<h2>adding <code>class="stacked"</code> to multiple modules</h2>
<section class="example wrapper">
<h3><code>.imgblock</code> module</h3>
<div class="imgblock group">
<img class="img" src="http://placekitten.com/100/100">
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
</section>
<section class="example wrapper">
<h3><code>.imgblock .flipped</code> with image to the right</h3>
<div class="imgblock flipped group">
<img class="img" src="http://placekitten.com/100/100">
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</p>
</div>
</div>
</section>
<section class="example wrapper">
<h3><code>.imgblock .stacked</code> with content below image</h3>
<div class="imgblock stacked block group">
<img class="img" src="http://placekitten.com/200/200">
<div class="content stacked">
<p>Pellentesque habitant morbi</p>
</div>
</div>
</section>
<section class="example wrapper">
<h3><code>.nav</code> module to make a horizontal list</h3>
<ul class="nav main-nav block group">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
</ul>
</section>
<section class="example wrapper">
<h3><code>.nav .stacked</code> to make a stacked list</h3>
<ul class="nav stacked main-nav secondary-nav block group">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
</ul>
</section>
Raw
style.scss
@import "compass";
/* reset */
* { margin:0; padding:0; }
ul, ol { padding-left:0; }
h1, h2, h3 { margin-bottom:1em; }
body { padding:1em; }
p { margin-bottom:1em; }
/* imgblock aka mediablock */
.imgblock {
.img {
float:left;
margin:0 1em 0 0;
img {
display:block;
}
}
.content {
display:table-cell; /* new block formatting context */
width:10000px; /* avoid shrink-wrap of table-cell */
*width:auto; /* override for old IE */
*zoom:1; /* legacy block formatting context */
}
&.flipped {
.img { float:right; margin:0 0 0 1em; }
}
}
/* nav module */
.nav {
list-style:none;
margin:0;
li {
float:left;
display:block;
}
}
/* stacked modifier */
.stacked {
.content, li {
clear:both;
display:block;
}
.img { margin-bottom:1em; }
}
/* skin for example sections */
.wrapper { width:50%; }
.example {
margin-bottom:1em;
padding:1em;
background:#f4f4f4;
border:1px solid #999;
border-radius:10px;
}
/* skin for nav items */
.main-nav li {
padding:0.5em 1em;
background:#eee;
border:1px solid #ccc;
border-top:1px solid #fff;
border-left:1px solid #fff;
border-bottom:1px solid #999;
text-align:center;
}
.secondary-nav li {
width:50%;
text-align:left;
}
/* clearfix */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
*zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment