The Unkuna framework was developed based on these concepts:
- Unkuna developed each of its components based on the design principle called "mobile first".
Unkuna uses breakpoints to adapt the style of components to a certain screen size. These are the standardized values that it handles:
Breakpoints Screen width Prefix Small Less than 767px s Medium 768px to 991px m Large 992px to 1199px l Extra Large Greater than 1200px xl
Unkuna defines the style rules for the structure of the components in the file unkuna.css and the style rules of its minimalist design in the file unkuna-theme.css
- Unkuna makes use of the nkn- prefix in all the framework classes in order to identify the classes related to this framework.
"data" Attribute Information data-nkn-role = "accordion-toggle" The accordion component uses this attribute to show or hide its content. data-nkn-role = "dropdown-toggle" The dropdown component uses this attribute to show or hide its content. data-nkn-role = "hamburger-toggle" The hamburger menu component uses this attribute to show or hide its content. data-nkn-role = "close-modal" The modal component uses this attribute to close the modal. data-nkn-role = "navbar-toggle" The navbar component uses this attribute to show or hide its content on small screens.
Unkuna components have a z-axis display order (component positioning on the screen) by using the z-index property; these values are:
Z-index value Component 2020 Modal and hamburger-menu 2010 navbar 2000 dropdown