Base Styles
Base Styles is CSS toolkit that's designed for:
- Composing clean, consistent user interfaces
- Providing a lightweight way to keep CSS organized.
How It Works
1. Add Base Styles to your project
<!-- This file contains the existing classes -->
<link href="https://cdn.base-styles.com/base-styles/0.0.1.css" rel="stylesheet">
<!-- This file contains your configuration -->
<link href="/base-styles-custom.css" rel="stylesheet">
2. Set your defaults
:root {
--ui-font-family-headers: 'Inter', sans-serif;
--ui-font-family: 'Inter', sans-serif;
--ui-color-primary: #0070f3;
--ui-shared-border-radius: 6px;
--ui-shared-border-width: 2px;
}
3. Use the classes to compose your UI
For example, to make a button
<button class="ui-button"> My Button </button>
See the examples for more.
4. (Optional) Add your own variants
If we don't have a variant you need, just add your own. See customization for more.
.ui-button {
& .--embossed {
box-shadow: 0 0 0 2px var(--ui-color-primary);
}
}