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.
- This is option 1
- This is option 2
- This is option 3
- 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.