Instantly share code, notes, and snippets.

Embed
What would you like to do?
Scoped Typography
.context__flourish {
ul {
list-style: disc;
margin-left: 1.5em; /* Left and right margins are allowed here */
}
}
.context__rhythm {
// Add a context just for adding margins but only allow it
// to be used when we're already maintaining a rhythm with line-heights
.context__margins,
&.context__margins {
p, ul, ol {
margin-bottom: 1.5em;
}
.class-for-24px {
margin-bottom: 0.75em;
}
.class-for-18px {
margin-bottom: 1em;
}
}
}
// Quick and dirty reset
// For full reset see https://gist.github.com/craigmdennis/5648dfc7c3b769f09016
html, body, h1, h2, h3, h4, h5, h6, p, ul, li {
border: 0;
margin: 0;
padding: 0;
font-size: 100%;
}
// Strip styling from lists
ol, ul {
list-style: none;
}
// Vertical rhythm generated at https://drewish.com/tools/vertical-rhythm/
body {
font-size: 12px;
font-family: Georgia, serif;
line-height: 1.5; // 18px as vertical rhythm base
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.context__rhythm {
p {
font-size: 1em; // 12px
line-height: 1.5; // 18px
}
.class-for-24px {
font-size: 2em; // 24px
line-height: 1.5; // 36px
}
.class-for-18px {
font-size: 1.5em; // 18px
line-height: 1; // 18px
}
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2 class="class-for-24px">Reset Browser Styles</h2>
<ul>
<li><b>The ul has:</b>
<li>inherited line-height from body
<li>no margin</li>
<li>no bullets</li>
</ul>
<hr>
<div class="context__rhythm">
<h2 class="class-for-24px">24px with line-height but no margin</h2>
<h2 class="class-for-18px">18px with line-height but no margin</h2>
<ul>
<li><b>The ul has:</b>
<li>inherited line-height from body
<li>no margin</li>
<li>no bullets</li>
</ul>
<hr>
<div class="context__margins">
<h2 class="class-for-24px">24px with line-hight and margin</h2>
<h2 class="class-for-18px">18px with line-hight and margin</h2>
<ul>
<li><b>The ul has:</b>
<li>inherited line-height from body
<li>margin</li>
<li>no bullets</li>
</ul>
<hr>
<div class="context__flourish">
<h2 class="class-for-24px">24px with line-height, margin and optional styles</h2>
<h2 class="class-for-18px">18px with line-height, margin and optional styles</h2>
<ul>
<li><b>The ul has:</b>
<li>inherited line-height from body
<li>margin</li>
<li>bullets</li>
</ul>
<hr>
</div>
</div>
<div class="context__flourish">
<h2 class="class-for-24px">24px with line-heights, no margin but optional styles</h2>
<h2 class="class-for-18px">18px with line-heights, no margin but optional styles</h2>
<ul>
<li><b>The ul has:</b>
<li>inherited line-height from body
<li>no margin</li>
<li>bullets</li>
</ul>
<hr>
</div>
</div>
<div class="context__rhythm context__margins context__flourish">
<h2 class="class-for-24px">24px You can include all contexts on the same element</h2>
<h2 class="class-for-18px">18px You can include all contexts on the same element</h2>
<ul>
<li>The ul has:
<li>inherited line-height from body
<li>margin</li>
<li>bullets</li>
</ul>
</div>
</body>
</html>
@import "reset";
@import "rhythm";
@import "margins";
@import "flourish";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment