Skip to content

Instantly share code, notes, and snippets.

@michsch

michsch/dabblet.css

Created April 1, 2012 18:03
Show Gist options
  • Save michsch/2277424 to your computer and use it in GitHub Desktop.
Save michsch/2277424 to your computer and use it in GitHub Desktop.
Download ZIP
flexible fluid <figure> and <figcaption>
Raw
dabblet.css
/**
* flexible fluid <figure> and <figcaption>
*/
html * { font-size:100%; }
body {
background: #efefef;
min-height:100%;
font-size: 85%;
font-family: Georgia, "Times New Roman", Times, serif;
}
/* main box layout */
.ym-wrapper {
width: auto;
min-width: 300px;
max-width: 65em;
margin: 0 auto;
}
.ym-wbox {
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.25);
}
/* floats */
.float-left {
display: inline;
float: left;
margin: 1.5em 1em 0 0;
}
.float-right {
display: inline;
float: right;
margin: 1.5em 0 0 1em;
}
/* figure */
figure {
max-width: 50%;
min-width: 10%;
padding: 10px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.25);
}
figcaption {
padding: .75em 10px;
font-size: 1em;
line-height: 1.5em;
background: #efefef;
}
figure img {
display: block;
width: auto;
max-width: 100%;
}
/* figure - table */
figure.table {
display: table;
width: 1px;
max-width: inherit;
}
figure.table img {
display: block;
width:auto;
max-width: inherit;
}
figure.table figcaption {
}
/* figure - block */
figure.block {
display: block;
}
figure.block img {
}
figure.block figcaption {
}
/* figure inline-block */
figure.inline-block {
display: inline-block;
}
figure.inline-block img {
}
figure.inline-block figcaption {
}
/*
figure.inline-block figcaption:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden;
}*/
/* content */
p {
font-size: 1em;
line-height: 1.5em;
margin: 1.5em 0 0;
}
h1, h2, h3, h4, h5, h6 { margin: 0; }
h1 {
font-size: 3.1429em; /* 44px */
line-height: 1.4318em; /* 63px */
margin-top: 0.4773em;
}
h2 {
font-size: 2em; /* 28px */
line-height: 1.5em; /* 42px */
margin-top: 0.75em;
margin-bottom: 0em;
}
h3 {
font-size: 1.7143em; /* 24px */
line-height: 1.75em; /* 42px */
margin-top: 0.875em;
margin-bottom: 0em;
}
h4 {
font-size: 1.2857em; /* 18px */
line-height: 1.1667em; /* 21px */
margin-top: 1.1667em;
margin-bottom: 0em;
color: #888;
}
ul {
display: table;
margin: 1.5em 0 0;
padding-left: 2em;
}
li {
margin: 0;
}
hr {
color:#fff;
background:transparent;
margin:0 0 .75em 0;
padding:0 0 .75em 0;
border:0;
border-bottom:1px #ccc solid;
clear: both;
}
/* YAML clearfix */
.ym-clearfix:before {
content:"";
display:table;
}
.ym-clearfix:after {
clear:both;
content:".";
display:block;
font-size:0;
height:0;
visibility:hidden;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<div class="ym-wrapper">
<div class="ym-wbox ym-clearfix">
<h1>flexible fluid &lt;figure&gt;</h1>
<figure class="float-left">
<img src="http://farm1.staticflickr.com/113/312754502_a1c6ac91e0_m.jpg" title="" alt="" />
<figcaption>
Photo by <a href="http://www.flickr.com/photos/gadl/">gadl</a> - Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
</figcaption>
</figure>
<h2>display: inline</h2>
<p>This &lt;figure&gt; element is <em>display:inline</em> and floating left.</p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>max-width of 50% works for &lt;figure&gt;</li>
<li>image is scalable</li>
</ul>
<h4>Contra:</h4>
<ul>
<li>&lt;figure&gt; is wider than the image inside (exactly the 50% from max-width)</li>
</ul>
<hr />
<figure class="float-right table">
<img src="http://farm1.staticflickr.com/231/463596797_23cc2ad8c8.jpg" title="" alt="" />
<figcaption>
Photo by <a href="http://www.flickr.com/photos/gadl/">gadl</a> - Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
</figcaption>
</figure>
<h2>display: table</h2>
<p>This &lt;figure&gt; element is <em>display:table</em> and floating right.</p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>&lt;figcaption&gt; is not wider as the image</li>
</ul>
<h4>Contra</h4>
<ul>
<li>image is not scalable</li>
<li>max-width for &lt;figure&gt; doesn't work</li>
<li>image, &lt;figure&gt; and &lt;figcaption&gt; are always at the original image width</li>
<li>by the way a fixed width like <em>width:50%</em> doesn't work for display:table</li>
</ul>
<hr />
<figure class="float-left block">
<img src="http://farm1.staticflickr.com/113/312754502_a1c6ac91e0_m.jpg" title="" alt="" />
<figcaption>
Photo by <a href="http://www.flickr.com/photos/gadl/">gadl</a> - Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
</figcaption>
</figure>
<h2>display: block</h2>
<p>This &lt;figure&gt; element is <em>display:block</em> and floating left.<br />
<strong>The same result with <em>display:inline</em>!</strong></p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>max-width of 50% works for &lt;figure&gt;</li>
<li>image is scalable</li>
</ul>
<h4>Contra:</h4>
<ul>
<li>&lt;figure&gt; is wider than the image inside (exactly the 50% from max-width)</li>
</ul>
<hr />
<figure class="float-left inline-block">
<img src="http://farm1.staticflickr.com/113/312754502_a1c6ac91e0_m.jpg" title="" alt="" />
<figcaption>
Photo by <a href="http://www.flickr.com/photos/gadl/">gadl</a> - Lorem ipsum dolor sit amet,
consetetur sadipscing elitr, sed diam
</figcaption>
</figure>
<h2>display: inline-block</h2>
<p>This &lt;figure&gt; element is <em>display:block</em> and floating left.<br />
<strong>The same result with <em>display:inline</em>!</strong></p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>max-width of 50% works for &lt;figure&gt;</li>
<li>image is scalable</li>
</ul>
<h4>Contra:</h4>
<ul>
<li>&lt;figure&gt; is wider than the image inside (exactly the 50% from max-width)</li>
</ul>
<hr />
<figure class="float-left block">
<img src="http://farm1.staticflickr.com/113/312754502_a1c6ac91e0_m.jpg" title="" alt="" />
</figure>
<h2>display: block (without caption)</h2>
<p>This &lt;figure&gt; element is <em>display:block</em> and floating left.<br />
<strong>The same result with <em>display:inline</em>!</strong></p>
<h4>Pro:</h4>
<ul>
<li>floating works</li>
<li>image is not wider as original</li>
<li>max-width of 50% works for &lt;figure&gt;</li>
<li>image is scalable</li>
</ul>
<h4>Contra:</h4>
<ul>
<li>no caption</li>
</ul>
</div>
</div>
Raw
settings.json
{"view":"split","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment