{"id":31936467,"url":"https://github.com/stitchng/kryeion","last_synced_at":"2025-10-14T07:42:57.109Z","repository":{"id":45803379,"uuid":"111593262","full_name":"stitchng/Kryeion","owner":"stitchng","description":"A utility-class based, mid-sized, aspect-first and highly customizable CSS library for quick custom UI styles based on Modernizr and Browsengine ","archived":false,"fork":false,"pushed_at":"2024-07-23T05:06:57.000Z","size":183,"stargazers_count":5,"open_issues_count":5,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-06T17:49:34.111Z","etag":null,"topics":["aspect-first","css","customizable","itcss","modular-css","oocss","responsive-layout","ui","utility-classes"],"latest_commit_sha":null,"homepage":"https://css.kryeion.com","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stitchng.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-21T19:38:47.000Z","updated_at":"2023-10-01T04:57:06.000Z","dependencies_parsed_at":"2023-01-19T16:45:13.258Z","dependency_job_id":null,"html_url":"https://github.com/stitchng/Kryeion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/stitchng/Kryeion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchng%2FKryeion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchng%2FKryeion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchng%2FKryeion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchng%2FKryeion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stitchng","download_url":"https://codeload.github.com/stitchng/Kryeion/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stitchng%2FKryeion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018217,"owners_count":26086308,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspect-first","css","customizable","itcss","modular-css","oocss","responsive-layout","ui","utility-classes"],"created_at":"2025-10-14T07:42:53.094Z","updated_at":"2025-10-14T07:42:57.096Z","avatar_url":"https://github.com/stitchng.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":" # Kryeion\n\nA 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.\n\n## About\n\nKryeion 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 \u003cu style=\"color:indigo;\"\u003e\u003cb\u003e@supports\u003c/b\u003e\u003c/u\u003e _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.\n\n## How to Use\n\n```html\n\u003chtml class=\"full-height\"\u003e\n    \u003chead\u003e\n        \u003clink rel=\"stylesheet\" media=\"screen\" href=\"path/to/kryeion.css\"\u003e\n       \u003c!-- The 2 scripts below HAVE TO be included for kryeion to work --\u003e\n        \u003cscript src=\"path/to/browsengine.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n        \u003cscript src=\"path/to/modernizr.js\" type=\"text/javascript\"\u003e\u003c/script\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n    \n    \u003c!-- MODALS--\u003e\n    \n    \u003csection class=\"modal kr-backdrop\" data-overlay-color=\"black\"\u003e\n        \u003cdiv class=\"modal-container as-dialog\"\u003e\n            \u003cdiv class=\"modal-boxing\"\u003e\n                \u003cdiv class=\"modal-head\"\u003e\n    \n                \u003c/div\u003e\n                \u003cdiv class=\"modal-body\"\u003e\n    \n                \u003c/div\u003e\n                \u003cdiv class=\"modal-foot\"\u003e\n    \n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/section\u003e\n    \n     \u003cdiv class=\"kr-boxing\"\u003e\n       \u003cdiv class=\"kr-row\"\u003e\n        \u003cdiv class=\"kr-column column-four\"\u003e\n        \u003carticle class=\"add-shadow\"\u003e\n        \u003csection class=\"tile\"\u003e\n            \u003ch1 class=\"heading-box text-centered\"\u003e\n                \u003csmall class=\"fancyheading-pane\"\u003e\n                        \u003cstrong class=\"fancyheading-pane-placeholder\"\u003eNew Intakes\u003c/strong\u003e \n                \u003c/small\u003e\n            \u003c/h1\u003e\n    \n            \u003c!-- PERSONA WIDGET --\u003e\n    \n            \u003cdiv class=\"persona\"\u003e\n                    \u003cul class=\"persona-element\"\u003e\n                        \u003cli\u003e\n                            \u003cdiv class=\"persona-box\"\u003e\n                                \u003cspan class=\"persona-avatar-box\"\u003e\n                                    \u003ca href=\"/\" class=\"persona-avatar\"\u003e\u003cimg src=\"\" alt=\"Avatar\" class=\"flexible\"\u003e\u003c/a\u003e \n                                \u003c/span\u003e\n                                \u003cdiv class=\"persona-info\"\u003e\n                                    \u003ch3\u003eHenry Banker\u003c/h3\u003e\n                                    \u003cp\u003eI know about what to do and what not.\u003c/p\u003e\n                                \u003c/div\u003e\n                            \u003c/div\u003e\n                        \u003c/li\u003e\n                        \u003cli\u003e\n                            \u003cdiv class=\"persona-box\"\u003e\n                                \u003cspan class=\"persona-avatar-box\"\u003e\n                                    \u003ca href=\"/\" class=\"persona-avatar\"\u003e\u003cimg src=\"\" alt=\"Avatar\" class=\"flexible\"\u003e\u003c/a\u003e \n                                \u003c/span\u003e\n                                \u003cdiv class=\"persona-info\"\u003e\n                                    \u003ch3\u003eSusan Ostien\u003c/h3\u003e\n                                    \u003cp\u003eI don't know what i think i should do.\u003c/p\u003e\n                                \u003c/div\u003e\n                            \u003c/div\u003e\n                        \u003c/li\u003e\n                    \u003c/ul\u003e\n \n                    \u003c!-- PANELS --\u003e\n    \n                    \u003csection clss=\"panel\"\u003e\n                        \u003cdiv class=\"panel-boxing\"\u003e\n                            \u003cdiv class=\"panel-head\"\u003e\n                                 \u003ch3 class=\"panel-heading\"\u003eWelcome!\u003c/h3\u003e\n                            \u003c/div\u003e\n                            \u003cdiv class=\"panel-body\"\u003e\n    \n                            \u003c/div\u003e\n                        \u003c/div\u003e\n                    \u003c/section\u003e\n\n    \n                       \u003c!-- TABLES --\u003e\n \n                    \u003cdiv class=\"table\" kinky-responsive\u003e\n                            \u003cp class=\"table-sidetext-box\"\u003e\n                                 \u003cspan class=\"table-side-text\"\u003einternals\u003c/span\u003e\n                            \u003c/p\u003e\n                            \u003ctable class=\"as-sheet\" summary=\"This is a table of costs and balances for the last quater\" no-scroll\u003e\n                                   \u003ccaption\u003eListings 1.0\u003c/caption\u003e\n                                   \u003cthead\u003e\n                                         \u003ctr\u003e\n                                            \u003cth\u003eS/N\u003c/th\u003e\n                                            \u003cth\u003eNames\u003c/th\u003e\n                                         \u003c/tr\u003e\n                                   \u003c/thead\u003e\n                                   \u003ctbody\u003e\n                                         \u003ctr\u003e\n                                            \u003ctd textholder=\"You have no transactions listed!\"\u003e\u003c!-- Empty table Body --\u003e\u003c/td\u003e\n                                         \u003c/tr\u003e\n                                   \u003c/tbody\u003e\n                            \u003c/table\u003e\n                     \u003c/div\u003e\n\n                    \u003c!-- CARDS --\u003e\n    \n                    \u003cdiv class=\"card\"\u003e\n                             \u003cdiv class=\"card-figure\"\u003e\n                                  \u003cfigure class=\"card-figure-content\" data-aspect-ratio=\"4by3\"\u003e\n                                      \u003cimg src=\"http://via.placeholder.com/1250x1050\" alt=\"\"\u003e\n                                  \u003c/figure\u003e\n                             \u003c/div\u003e\n                             \u003cdiv class=\"card-descripton\"\u003e\n                                 \u003cdiv class=\"card-content\"\u003e\n                                    \u003cdiv class=\"persona-box\"\u003e\n                                         \u003cspan class=\"persona-avatar-box\"\u003e\n                                             \u003ca href=\"/\" class=\"persona-avatar\"\u003e\u003cimg src=\"\" alt=\"Avatar\" class=\"flexible\"\u003e\u003c/a\u003e \n                                         \u003c/span\u003e\n                                        \u003cdiv class=\"persona-info\"\u003e\n                                            \u003ch3\u003eSusan Flowy\u003c/h3\u003e\n                                            \u003cp\u003eI don't know what i think i should do.\u003c/p\u003e\n                                        \u003c/div\u003e\n                                    \u003c/div\u003e\n                                  \u003c/div\u003e\n                             \u003c/div\u003e\n                        \u003c/div\u003e \n                   \u003c/div\u003e\n \n                    \u003c!-- NAVIGATION --\u003e\n    \n                    \u003cnav class=\"nav\"\u003e \n                          \u003cul class=\"nav-menu\" data-orientation=\"horizontal\"\u003e\n                                 \u003cli class=\"nav-menu-item\"\u003e\n                                    \u003ca href=\"javascript:void(0);\" class=\"nav-menu-item-button\"\u003eHome\u003c/a\u003e\n                                 \u003c/li\u003e\n                                 \u003cli class=\"nav-menu-item\"\u003e\n                                    \u003ca href=\"javascript:void(0);\" class=\"nav-memu-item-button\"\u003eAbout\u003c/a\u003e\n                                 \u003c/li\u003e \n                          \u003c/ul\u003e\n                   \u003c/nav\u003e\n\n                    \u003c!-- BUTTONS / BUTTON PACKS --\u003e\n    \n                   \u003cdiv class=\"button-pack\"\u003e\n                        \u003csection class=\"button-sub-pack kr-spaced\" role=\"dropdwn-box\"\u003e\n                              \u003ca href=\"javascript:void(0);\" class=\"button kr-gradiented\"\u003e\n                                  Dropping\n                              \u003c/a\u003e\n                              \u003cdiv class=\"button-dropdown\"\u003e\n                                   \u003cul class=\"button-dropdown-menu\"\u003e\n                                      \u003cli\u003e\u003ca href=\"#\"\u003eItem 1\u003c/a\u003e\u003c/li\u003e\n                                      \u003cli\u003e\u003ca href=\"#\"\u003eItem 2\u003c/a\u003e\u003c/li\u003e\n                                   \u003c/ul\u003e\n                              \u003c/div\u003e\n                         \u003c/section\u003e\n                         \u003csection class=\"button-sub-pack kr-spaced\" role=\"dropdwn-box\"\u003e\n                              \u003cbutton class=\"button kr-gradiented pill\"\u003e\n                                  All Notifications\n                              \u003c/button\u003e\n                              \u003cdiv class=\"button-dropdown pill\"\u003e\n                                   \u003cul class=\"button-dropdown-menu\" data-empty-text=\"No Notifications!\"\u003e\u003c!-- List is Empty --\u003e\u003c/ul\u003e\n                              \u003c/div\u003e\n                         \u003c/section\u003e\n                   \u003c/div\u003e\n    \n    \n            \u003c/section\u003e\n           \u003c/article\u003e\n           \u003c/div\u003e\n           \u003cdiv class=\"kr-column column-eight\"\u003e \n    \n                \u003c!-- TABS --\u003e\n    \n                \u003cnav class=\"tab-box anchor-right\"\u003e\n                    \u003cul class=\"tab tab-pinned\"\u003e\n                        \u003cli class=\"tab-item\"\u003e\n                            \u003ca href=\"javascript:void(0);\" class=\"tab-item-button active-item top-half-pill\"\u003e\u003cspan class=\"tab-text-sup\"\u003eUp Votes\u003c/span\u003e\u003cb class=\"tb-text-sub\"\u003e5\u003c/b\u003e\u003c/a\u003e\n                        \u003c/li\u003e\n                        \u003cli class=\"tab-item\"\u003e\n                            \u003ca href=\"javascript:void(0);\" class=\"tab-item-button top-half-pill\"\u003e\u003cspan class=\"tab-text-sup\"\u003eDown Votes\u003c/span\u003e\u003cb class=\"tab-text-sub\"\u003e11\u003c/b\u003e\u003c/a\u003e\n                        \u003c/li\u003e\n                    \u003c/ul\u003e\n                \u003c/nav\u003e\n            \n                \u003c!-- FORMS --\u003e\n            \n                \u003cform name=\"kyc-info\" action=\"/\" method=\"post\" enctype=\"multipart/form-data\" class=\"form\" kinky-responsive\u003e\n                   \n                   \u003cdiv class=\"form-control-box\" textholder=\"Full Name:\"\u003e\n                      \u003clabel for=\"fullname\"\u003e\n                         \u003cinput name=\"fullname\" placeholder=\"Full Name\" type=\"text\" class=\"form-input\"\u003e\n                       \u003c/label\u003e\n                   \u003c/div\u003e\n                 \n                   \u003cdiv class=\"form-control-box\" textholder=\"Gender:\"\u003e\n                      \u003clabel has-control=\"true\" control-icon=\"\u0026#xf078;\" for=\"gender\"\u003e\n                         \u003cselect name=\"gender\" class=\"form-select\"\u003e\n                            \u003coption value=\"M\"\u003eMale\u003c/option\u003e\n                            \u003coption selected=\"selected\" value=\"F\"\u003eFemale\u003c/option\u003e\n                         \u003c/select\u003e\n                      \u003c/label\u003e\n                   \u003c/div\u003e\n  \n                   \u003cdiv class=\"form-control-box\" textholder=\"Date Of Birth:\"\u003e\n                      \u003clabel has-control=\"true\" control-icon=\"\u0026#xf073;\" for=\"dob\"\u003e\n                         \u003cinput type=\"text\" class=\"form-datepicker\" name=\"dob\" readonly=\"readonly\" placeholder=\"mm/dd/yy\"\u003e\n                      \u003c/label\u003e\n                   \u003c/div\u003e\n  \n                   \u003cdiv class=\"form-control-box\" textholder=\"Height:\"\u003e\n                      \u003clabel class=\"inline\" for=\"height\"\u003e\n                        \u003cspan role=\"icon-placement\" icon=\"\u0026#xf023;\"\u003e\u003c/span\u003e\n                        \u003cinput name=\"height\" placeholder=\"Height (feet)\" type=\"text\" class=\"form-input\"\u003e\n                      \u003c/label\u003e\n                   \u003c/div\u003e\n  \n                   \u003cdiv class=\"form-control-box\"  textholder=\"Salary Scale:\"\u003e\n                      \u003clabel for=\"salary\"\u003e\n                         \u003cinput name=\"salary\" type=\"range\" min=\"0\" max=\"500000\" step=\"0\"\u003e\n                      \u003c/label\u003e\n                   \u003c/div\u003e\n  \n                   \u003cdiv class=\"form-control-box\"\u003e\n                      \u003clabel for=\"\"\u003e\n                         \u003cspan role=\"icon-placement\" icon=\"\u0026#xf1fa;\"\u003e\u003c/span\u003e\n                         \u003cinput placeholder=\"Joyent\" type=\"text\" class=\"form-input\"\u003e\n                      \u003c/label\u003e\n                   \u003c/div\u003e\n  \n                   \u003cdiv class=\"form-control-box\"  textholder=\"Disabled:\"\u003e\n                     \u003clabel for=\"disabled\"\u003e\n                         \u003cinput type=\"checkbox\" name=\"disabled\"\u003e\n                         \u003cspan role=\"control-replacement\"\u003eDisabled\u003c/span\u003e\n                     \u003c/label\u003e\n                   \u003c/div\u003e\n  \n                   \u003cdiv class=\"form-control-box\" textholder=\"Married:\"\u003e\n                     \u003clabel class=\"inline\" for=\"married\"\u003e\n                        \u003cinput type=\"radio\" name=\"married\"\u003e\n                        \u003cspan role=\"control-replacement\"\u003eYes\u003c/span\u003e\n                     \u003c/label\u003e\n                     \u003clabel class=\"inline\" for=\"married\"\u003e\n                        \u003cinput type=\"radio\" name=\"married\"\u003e\n                        \u003cspan role=\"control-replacement\"\u003eNo\u003c/span\u003e\n                     \u003c/label\u003e\n                    \n                     \u003cp class=\"note\"\u003eThis info is not optional.\u003c/p\u003e\n                   \u003c/div\u003e\n                \u003c/form\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e \n    \n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Demo\n\nYou can find the demo for **Kryeion CSS** [here](https://codepen.io/isocroft/pen/MEmVEX)\n\n## Browser Support\n\n* IE 9.0+\n* Chrome 4.0+\n* Firefox 3.5+\n* Safari 3.2+\n* Opera 10.5+ \n\n## License\n\nMIT\n\n## Contributing\n\nWe would love to have you contribute to this project. This project is backed by **CoolCodes** \u003cimg src=\"./logo-coolcodes.png\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstitchng%2Fkryeion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstitchng%2Fkryeion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstitchng%2Fkryeion/lists"}