Rapidly Style HTML Pages With The System.css Library

Category: CSS & CSS3 , Frameworks | January 9, 2024
Author:dutchcelt
Views Total:71 views
Official Page:Go to website
Last Update:January 9, 2024
License:MIT

Preview:

Rapidly Style HTML Pages With The System.css Library

Description:

system.css is a minimal CSS framework that utilizes default system colors and CSS properties to provide basic styling for HTML pages.

It also normalizes fonts, spacing, and colors, ensuring everything lines up just right. Think of it as a minimal design system or CSS reset for a clean, accessible design.

How to use it:

1. Download and import the following stylesheets:

@layer --system, --theme;
/* Tokens */
@import url('src/system-properties.css');
/* Foundation */
@import url('src/system-colors.css');
@import url('src/system-custom-colors.css');
@import url('src/system-typography.css');
@import url('src/system-stroke.css');
@import url('src/system-spacing.css');
@import url('src/system-dimensions.css');
@import url('src/system-radi.css');
/* Markup and prefab patterns */
@import url('src/system-selectors.css');
@import url('src/system-layout.css');
@import url('src/system-forms.css');

2. Or directly import the index.css into your document.

<link rel="stylesheet" href="index.css" />

You Might Be Interested In:


Leave a Reply