A sustainable and good enough CSS boilerplate that:
- Leverages web browsers built-in aesthetics (including system colors).
- It embraces semantic HTML.
- It focuses in basic styling, not layout.
- Is built with branding in mind so you can color pallette your site.
- It focuses to work properly on mobile.
- Works great with native browsers light/dark schemes
- Is built to last.
It is 2023, Web Browers are amazing at rendering and handling natively light-dark schemes, I'm building on top of that.
Yet another minimalistic CSS Framework?
Yes.
I built Sustainable.css because I usually do lots of simple websites that require a couple of basic things:
- Some kind of centering
- Some basic color pallette.
- Support for dark/light schemes
- Support for mobile
It helps me, I hope it helps you too.
Is it for me?
Sustainable.css aims to be good enough at styling plain HTML. Perfect for MVPs and sites built on HATEOAS.
It does not provide styling that you will probably change anyways (like headers font size and margins) nor layout system (it's 2023, you should be leveraging modern CSS).
Sustainability?
With sustainability I refer to several things:
- It is just a few KB, Sustainable.css does not require lot of bandwith and energy to work.
- It will work as long as HTML and CSS work, with extremely low maintenaince.
- It is not hosted nor packaged with expensive pipelines or infrastructure. (#NoBuild FTW!)
- Web browsers spends lots of money on styling and rendering features. I build on top of that.
Branding
Since I'm trying to delegate as much as possible to the browser defaults, I just choose a color that goes good with Black & White (Colors with 4.5:1 contrast on Black and White). This way I can leverage the browser's light-dark scheme knowing that the pallete color will be accesible in both modes.
I might extend this as I explore and understand better minimalistic ideas to add color to a website.
Customization
Just add your own css file and extend whatever you want. (This site adds 4 small css rules and some inlines)
So far only 2 variables are exposed:
--max-widthto control the width of the body--color-10to control the accent color of your theme.
Sustainbale.css is being developed with the 60/30/10 design rule in mind (being 60% the main black/white used for backgrounds!).
--color-10 will customize:
- submit inputs,
- links underlines
- form input's accent-colors
It's up to you to use it to add some extra "splash" of it to your UI. (For this page I decided to style strong tags and the main header with it)