UIkit Extra Style

Additional style to make things get easier and better.

:root

:root {
  /* UIkit */
  --uk-breakpoint-s: 640px;
  --uk-breakpoint-m: 960px;
  --uk-breakpoint-l: 1200px;
  --uk-breakpoint-xl: 1600px;

  /* Extra */
  --uk-font-family-heading: 'Roboto Condensed',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --uk-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --uk-font-size: 14.2px;
  --uk-font-color: #444;
  --uk-font-color-inverse: #fff;
  --uk-red: #f53123;
  --uk-pink: #ff387b;
  --uk-purple: #9c27b0;
  --uk-purple-deep: #673ab7;
  --uk-indigo: #3f51b5;
  --uk-blue: #1e87f0;
  --uk-blue-light: #03a9f4;
  --uk-cyan: #00bcd4;
  --uk-teal: #009688;
  --uk-green: #40bb45;
  --uk-green-light: #94de3d;
  --uk-lime: #cddc39;
  --uk-yellow: #ffeb3b;
  --uk-amber: #ffc107;
  --uk-orange: #ff9800;
  --uk-orange-deep: #ff5722;
  --uk-brown: #795548;
  --uk-gray: #9e9e9e;
  --uk-gray-light: #f4f4f4;
  --uk-gray-blue: #607d8b;
  --uk-gray-deep: #2b2b2b;
  --uk-gray-dark: #222;
  --uk-blackjack: #111;
}

Alert

Class Description
.uk-alert-small Smaller alert size
.uk-alert-noclose Reset padding and hide close button

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

  • <div class="" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-primary uk-alert-small" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

<div class="uk-alert-warning uk-alert-small uk-alert-noclose" uk-alert>
  <a class="uk-alert-close" uk-close></a>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>

Article

Class Description
.uk-article-body Adjust font-size for better readability

  • Base font-size. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Article body font-size. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • <p>Base font-size. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<div class="uk-article-body">
  <p>Article body font-size. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Background

Use uk-background-* to change background color (can be applied to other component). Add uk-contrast to adjust text color.

red
pink
purple
purple-deep
indigo
blue
blue-light
cyan
teal
green
green-light
lime
yellow
amber
orange
orange-deep
brown
gray-light
gray
gray-blue
gray-deep
blackjack

Alert

uk-alert-(color) uk-background-*

Information Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quisquam deleniti eos unde dolor. Dicta corrupti ullam aperiam maiores, neque cum ut. Sapiente neque maxime odio debitis, aliquid, laudantium rem?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quisquam deleniti eos unde dolor. Dicta corrupti ullam aperiam maiores, neque cum ut. Sapiente neque maxime odio debitis, aliquid, laudantium rem?

Card

uk-card-default uk-background-gray-light
Badge

Title

Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

uk-card-primary uk-background-purple
Badge

Title

Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Title

Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Badge

Title

Lorem ipsum color sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Label

uk-label uk-background-*

Default Success Warning Danger Indigo lime Orange Red Purple Blackjack

Badge

uk-badge uk-background-*

11 75 112 215

Noty

uk-noty uk-background-*

17
123

Base

Class Description
.uk-shadow-remove Remove box-shadow

Button

Class Description
.uk-button-gray Gray button
.uk-button-success Green button
.uk-button-warning Orange button
.uk-button-narrow Smaller padding-left and padding-right
.uk-button-radio Button radio
.uk-button-active-primary Button radio active state get primary color
.uk-button-active-secondary Button radio active state get secondary color
.uk-button-active-danger Button radio active state get danger color
.uk-button-active-success Button radio active state get success color
.uk-button-active-warning Button radio active state get warning color 
  • <div>
  <button class="uk-button uk-button-gray">Gray</button>
  <button class="uk-button uk-button-success">Success</button>
  <button class="uk-button uk-button-warning">Warning</button>

  <button class="uk-button uk-button-default uk-button-narrow uk-margin-left" type="button"><span uk-icon="icon:home"></span></button>
  <div class="uk-button-group uk-margin-left">
      <button class="uk-button uk-button-primary">Group Dropdown</button>
      <div class="uk-inline">
          <button class="uk-button uk-button-primary uk-background-indigo uk-button-narrow" type="button"><span uk-icon="icon:menu"></span></button>
          <div uk-dropdown="pos:bottom-right">
              <ul class="uk-nav uk-dropdown-nav">
                  <li><a href="#">Item</a></li>
                  <li><a href="#">Item</a></li>
                  <li><a href="#">Item</a></li>
                  <li><a href="#">Item</a></li>
              </ul>
          </div>
      </div>
  </div>
</div>

