Modern, minimal CSS presets
Built by Badgers
Badger CSS is my personal collection of CSS utilities and styling for forms and other commonly used components.
It can be used by itself as a good starting point for any web site. It also provides the basic styles used by Badger Form and Badger React UI
You've probably heard of CSS reset stylesheets that provide sensible defaults for HTML elements to smooth out some of the inconsistencies between browsers. And no doubt you're aware of the plethora of fully-featured CSS toolkits that implement all manner of styles for UI components.
Badger CSS sits somewhere between the two. It provides some sensible presets for HTML elements that you can use out of the box and expect to get reasonable results. It's highly configurable and is really designed to be a starting point for building your own CSS stylesheets, design systems and UI toolkits.
Features
Cool Colors
- Hand-crafted palette with 13 color ranges and 3 greyscales, each containing 21 color stops from none more black to a whiter shade of pale.
- Easily adapt the palette to match your brand colors.
- Create and your own custom palette using Badger Color and import it into Badger CSS.
Useful Utilities
- Utility classes for the things you need to do most often.
- Useful for prototyping or ad-hoc styling.
- CSS custom properties for applying them into your own custom styles.
- All configurable by SASS variables.
Fantastic Forms
- Mostly Classless styling providing sensible and modern defaults for HTML forms.
- Minimal additional markup required.
- Easily modified using CSS properties and/or SASS variables.
Cunning Components
- A basic set of components that you just can't live without.
- Different variations of the basic styles.
- Automatically adapt to any color range or brand colors.
- Configurable and customisable, using CSS properties and/or SASS variables.