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 but unlike Bulma and 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 or 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.
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 and 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) CSS Methodology and ITCSS (Inverted Triangle of CSS) Code Architecture and a pre-compiled SASS file for modularity.
<html class="full-height">
<head>
<link rel="stylesheet" media="screen" href="path/to/kryeion.css">
<!-- The 2 scripts below HAVE TO be included for kryeion to work -->
<script src="path/to/browsengine.js" type="text/javascript"></script>
<script src="path/to/modernizr.js" type="text/javascript"></script>
</head>
<body>
<!-- MODALS-->
<section class="modal kr-backdrop" data-overlay-color="black">
<div class="modal-container as-dialog">
<div class="modal-boxing">
<div class="modal-head">
</div>
<div class="modal-body">
</div>
<div class="modal-foot">
</div>
</div>
</div>
</section>
<div class="kr-boxing">
<div class="kr-row">
<div class="kr-column column-four">
<article class="add-shadow">
<section class="tile">
<h1 class="heading-box text-centered">
<small class="fancyheading-pane">
<strong class="fancyheading-pane-placeholder">New Intakes</strong>
</small>
</h1>
<!-- PERSONA WIDGET -->
<div class="persona">
<ul class="persona-element">
<li>
<div class="persona-box">
<span class="persona-avatar-box">
<a href="/" class="persona-avatar"><img src="" alt="Avatar" class="flexible"></a>
</span>
<div class="persona-info">
<h3>Henry Banker</h3>
<p>I know about what to do and what not.</p>
</div>
</div>
</li>
<li>
<div class="persona-box">
<span class="persona-avatar-box">
<a href="/" class="persona-avatar"><img src="" alt="Avatar" class="flexible"></a>
</span>
<div class="persona-info">
<h3>Susan Ostien</h3>
<p>I don't know what i think i should do.</p>
</div>
</div>
</li>
</ul>
<!-- PANELS -->
<section clss="panel">
<div class="panel-boxing">
<div class="panel-head">
<h3 class="panel-heading">Welcome!</h3>
</div>
<div class="panel-body">
</div>
</div>
</section>
<!-- TABLES -->
<div class="table" kinky-responsive>
<p class="table-sidetext-box">
<span class="table-side-text">internals</span>
</p>
<table class="as-sheet" summary="This is a table of costs and balances for the last quater" no-scroll>
<caption>Listings 1.0</caption>
<thead>
<tr>
<th>S/N</th>
<th>Names</th>
</tr>
</thead>
<tbody>
<tr>
<td textholder="You have no transactions listed!"><!-- Empty table Body --></td>
</tr>
</tbody>
</table>
</div>
<!-- CARDS -->
<div class="card">
<div class="card-figure">
<figure class="card-figure-content" data-aspect-ratio="4by3">
<img src="http://via.placeholder.com/1250x1050" alt="">
</figure>
</div>
<div class="card-descripton">
<div class="card-content">
<div class="persona-box">
<span class="persona-avatar-box">
<a href="/" class="persona-avatar"><img src="" alt="Avatar" class="flexible"></a>
</span>
<div class="persona-info">
<h3>Susan Flowy</h3>
<p>I don't know what i think i should do.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- NAVIGATION -->
<nav class="nav">
<ul class="nav-menu" data-orientation="horizontal">
<li class="nav-menu-item">
<a href="javascript:void(0);" class="nav-menu-item-button">Home</a>
</li>
<li class="nav-menu-item">
<a href="javascript:void(0);" class="nav-memu-item-button">About</a>
</li>
</ul>
</nav>
<!-- BUTTONS / BUTTON PACKS -->
<div class="button-pack">
<section class="button-sub-pack kr-spaced" role="dropdwn-box">
<a href="javascript:void(0);" class="button kr-gradiented">
Dropping
</a>
<div class="button-dropdown">
<ul class="button-dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
</section>
<section class="button-sub-pack kr-spaced" role="dropdwn-box">
<button class="button kr-gradiented pill">
All Notifications
</button>
<div class="button-dropdown pill">
<ul class="button-dropdown-menu" data-empty-text="No Notifications!"><!-- List is Empty --></ul>
</div>
</section>
</div>
</section>
</article>
</div>
<div class="kr-column column-eight">
<!-- TABS -->
<nav class="tab-box anchor-right">
<ul class="tab tab-pinned">
<li class="tab-item">
<a href="javascript:void(0);" class="tab-item-button active-item top-half-pill"><span class="tab-text-sup">Up Votes</span><b class="tb-text-sub">5</b></a>
</li>
<li class="tab-item">
<a href="javascript:void(0);" class="tab-item-button top-half-pill"><span class="tab-text-sup">Down Votes</span><b class="tab-text-sub">11</b></a>
</li>
</ul>
</nav>
<!-- FORMS -->
<form name="kyc-info" action="/" method="post" enctype="multipart/form-data" class="form" kinky-responsive>
<div class="form-control-box" textholder="Full Name:">
<label for="fullname">
<input name="fullname" placeholder="Full Name" type="text" class="form-input">
</label>
</div>
<div class="form-control-box" textholder="Gender:">
<label has-control="true" control-icon="" for="gender">
<select name="gender" class="form-select">
<option value="M">Male</option>
<option selected="selected" value="F">Female</option>
</select>
</label>
</div>
<div class="form-control-box" textholder="Date Of Birth:">
<label has-control="true" control-icon="" for="dob">
<input type="text" class="form-datepicker" name="dob" readonly="readonly" placeholder="mm/dd/yy">
</label>
</div>
<div class="form-control-box" textholder="Height:">
<label class="inline" for="height">
<span role="icon-placement" icon=""></span>
<input name="height" placeholder="Height (feet)" type="text" class="form-input">
</label>
</div>
<div class="form-control-box" textholder="Salary Scale:">
<label for="salary">
<input name="salary" type="range" min="0" max="500000" step="0">
</label>
</div>
<div class="form-control-box">
<label for="">
<span role="icon-placement" icon=""></span>
<input placeholder="Joyent" type="text" class="form-input">
</label>
</div>
<div class="form-control-box" textholder="Disabled:">
<label for="disabled">
<input type="checkbox" name="disabled">
<span role="control-replacement">Disabled</span>
</label>
</div>
<div class="form-control-box" textholder="Married:">
<label class="inline" for="married">
<input type="radio" name="married">
<span role="control-replacement">Yes</span>
</label>
<label class="inline" for="married">
<input type="radio" name="married">
<span role="control-replacement">No</span>
</label>
<p class="note">This info is not optional.</p>
</div>
</form>
</div>
</div>
</div>
</body>
</html>You can find the demo for Kryeion CSS here
- IE 9.0+
- Chrome 4.0+
- Firefox 3.5+
- Safari 3.2+
- Opera 10.5+
MIT
We would love to have you contribute to this project. This project is backed by CoolCodes 