Floor Typography CSS 2021
Floor Typography CSS is a light library for a better default, typographic CSS meant to build on. It does a simple reset and normalize; applies a simple, default style for the few needed elements; sets a typographic vertical rythm, and; adds CSS variables for customization. Here are my thoughts on dev. moving forward.
I’ve used Floor Typography for several projects in 2020, and improved it quite a bit. It’s hit a pretty high version number, 15—so ridiculously high since it follows semantic versioning and I’ve considered changes to default CSS to more easily be breaking changes. (Floor Typography should have been kept in beta much longer…)
The framework doesn’t do much, which is a good thing given how fast new CSS features can be used now-a-days (Bootstrap is rarely needed anymore for instance). I still think it does too much, and somethings should be separated into a second library. When this is implemented, this version of Floor Typography may become a completely new package.
1. Font-families and font-weight (the latter for headings) will most likely be moved to the second lib. Both variables and defaults.
2. More resets. The second lib. will somehow make other resets I always find myself adding available. Like resetting button styles. Perhaps even a full reset for form elements.
After resetting there should probably be some kind of simple styling of those elements…
3. Move from Stylus? Stylus may go. Floor Typography was originally written in vanilla CSS---it may be again.
4. To consider. I’ve thought about removing the reset of headings in the header and footer of a site/app, but I feel h2 size on bigger screens is too big of a default there, and resetting in this way is better than the alternatives. For example, I don’t want to adjust font-sizes for main only, that is to specific element styling that must be repeated when overriding in a project.
5. New website. A new website, with better documentation, explanation and examples will come. Most likely made with Svelte and Snowpack, which I’m experimenting with.
Update 2021-01-19. Implementation status:
- Font-families are removed, though variables for adding fonts for root, body, headings and mono-elements are there still. Font-weights (for headings) is in its own file.
- More resets are not implemented.
- Floor Typography CSS has moved from Stylus (though the files will be kept at the time). It is now split into several CSS files, meant to be used with CSS
@importand Postcss or Snowpack (or something similar that will import them from the NPM package). - Headings reset/normalize outside of main is moved to its own file.
- There’s a new website now, made with Svelte and Snowpack---DX!
6. New pre-bundled version. I will also add a full minified version of the updates.