Download Github
English

Unkuna Theme

In this section Unkuna presents the file unkuna-theme.css that has pre-set values ​​for some properties of the framework components. If the user wishes, they can customize these values.

Note: You can use these variables in your own style rules.

Definition of variables:

  1. --nkn-border-color: Assign a color to the border of an element.

    Components that use this variable

    • Accordion
    • Form
    • Modal
    • Table

    Utilities that use this variable

    • nkn-border

  2. --nkn-box-shadow: Assign shadow to an element.

    Components that use this variable

    • Dropdown
    • Hamburger menu

  3. --nkn-width-container: Assigns a maximum width to the content of the web page, exclusively for the nkn-container class.

    The preset values ​​for each breakpoint are:

    Breakpoints Screen width Value of --nkn-width-container
    Small Less than 767px 100%
    Medium 768px to 991px 720px
    Large 992px to 1199px 960px
    Extra Large Greater than 1200px 1140px

  4. --nkn-curtain-color: Assign a background color of a component.

    Components that use this variable

    • Modal
    • Hamburger

  5. --nkn-label-color:Assign a color to the label label.

    Components that use this variable

    • Form

  6. --nkn-primary-title-color: Assign a color for primary titles.

  7. --nkn-secondary-title-color: Assign a color for secondary titles.

    Components that use this variable

    • Vertical responsive table

Use

Link the file

Link custom unkuna-theme.css in your project. The resource unkuna-theme.css, must come after the resource unkuna.css (see the starter template).

HTML5 template

Custom variable values

  1. In the unkuna-theme.cssfile , find the variable for the property you want to edit; for example the variable --nkn-border-color.
  2. Once you have identified the variable you want to modify, you assign it the value of your preference; for example --nkn-border-color: gray.
  3. Save changes and view in your browser.