It's an ambitious plan. I am working on a CSS Framework. It's an unusual task, what I want is a CSS Framework that supports and respects HTML tags: semantic HTML. By that, I mean when I type in <section> ... </section> that I get a section with as little opinions as possible. No CSS Framework inserting margins or padding unless I ask for it.
It is impossible to be without opinions. Absolutely impossible. Even if all you do is run "normalize.css", you are introducing opinions. Any alteration, even for coming up with a baseline between browsers, is an opinion. That being said, the target is opinions that make sense. An example that doesn't make sense? Automatically adding 3rem of padding inside <section> tag. Removing sizing from paragraphs and heading tags. Also unacceptable is forcing the use of a class to restore a tag back to its default settings. The start should be default settings that are common in all browsers.
HTML5 has a number of semantic tags will be reserved for the major components of a web page. Those are:
<header></header> Introductory content for a page (e.g., a banner)
<nav></nav> Navigation content
<main></main> Main content of the page, required for sticky footers
<aside></aside> Content that is related to the main content of the page, presented as a side block or sidebar
<footer></footer> Contains the footer of the page or section of a page (typically, copyright, author, terms & conditions), required for sticky footers
Sticky footers are mentioned above since they involve relative spacing and flex. The critical element is the <main></main> tags that must fill the space between the top and footer - whether empty or not. Sticky footers are set by default so that footers remain at the bottom of a browser window even with a lack of content.
The struggle I've had creating my CSS Framework is with layout elements, particularly containers. In my opinion, there are two types of containers:
- section containers to encapsulate entire sections of pages and can be nested
- box containers to encapsulate items within sections: an example would be three price cards centered across a row in a section ... with each price card as a "box". box can be nested.
Note that there are no "container" tags that are layout neutral. One or more browsers will have default styling (or layout attributes) assigned to each.
All "containers" are for other content ... for example, there is no "div" content, a <div></div> holds other data, like paragraphs, h1 to h6 heading tags, images, videos, etc. Divs can be nested to unlimited levels.
List presented alphabetically:
<address></address>
<article></article>
<aside></aside>
<card></card>
<div></div>
<hgroup></hgroup>
<nav></nav>
<section></section>
<span></span>
Special use:
<slot></slot>
<template></template> (note: hidden, only exposed with javascript after page load)
Note: "template" and "slot" tend to be used together.
To a certain extent, there are a few other tags that can be considered "containers", albeit for special use only:
<form></form> where this is a grouping of all form elements into one submittable data gathering container
<fieldset></fieldset> where this is a grouping of associated form elements
An article on semantic HTML: https://www.semrush.com/blog/semantic-html5-guide/
An article on sections: https://html.spec.whatwg.org/multipage/sections.html
To date, I've completed most sections of my CSS Framework. So far, those include:
- Tokens (font imports, variables)
- Custom "modern normalize"
with initial semantic HTML setup (defaults for html, body, and sticky footer) - Core and typography
All html tags, new defaults for H1 to H6, paragraph, etc. - Forms
Without wavering to extremes, a really nice presentation of form elements
(Note: i had also created floating labels for this module, but removed it beause it was confusing having to click outside the label to get focus to the input field) - Layout
(where I am spending a lot of time working out containers, blocks, etc.) - Utilities
includes spacing (margin and padding) so that I can eliminate having those attached to other html tags
essentially, user creates padding and margin in standard increments:- 0.25 rem
- 0.5 rem
- 0.75 rem
- 1 rem
- 1.5 rem
- 2 rem
- 2.5 rem
- 3 rem
- 4 rem
- 5 rem
If you want a section with 1.5 rem of padding: <section class="m1.5"> ... and yes, that's correct, m1.5 with the period. I followed the specification precisely and it works. And if you want 1.5 rem of padding to top and bottom and 2 rem of padding left and right: <section class="mx1.5 my2"> ... simple and nice, isn't it?