https://github.com/stitchng/kryeion
A utility-class based, mid-sized, aspect-first and highly customizable CSS library for quick custom UI styles based on Modernizr and Browsengine
https://github.com/stitchng/kryeion
aspect-first css customizable itcss modular-css oocss responsive-layout ui utility-classes
Last synced: 4 months ago
JSON representation
A utility-class based, mid-sized, aspect-first and highly customizable CSS library for quick custom UI styles based on Modernizr and Browsengine
- Host: GitHub
- URL: https://github.com/stitchng/kryeion
- Owner: stitchng
- License: mit
- Created: 2017-11-21T19:38:47.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2024-07-23T05:06:57.000Z (over 1 year ago)
- Last Synced: 2025-04-06T17:49:34.111Z (10 months ago)
- Topics: aspect-first, css, customizable, itcss, modular-css, oocss, responsive-layout, ui, utility-classes
- Language: CSS
- Homepage: https://css.kryeion.com
- Size: 179 KB
- Stars: 5
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Kryeion
A utility-class based, mid-sized, aspect-first (unopinionated) and customizable CSS library for quick application of custom UI styles. However, it depends on the classes generated by **Modernizr** and **Browsengine** JavaScript libraries to function well. Much like [**Tailwind**](https://github.com/tailwindcss/tailwindcss) but unlike [**Bulma**](https://www.github.com/jgthms/bulma) and [**Bootstrap**](https://www.github.com/twbs/bootstrap), **Kryeion** does not force you to use rounded edges when you don't want to or use flat colors when you want gradients and vice-versa. Kryeion makes it so customizable and configurable in a darn smart way. Also, much like [**Bulma**](https://www.github.com/jgthms/bulma) or [**Bootstrap**](https://www.github.com/twbs/bootstrap), it also supports both **float-based** and **flexbox-based** layouts (not at the same time) and widgets. In the future, _Kryeion_ could support **grid-based** layouts. It also comes in a modular structure and is geared towards _progressive enhancement_ with support for browsers like _old IE_, _old Firefox_ and _Opera Mini_. It also has **utility and helper classes** for quick but apt UI effects e.g. flipping an element (on its horizontal/vertical axis) 90 degrees or having a fancy header.
## About
Kryeion makes it really easy to create custom widgets and simple no-tween effects by simply adding a class or set of classes to your HTML. It's really that simple. It works great with (and actually depends on) both [**Modernizr**](https://github.com/Modernizr/Modernizr) and [**Browsengine**](https://github.com/isocroft/browsengine). With Kryeion, we are still investigating the viability of eliminating JS feature/engine detection dependencies using the new @supports _conditional at-rule_ for feature/engine detection. Therefore, it's important to note that this CSS library is still in active development with lots of experimentation going on. However, this project is commited to building out a **beta release** and **release candidate** in the coming months. Finally, Kryeion is written with a lot of cutting-edge best practice owing to its' use of OOCSS ([**Object-Oriented CSS**](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)) CSS Methodology and ITCSS ([**Inverted Triangle of CSS**](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)) Code Architecture and a pre-compiled SASS file for modularity.
## How to Use
```html
New Intakes
-
![Avatar]()
Henry Banker
I know about what to do and what not.
-
![Avatar]()
Susan Ostien
I don't know what i think i should do.
Welcome!
internals
Listings 1.0
S/N
Names
![Avatar]()
Susan Flowy
I don't know what i think i should do.
```
## Demo
You can find the demo for **Kryeion CSS** [here](https://codepen.io/isocroft/pen/MEmVEX)
## Browser Support
* IE 9.0+
* Chrome 4.0+
* Firefox 3.5+
* Safari 3.2+
* Opera 10.5+
## License
MIT
## Contributing
We would love to have you contribute to this project. This project is backed by **CoolCodes** 