Skip to content

Instantly share code, notes, and snippets.

@paceaux

paceaux/dabblet.css

Created October 20, 2015 17:07
Show Gist options
  • Save paceaux/3c673c09e85cf91b358f to your computer and use it in GitHub Desktop.
Save paceaux/3c673c09e85cf91b358f to your computer and use it in GitHub Desktop.
Download ZIP
Font sizing demonstration
Raw
dabblet.css
/**
* Font sizing demonstration
*/
html {
color: #333;
font-family: Helvetica, Arial;
line-height:1.618;
}
body {
margin: 0;
padding: 0;
background: #f1f1f1;
}
h1, h2, h3, h4, h5, h6, p, li {
font-weight: normal;
padding: 0 ;
margin: 0;
}
h1, .h1 {
font-size: 3em;
}
h2, .h2 {
font-size: 2em;
}
h3, .h3 {
font-size: 1.5em;
}
h4, .h4 {
font-size: 1.25em;
}
p, .p{
font-size: 1em;
}
.f-largest {font-size: 48px;}
.f-larger {font-size: 32px;}
.f-large {font-size: 24px;}
.f-standard {font-size: 16px;}
[class*="Container"] {
padding: 10px;
outline: .3125em solid #434343;
margin: 1rem;
}
.bigContainer {
font-size: 24px;
}
.smallContainer {
font-size: 10px;
}
.bigContainerEm {
font-size: 2em;
}
.smallContainerEm {
font-size: .625em;
}
.example {
padding: 1rem;
border: 8px solid ;
margin: 3rem 0;
background: #fefefe;
}
.example__expl{
color: #565656;
font-style: italic;
border-bottom: 1px dashed;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<header>
<p>This is a demonstration and explanation of relative font-sizes, in particular how to deal with <code>em</code></p>
</header>
<figure class="example">
<figcaption class="example__expl">
<p>Fonts, size in em, in their natural state</p>
<p>Font size is based on the font-size of "body", since that's the parent element</p>
</figcaption>
<h1 class="h1">Font-size of 3em</h1>
<h2 class="h2">Font-size of 2em</h1>
<h3 class="h3">font size of 1.5em</h3>
<p class="p">font-size of 1em</p>
</figure>
<figure class="example">
<figcaption class="example__expl">
<p>font size is based on the container, which is <code>.bigContainer</code>, and we increased the font size in it. <code>.bigContainer</code>'s font-size is 24px;
</figcaption>
<div class="bigContainer">
<h1 class="h1">Font-size of 3em</h1><h2 class="h2">Font-size of 2em</h1><h3 class="h3">font size of 1.5em</h3>
<p class="p">font-size of 1em</p>
</div>
</figure>
<figure class="example">
<figcaption class="example__expl">
<p>font size is based on the container, which is <code>.smallContainer</code>, and we decreased the font size in it. <code>.smallContainer</code>'s font-size is 10px.
</figcaption>
<div class="smallContainer">
<h1 class="h1">Font-size of 3em</h1>
<h2 class="h2">Font-size of 2em</h1>
<h3 class="h3">font size of 1.5em</h3>
<p class="p">font-size of 1em</p>
</div>
</figure>
<figure class="example">
<figcaption class="example__expl">
<p>these are sized in pixels. they won't inherit the font size of their parent. They'll look the same as the first example, event though they're inside of <code>.bigContainer</code></p>
</figcaption>
<div class="bigContainer">
<h1 class="f-largest">Font-size of 48px</h1>
<h2 class="f-larger">Font-size of 32px</h1>
<h3 class="f-large">font size of 24px</h3>
<p class="f-standard">font-size of 16px</p>
</div>
</figure>
<figure class="example">
<figcaption class="example__expl">
<p>This is where people make their lives difficult. This is <code>.smallContainer</code> inside of <code>.bigContainer</code>.</p>
<p>Take note that, when they aren't in containers, their font-size is the same. The one size in pixels never changes. The one sized in em has changed every time. </p>
</figcaption>
<h3 class="h3">I have a font-size of 1.5em</h3>
<h3 class="f-large">And I have a font-size of 24px</h3>
<p>font-size of 1em</p>
<div class="bigContainer">
<h3 class="h3">I have a font-size of 1.5em</h3>
<h3 class="f-large">And I have a font-size of 24px</h3>
<p>font-size of 1em</p>
<div class="smallContainer">
<h3 class="h3">I have a font-size of 1.5em</h3>
<h3 class="f-large">And I have a font-size of 24px</h3>
<p class="p">font-size of 1em</p>
</div>
</div>
</figure>
<figure class="example">
<figcaption class="example__expl">
<p>This is where people make their lives absolutely terrible.Instead of setting the <code>font-size</code> of our <em>containers</em> in pixels, we'll set them in <code>em</code>. </p>
<ol>
<li>
We started the font-size at 1em (which was probably 16px).</li>
<li> Then, <code>.bigContainerEm</code> set the font-size to 2em. So the base font-size became 32px.</li>
<li>but our <code>.h3</code> has a font-size of 1.5em. So its font-size is 48px</li>
<li>In <code>.smallContainerEm</code> we set the font-size to .625em. So, we do <code>32px * .625</code> and get a base font-size of 20px.</li>
<li>So, the <code>.h3</code> still has a font-size of 1.5em. now it's <code> 1.5 * 20</code> which means that this computed font-size is 30px</li>
</ol>
</figcaption>
<h3 class="h3">I have a font-size of 1.5em</h3>
<h3 class="f-large">And I have a font-size of 24px</h3>
<p class="p">font-size of 1em</p>
<div class="bigContainerEm">
<h3 class="h3">I have a font-size of 1.5em</h3>
<h3 class="f-large">And I have a font-size of 24px</h3>
<p class="p">font-size of 1em</p>
<div class="smallContainerEm">
<h3 class="h3">I have a font-size of 1.5em</h3>
<h3 class="f-large">And I have a font-size of 24px</h3>
<p class="p">font-size of 1em</p>
</div>
</div>
</figure>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment