A base stylesheet using system colors and css keywords
AGPL-3.0 License
A base stylesheet using system colors and css keywords.
System.css has a number of goals:
https://dutchcelt.github.io/system.css/
Import via NPM:
npm i @dutchcelt/system.css
If you wish to use the layout and form validations you will need to switch the 'system enhancement' on:
<html lang="en" style="--system-enhanced: var(--ON)">
System.css has a number of custom properties for you to use. https://dutchcelt.github.io/system.css/style-api.html
Additionally, system.css
also provides a simple form layout and validation setup.
This solution uses features that might cause issues. Consider the following:
Container Units, CSS nesting, Sub Grid, color-mix()
, :has()
, @property
, and @layer
.
These features work in following browsers:
This is a heavily modified version of new.css
For fonts we use what we are given by the OS. My thanks to Modern Font Stacks.
My admiration and recommendations to consider are