Update README.md

README.md

@@ -1,10 +1,12 @@
  # 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.
+A utility-class based, mid-sized, aspect-first (opinionated) and customizable CSS library for quick application of custom UI styles. **Kryeion** is *"aspect-first"*, because it makes use of [**context-aware styling in CSS**](https://isocroft.medium.com/the-many-things-that-using-css-frameworks-alone-wont-teach-you-96b732566364). **Kryeion** optionally depends on the classes generated by [**Modernizr**](https://modernizr.com/) JavaScript library to offer styling based on feature support. However, it uses [**Browsengine**](https://www.github.com/isocroft/browsengine) JavaScript library to function well on different browsers. Much like [**Tailwind CSS**](https://github.com/tailwindcss/tailwindcss), it uses [utility-classes](https://automaticcss.com/docs/utility-classes-what-why/) 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**, **flexbox-based** and **grid-based** layouts (depending on browser/reader capabilities) and widgets as well as **feature queires** . In the future, _Kryeion_ could support **Cascade layers** and **** 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 <u style="color:indigo;"><b>@supports</b></u> _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.
+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) [**Browsengine**](https://github.com/isocroft/browsengine). With Kryeion, we are still investigating the viability of eliminating JS feature/engine detection dependencies using the new <u style="color:indigo;"><b>@supports</b></u> _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 ITCSS ([**Inverted Triangle of CSS**](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)) Code Architecture and CAS ([**Context-Aware Styling in CSS**](https://isocroft.medium.com/the-many-things-that-using-css-frameworks-alone-wont-teach-you-96b732566364)) for modularity.
+
+As a result, **Kryeion** doesn't recommend the use of OOCSS ([**Object-Oriented CSS**](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/)) CSS Methodology and/or BEM ([**Block-Element-Modifier**](https://getbem.com/introduction/)) owing to the fact that OOCSS aims to separate styles prematurely in an unatural manner while BEM excessively couples a class selector to a given context on a HTML page.
 
 ## How to Use
 
@@ -24,13 +26,13 @@ Kryeion makes it really easy to create custom widgets and simple no-tween effect
         <div class="modal-container as-dialog">
             <div class="modal-boxing">
                 <div class="modal-head">
-
+                  <h4>My Modal</h4>
                 </div>
                 <div class="modal-body">
-
+                  <section data-initials="HC">Hanks Chidubem</section>
                 </div>
                 <div class="modal-foot">
-
+                  <button type="button" class="">Ok</button>
                 </div>
             </div>
         </div>