ui-normalize
v0.3.0
Published
Normalize browsers' default style for user interfaces and design systems
Downloads
9
Maintainers
Readme
UI Normalize
A set of CSS styles to normalize the browser' default styles to create crossbrowser design systems. It's build on top of modern-normalize with the following additions:
- No CSS classes are used, only HTML selectors
- Normalized the
focus
state of all elements. - Normalize the appearance of the following components:
- Accordion: Using the
details
elements. - Button: Using the
button
,input[type="button"]
anda[role="button"]
elements. - Checkbox: Unified the style of
input[type="checkbox"]
. - Radio: Unified the style of
input[type="radio"]
. - Dialog: Normalized the default style of the
dialog
element. - Progress: Normalized the default style of the
progress
element. - Select: Unified the style of the
select
element. - Slider: Unified the style of the
input[type="range"]
element. - Switch: Using the
button[role="switch"]
element. - Separator: Using the
hr
element. - Tooltip: Using the
*[role="tooltip"]
element (no interactive).
- Accordion: Using the
Usage
The best way to use this stylesheet is combined with
@layer
. For
example:
@import "ui-normalize.css" layer(normalize);
@import "your-design-system.css" layer(theme);
@import "your-theme.css" layer(theme);
To-do
- [ ] Use system colors: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#system_colors