An Unopinionated Opinionated CSS Framework

CSSFW aims to provide a minimal, viable alternative that 'bootstraps' your own styling without polluting your HTML or bloating your project.

Project Goals

The goal of CSSFW is to provide some basic, sane stylings from which to build from. The framework provides common repetive elements, some sane defaults that everyone uses, and lets you figure out the rest in your own CSS.

What it doesn't do is needly enforce styling queues that make it difficult to differentiate your site from the framework itself. It also doesn't bloat out your HTML with dozens of classes applied to each element.

CSSFW is designed to provide some rational CSS variables with some rationale classes incase you need them. It then allows you write your own CSS without getting in your way.

Project Motivation

I'm a long-time Bootstrap user. In Bootstrap 4 it was pretty easy to work from Bootstraps classes to adjust the final look of the page, however Bootstrap 5 started taking things in a strange direction, and subsequent themes have been more bloated and challenging to create.

This framework is being designed to apply the basic styling that I would need to start a project. It'll set sane defaults for rendering pages on a screen, and will pull values from CSS variables and not expressly require the user to build their styling in Sass.

Sass is good - I use it for CSSFW - however a lot of people just link the CDN of the final CSS and bash their way through 'race conditions' and overrides. This framework is designed for such a scenario. Just link the cssfw stylesheet of choice, and start targetting some elements in your own CSS.

Semantic Preference

CSSFW favors Semantic HTML as defined by WHATWG. This framework allows us to anticipate certain layouts and avoid class declarations.

Generally speaking, most sites should be using semantic markup unless they're doing something so insanely custom that they're really reaching to justify a CSS framework. So we just assume that this framework will require a massive rewrite or only be used on new projects. It's not a drop-in for Bootstrap, although it shares some overlapping class names.

That said, we do try to preserve some things. We have bold with standard <b> tags, and italic text with standard <i> tags, even though the usage of these is not strictly Semantic friendly. This is just logical and helps when rendering markdown.