Typographical Styles

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

Note: Simplified ordered list styles are now present in the base version of NewFolder. NewFolderTypemill (the theme you're looking at now) will be updated with these styles in the near-ish future.