Skip to content

Instantly share code, notes, and snippets.

@gentle-media

gentle-media/dabblet.css

Created September 5, 2012 15:26
Show Gist options
  • Save gentle-media/3638399 to your computer and use it in GitHub Desktop.
Save gentle-media/3638399 to your computer and use it in GitHub Desktop.
Download ZIP
Example thumbnail grid and captions with definition lists set to 'display: inline-block'
Raw
dabblet.css
/**
* Example thumbnail grid and captions with definition lists set to 'display: inline-block'
*/
/* Agressive CSS reset just for demostration purpose only.
* It's recommended to use normalize.css as reset
* (http://necolas.github.com/normalize.css/)
*/
* {
margin: 0;
padding: 0}
/* end CSS reset */
body {
font-family: helvetica, arial, serif;
font-size: 100% /* = 16px = 1em */}
#products {
width: 636px;
margin: 0 auto 20px;
padding: 20px 20px 0 20px;
background: #eee;
overflow: hidden;
/* 'display: inline-block' adds aproximately 4px space after the element you've set it on.
In our case .item. This is a natural behavior, cause it's now an inline element and
therefore it adds the letter-spacing after the element. So we have to get rid of that
space somehow. There are a few ways to do that and I use setting a negative letter-spacing
of -.25em. Why -.25em and not -4px? Cause you should set all your font-sizes in em :)
*/
letter-spacing: -.25em /* = -4px */}
.item {
display: inline-block;
/* The following two properties are needed to bring 'inline-block' support to IE7. */
*display: inline;
*zoom: 1;
font-size: 1em; /* = 16px (1 x 16px) */
/* setting the letter-spacing back to normal otherwise it would inherit the negative
letter-spacing from the parent (#products) which would give squeezed unreadable text
*/
letter-spacing: normal;
vertical-align: top;
border: 1px solid #ccc;
background-color: #e5e5e5;
width: 122px;
padding: 10px;
margin: 0 20px 20px 0}
/* The following nth-child pseudo selector is a CSS3 selector which doesn't work in IE8 and
below. If you want support for these older browsers then you will need a javascript
polyfill such as selectivizr (http://selectivizr.com/). IE9 and the other browsers do
support CSS3 selectors.
So... what I do below is I remove the right margin from every fourth item (4, 8, 12, 16, etc.)
otherwise the space after the 4th items would be 40px.
Of course you could give every fourth item an extra class name and use that to reset the
right margin to '0' then you will have support all the way down to IE6 too without loading
a javascript polyfill, but this is more CMS (Content Management System) proof :)
You can't expect from your clients to add class names to your tags/elements. Even with the
help of that CMS.
*/
.item:nth-child(4n+4) { margin-right: 0 }
.item dt {
font-size: 1.25em; /* = 20px (1.25 x 16px) */
font-weight: bold;
line-height: 1.5em /* = 24px (1.5 x 16px) */ }
.item dt img { border: 1px solid #000 }
.item dd { line-height: 1.5em /* = 24px (1.5 x 16px) */ }
Raw
dabblet.html
<body>…
<div id="products">
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>A very long description here to test multiple lines. If I had used 'float: left" to align the items horizontally this long description would have broken the grid layout.</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Using 'display: inline-block' instead, we don't have that problem, but it needs some extra properties as well for it to work and to support IE7.</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
<dl class="item">
<dt><a href="#"><img src="http://jasonchristopher.com/blog/wp-content/uploads/2009/05/fashion-model-vixen.jpg" width="120" height="170" rel="lightbox[statues]" title="" alt=""></a></dt>
<dt>Title here</dt>
<dd>Description here</dd>
</dl>
</div>
</body>
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"result"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment