https://github.com/nick-mazuk/lightening-css
A lightweight, flexible, and responsive CSS framework. Uses the CUBE CSS methodology.
https://github.com/nick-mazuk/lightening-css
css css-cube css-flexbox css-framework css-grid css-grid-layout css3 css3-animations flexible responsive-css responsive-layout responsive-web-design scss scss-files scss-framework scss-styles
Last synced: 29 days ago
JSON representation
A lightweight, flexible, and responsive CSS framework. Uses the CUBE CSS methodology.
- Host: GitHub
- URL: https://github.com/nick-mazuk/lightening-css
- Owner: Nick-Mazuk
- License: mit
- Created: 2020-08-10T03:58:56.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-08-28T18:27:47.000Z (over 4 years ago)
- Last Synced: 2025-04-11T23:12:36.658Z (about 1 month ago)
- Topics: css, css-cube, css-flexbox, css-framework, css-grid, css-grid-layout, css3, css3-animations, flexible, responsive-css, responsive-layout, responsive-web-design, scss, scss-files, scss-framework, scss-styles
- Language: CSS
- Homepage:
- Size: 477 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Lightening CSS
A CSS framework that I can use for my projects inspired by the [CUBE CSS methodology](https://piccalil.li/blog/cube-css/).
## Features
### Incredible Flexibility
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.
### Controlled Responsiveness
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.
### Performance Optimized
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.
### Enforced Accessibility
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.
## Install
`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.
## Documentation
Coming soon when the framework is more complete and mature.