These styles require no special classes, but all main body or page content should be wrapped in en element with the class name "content". eg. <section class="content>. This is to make sure that styles specifically meant for page content don't accidentally sneak their way into a navigation menu, for example.

So this is what a general paragraph is going to look like. You've got your usual bold text, italic text, and your classic links. This framework is all about being easy to read, so I put a lot of work into these styles. All in all, I think I did okay. You can also put handy little things like inline code blocks into your paragraphs, because this framework is designed to be used on education and documentation-focused websites.

If you resize your browser window, you should see the text actually expand or shrink in size. I am using a responsive typographical scale generated by using type-scale.com and the Fluid-responsive font-size calculator in tandem.

Font Families

All font families have been implemented throughout the framework with CSS variables. Namely these three:

--body-font
--heading-font
--monospace-font

You can edit the actual font families in the _variables.scss file. For this website, I'm using a Google font @import, but you could just as easily switch the fonts out with a basic system-fonts-only font family, or what have you.

Headings

Here's how all the headings will look:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lists

Unordered lists

• This is a
• Pretty darned simple
• Unordered list

Ordered lists

The ordered lists are a little fancier, and are based on a snippet by Robert Johansson. I was going to eventually use this technique with the unordered lists as well, but I just found out about the ::marker CSS selector, so I'll probably migrate both kinds of lists to that instead.

1. This is option 1
2. This is option 2
3. This is option 3
4. This is option 4