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.
All font families have been implemented throughout the framework with CSS variables. Namely these three:
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.
Here's how all the headings will look:
- This is a
- Pretty darned simple
- Unordered list
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.