A CSS framework that I can use for my projects inspired by the CUBE CSS methodology.

All settings can be changed with a global SCSS config file or a local CSS variable. That means you can easily override global settings on individual elements.

Responsiveness is important. But wouldn't it be great to control how columns and other layouts collapse/expand? This framework has multiple, responsive layout options to control that experience.

This includes the "columns" class which utilizes the Holy Albatross — effectively giving you "container queries" automatically.

Every line of code is carefully considered. The framework is modular so you only need to use the code you need. It's also incredibly lightweight at just a few kilobytes gzipped and minified. It only uses selectors that browsers can quickly parse and render. And finally, state changes use data attributes. That means it's purge css friendly. No more needing to whitelist css styles.

For styles to be applied properly, you need to use semantic markup. That means your HTML is forced to be screen-reader friendly. In the future, the framework will also enforce ARIA attributes where appropriate. That means if it looks right, it's accessible. No more needing to test accessibility elsewhere.

npm install lightening-css

Note: this framework is not production quality yet. There may be bugs. Also, in the coming weeks there could be several changes that are not backwards compatible.

Coming soon when the framework is more complete and mature.