<div class="uk-margin">
  <div class="uk-button-group uk-button-radio">
    <input type="radio" id="radio-button-a-1" name="radio-button-a" value="1" checked hidden>
    <label for="radio-button-a-1" class="uk-button uk-button-default uk-button-active-success">Enabled</label>

    <input type="radio" id="radio-button-a-0" name="radio-button-a" value="0" hidden>
    <label for="radio-button-a-0" class="uk-button uk-button-default uk-button-active-danger">Disabled</label>
  </div>
  <div class="uk-button-group uk-button-radio uk-margin-left">
    <input type="radio" id="radio-button-b-2" name="radio-button-b" value="2" checked hidden>
    <label for="radio-button-b-2" class="uk-button uk-button-default uk-button-active-primary">Global</label>

    <input type="radio" id="radio-button-b-1" name="radio-button-b" value="1" hidden>
    <label for="radio-button-b-1" class="uk-button uk-button-default uk-button-active-success">Enabled</label>

    <input type="radio" id="radio-button-b-0" name="radio-button-b" value="0"  hidden>
    <label for="radio-button-b-0" class="uk-button uk-button-default uk-button-active-danger">Disabled</label>
  </div>
</div>

Card

Class Description
.uk-card-panel .uk-card, .uk-card-default, .uk-box-shadow-small in one class
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto adipisci quos, eos omnis autem voluptatem facilis facere ducimus dolorem doloribus, cum fugit dolor dignissimos ipsum cumque voluptates culpa saepe delectus. 
  • <div class="uk-card-panel uk-card-body">
  Lorem ipsum..
</div>

Form

Class Description
.uk-form-stacked@l Force .uk-form-horizontal form to be stacked at large screen
.uk-form-width-xlarge Width 650px

Notification

Add uk-icon-emphasis to have icon with background color.

Default notification
Message
Primary message
Extra uk-background-teal

UIkit.notification(
  '<span uk-icon=\'icon:info;ratio:1.5\'></span> <div>Primary message</div>',
  {status:'primary uk-icon-emphasis'}
)
UIkit.notification(
  '<span class=\'uk-background-teal\' uk-icon=\'icon:info;ratio:1.5\'></span> <div>Background</div>',
  {status:' uk-icon-emphasis'}
)

Noty

.uk-noty is small and superscript label used to indicate notification in regular text or icon.

17
123 
<div class="uk-display-inline-block uk-position-relative">
  <span uk-icon="icon:bell;ratio:1.1"></span>
  <span class="uk-noty">17</span>
</div>
<div class="uk-display-inline-block uk-position-relative uk-margin-left">
  <span uk-icon="icon:mail;ratio:1.2"></span>
  <span class="uk-noty uk-background-orange">123</span>
</div>

Table

Table Heading Table Heading Table Heading
Default row Table Data Table Data
Default row Table Data Table Data
tr.uk-row-primary Table Data Table Data
tr.uk-row-secondary Table Data Table Data
tr.uk-row-success Table Data Table Data
tr.uk-row-warning Table Data Table Data
tr.uk-row-danger Table Data Table Data

Text

Class Description
.uk-text-mini Default text - Small text - Mini text
.uk-text-reset Used to "reset text" to the base style, thus it will appear as default text.

Width

Class variant Description
.uk-width-min-none Reset minimum width
.uk-width-max-none Reset maximum width
.uk-width-25 @s,@m,@l,@xl Width 25px
.uk-width-50 @s,@m,@l,@xl Width 50px
.uk-width-75 @s,@m,@l,@xl Width 75px
.uk-width-100 @s,@m,@l,@xl Width 100px
.uk-width-125 @s,@m,@l,@xl Width 125px
.uk-width-150 @s,@m,@l,@xl Width 150px
.uk-width-175 @s,@m,@l,@xl Width 175px
.uk-width-200 @s,@m,@l,@xl Width 200px
.uk-width-225 @s,@m,@l,@xl Width 225px
.uk-width-250 @s,@m,@l,@xl Width 250px
.uk-width-275 @s,@m,@l,@xl Width 275px
.uk-width-300 @s,@m,@l,@xl Width 300px
.uk-width-325 @s,@m,@l,@xl Width 325px
.uk-width-350 @s,@m,@l,@xl Width 350px
.uk-width-375 @s,@m,@l,@xl Width 375px
.uk-width-400 @s,@m,@l,@xl Width 400px
.uk-width-450 @s,@m,@l,@xl Width 450px
.uk-width-500 @s,@m,@l,@xl Width 500px
.uk-width-550 @s,@m,@l,@xl Width 550px
.uk-width-600 @s,@m,@l,@xl Width 600px
.uk-width-650 @s,@m,@l,@xl Width 650px
.uk-width-700 @s,@m,@l,@xl Width 700px
.uk-width-750 @s,@m,@l,@xl Width 750px
.uk-width-800 @s,@m,@l,@xl Width 800px
.uk-width-850 @s,@m,@l,@xl Width 850px
.uk-width-900 @s,@m,@l,@xl Width 900px
.uk-child-width-1-7 @s,@m,@l,@xl All elements take up a sevent of their parent container.
.uk-child-width-1-8 @s,@m,@l,@xl All elements take up an eight of their parent container.
.uk-child-width-1-9 @s,@m,@l,@xl All elements take up a ninth of their parent container.
.uk-child-width-1-10 @s,@m,@l,@xl All elements take up a tenth of their parent container.