Skip to content

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
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.