FeatherCSS is a Dark Mode ready minimalist CSS Framework with support for RTL and Accessibility. It purposefully excludes features like grid layout, media queries, or icons which tends to require per-project customization.
- It’s Just CSS™ with CSS variables. Bring your own LESS/SaaS/CSS-in-JS solution
- Super minimal at only 2kb gzipped
- Learn just a few simple class names, the rest is default you can tweak around directly.
FeatherCSS ships with Dark Mode support out of the box with CSS variables. In order to provide maximum flexibility of turning it on, off, or automatically switch based on user display settings, you can toggle data-theme="dark" attribute to your markup with a minimal JavaScript code (consult your framework specific solutions).
FeatherCSS supports all the latest browsers (or degrade gracefully), minus the IE11 which is being deprecated even from high-traffic websites like StackOverflow and LinkedIn.
npm install feathercssyarn add feathercssOnly variables.css file is required for all other CSS components to work. Otherwise, you can pick and choose which ones you want to import individually.
import "feathercss";
/* or import them individually */
import "feathercss/dist/components/variables"; // Required
import "feathercss/dist/components/global"; // Required
import "feathercss/dist/components/typography";
//... and so forth@import "feathercss/dist/feather.css"; /* or feather.min.css */
/* or import them individually */
@import "feathercss/dist/components/variables.css"; /* Required */
@import "feathercss/dist/components/global.css"; /* Required */
@import "feathercss/dist/components/typography.css";
/*... and so forth*/@import "feathercss/dist/feather"; /* or feather.min */
/* or import them individually */
@import "feathercss/dist/components/variables"; /* Required */
@import "feathercss/dist/components/global"; /* Required */
@import "feathercss/dist/components/typography";
/*... and so forth*/