Skip to content

Instantly share code, notes, and snippets.

@cange

cange/dabblet.css

Created May 21, 2012 13:22
Show Gist options
  • Save cange/2762288 to your computer and use it in GitHub Desktop.
Save cange/2762288 to your computer and use it in GitHub Desktop.
Download ZIP
How to prevent wrong grid indentation by offset boxed content
Raw
dabblet.css
/**
* How to prevent wrong grid indentation by offset boxed content
* GRID
*--------------------------------------------------
* Default 940px grid
*/
.mod-floated, .clearfix{ *zoom:1 }
.mod-floated:before,
.clearfix:before,
.mod-floated:after,
.clearfix:after { display:table;content:"" }
.mod-floated:after, .clearfix:after{clear:both}
[class*="span"]{float:left; margin-left:20px}
.span1{width:60px}.offset1{margin-left:100px}.span2{width:140px}.offset2{margin-left:180px}.span3{width:220px}.offset3{margin-left:260px}.span4{width:300px}.offset4{margin-left:340px}.span5{width:380px}.offset5{margin-left:420px}.span6{width:460px}.offset6{margin-left:500px}.span7{width:540px}.offset7{margin-left:580px}.span8{width:620px}.offset8{margin-left:660px}.span9{width:700px}.offset9{margin-left:740px}.span10{width:780px}.offset10{margin-left:820px}.span11{width:860px}.offset11{margin-left:900px}.span12{width:940px}.offset12{margin-left:980px}
.row{margin-left:-20px;*zoom:1}
.row:before,.row:after{display:table;content:""}
.row:after{clear:both}
h2 { width: 960px;margin: 1em auto;text-align: center;}
/**
* scaffolding
*/
body { font-family: sans-serif; }
.page {
margin: 0 auto;
width: 960px;
position: relative;
background-color: rgba(0,0,0,.1);
}
.page:hover {
background-color: rgba(0,0,0,.1);
background-image: repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(0,0,0,.3) 20px, rgba(0,0,0,.3) 80px);
background-position: 10px 0;
}
.page-12 {
width: 940px;
padding: 0 10px;
}
.page:hover::before {
content: '10 ------ 60 ------ 20 ------- 60 ------- 20 ------- 60 -------- 20 ------- 60 ------- 20 ------- 60 ------- 20 ------- 60 ------- 20 ------- 60 ------- 20 ------ 60 -------- 20 ------- 60 ------- 20 ------- 60 ------- 20 ------- 60 -------- 20 ------ 60 ------ 10';
color: rgba(0,0,0,.3);
display: block;
font-size: 10px;
margin-left: -480px;
left: 50%;
top: 52px;
position: absolute;
width: 980px;
z-index: 1;
}
.box,
.head,
.foot {
background-color: rgba(200,0,0,.5);
color: white;
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
}
.page-12 .box,
.head, .foot {
background-color: rgba(70,200,0,.5);
}
.page-12 .stage,
.page-12 .head,
.page-12 .foot {
margin-left: -10px;
margin-right: -10px;
}
.stage {
background-color: rgba(0, 70, 200, .8);
margin-bottom: 1em;
padding: 10px;
}
.stage .box { margin-bottom: 0; }
/**
* live
*/
.live.page { background-color: transparent; }
.live .box { padding: 0; }
.live .stage { background-color: #141414; }
.stage > .hd {
color: white;
font-weight: bold;
}
.live .foot { background-.color: #ccc; }
/**
* @module
*/
.mod {
background-color: #141414;
color: white;
margin: 0 -10px 1em;
min-height: 250px;
padding: 10px;
}
.mod .img { display: block; }
.mod .inner { text-align: left; }
.mod .hd { margin: .5em 0; font-weight: bold; }
/* @submodule floated */
.mod-floated .img {
float: left;
margin-right: 20px;
}
.mod-floated-right .img {
float: right;
margin-left: 20px;
margin-right: 0;
}
/* @submodule inline headline */
.mod-inline .inner { position: relative; }
.mod-inline .hd {
background-color: rgba(0,0,0, .4);
margin-right: 40px;
position: absolute;
top: -65px;
padding: 5px 10px;
}
.mod-inline .bd { padding: 10px 0 0; }
/* @submodule inline top */
.mod-inline-top { position: relative; }
.mod-inline-top .inner { position: static; }
.mod-inline-top .hd { top: 10px; }
/* @submodule inline right */
.mod-inline-right .hd {
margin-left: 40px;
margin-right: 0;
right: 0px;
}
.mod-inline-right.mod-inline-top .hd { right: 10px; }
Raw
dabblet.html
<!-- Example how 960 grids are working e.g. with bootstrap grid -->
<h2>960px without pre-/suffix spaces</h2>
<div class="page">
<header class="head">header</header>
<div class="row">
<div class="box span4">box</div>
<div class="box span4">box</div>
<div class="box span4">box</div>
</div>
<div class="stage">
<div class="row">
<div class="box span4">box</div>
<div class="box span4">box</div>
<div class="box span4">box</div>
</div>
</div>
<footer class="foot">footer</footer>
</div>
<h2>940px with pre-/suffix spaces</h2>
<div class="page page-12">
<header class="head">header</header>
<div class="row">
<div class="box span4">box</div>
<div class="box span4">box</div>
<div class="box span4">box</div>
</div>
<div class="stage">
<div class="row">
<div class="box span4">box</div>
<div class="box span4">box</div>
<div class="box span4">box</div>
</div>
</div>
<footer class="foot">footer</footer>
</div>
<h2>Example</h2>
<div class="live page page-12">
<header class="head">header</header>
<div class="row body">
<div class="span8">
<article class="mod">
<img class="img" src="http://placehold.it/620x248/606/fff/&text=Pano 300x120">
<div class="inner">
<div class="hd">Headline</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back, and if he lifted his head a little he could see his
brown belly, slightly domed and divided by arches into stiff sections.
The bedding was hardly able to cover it and seemed ready to slide off
any moment.
</div>
</div>
</article>
</div>
<div class="span4">
<article class="mod">
<img class="img" src="http://placehold.it/300x120/606//fff&text=Pano 300x120">
<div class="inner">
<div class="hd">Headline</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
</div>
<section class="stage">
<div class="hd">Wrapped container</div>
<div class="row">
<div class="span8">
<article class="mod">
<img class="img" src="http://placehold.it/620x273/C3000C/fff&text=Wide 620x273">
<div class="inner">
<div class="hd">Headline</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
ke back, and if he lifted his head a little he could see his
brown belly, slightly domed and divided by arches into stiff sections.
The bedding was hardly able to cover it and seemed ready to slide off
any moment.
</div>
</div>
</article>
</div>
<div class="span4">
<article class="mod">
<img class="img" src="http://placehold.it/300x180/c3000c/fff/&text=Wide 300x180">
<div class="inner">
<div class="hd">Headline</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
</div>
</section>
<div class="row">
<div class="span4">
<article class="mod">
<img class="img" src="http://placehold.it/300x180/C3000C/fff">
<div class="inner">
<div class="hd">Headline</div>
</div>
</article>
</div>
<div class="span4">
<article class="mod-ad">
<img class="img" src="http://placehold.it/300x250/C3000C/fff&text=banner">
</article>
</div>
<div class="span4">
<article class="mod">
<img class="img" src="http://placehold.it/300x180/">
<div class="inner">
<div class="hd">Headline</div>
</div>
</article>
</div>
<div class="span6">
<article class="mod mod-floated">
<img class="img" src="http://placehold.it/140x233">
<div class="inner">
<div class="hd">Floated teaser left media</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
<div class="span6">
<article class="mod mod-floated mod-floated-right">
<img class="img" src="http://placehold.it/220x220/6d6/333&text=Square 220x220">
<div class="inner">
<div class="hd">Floated teaser right media</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
<!-- inline module -->
<div class="span4">
<article class="mod mod-inline mod-inline-top">
<img class="img" src="http://placehold.it/300x220/9de/000">
<div class="inner">
<div class="hd">Inline headline teaser on the bottom</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
<div class="span4">
<article class="mod mod-inline mod-inline-top mod-inline-right">
<img class="img" src="http://placehold.it/300x220/9de/000">
<div class="inner">
<div class="hd">Inline headline teaser on the top right</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
<div class="span4">
<article class="mod mod-inline mod-inline-right">
<img class="img" src="http://placehold.it/300x220/9de/000">
<div class="inner">
<div class="hd">Inline headline teaser on the bottom right</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
<div class="span4">
<article class="mod mod-inline">
<img class="img" src="http://placehold.it/300x220/9de/000">
<div class="inner">
<div class="hd">Inline headline teaser on the bottom</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
<div class="span8">
<article class="mod mod-inline mod-inline-top mod-inline-right">
<img class="img" src="http://placehold.it/620x273/C3000C/fff&text=Wide 620x273">
<div class="inner">
<div class="hd">Inline headline teaser on the top and right aligned</div>
<div class="bd">
One morning, when Gregor Samsa woke from troubled dreams, he found
himself transformed in his bed into a horrible vermin. He lay on his
armour-like back.
</div>
</div>
</article>
</div>
</div>
<footer class="foot">footer</footer>
</div>
Raw
settings.json
{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment