Download Github
English

Core concepts

The Unkuna framework was developed based on these concepts:

  1. Unkuna developed each of its components based on the design principle called "mobile first".
  2. 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

  3. 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

  4. Unkuna makes use of the nkn- prefix in all the framework classes in order to identify the classes related to this framework.
  5. 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.
  6. 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