Core concepts
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.
-
Unkuna makes use of the data-nkn-role attribute in different components to exchange information with javascript, this allows to give functionality to the components.
"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