TEXT-LEVEL SEMANTICS

The following list gives you a short overview of the most commonly used text-level semantics and how to utilize them.

UIKIT GRID

Create a fully responsive, fluid and nestable grid layout.

The grid system of UIkit follows the mobile-first approach and accomodates up to 10 grid columns. It uses units with predefined classes inside each grid, which define the column width. It is also possible to combine the grid with classes from the Flex component, although it works only in modern browsers.

FLEX AND GRID

UIKIT PANEL

Create layout boxes with different styles.

UIkit uses panels to outline certain sections of your content, which can be styled differently. Typically, panels are arranged in grid columns from the.

The Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel's content. Get more option to visit Grid component.

PANEL WITH ICON

Easily apply an icon from our Icon component to your panel by adding one of the .uk-icon-* classes to an <i> or <span> element inside the panel title.

UIKIT BLOCK

Separate content sections by bundling them in blocks with different styles.

To apply this component, just add the .uk-block class to a container element.

To apply different background colors and paddings, add one of the following classes. If two consecutive blocks have the same background color, the padding will automatically be divided.

UIKIT ARTICLE

Create articles within your page.

The article component constists of the article itself, a title, meta data, an opening paragraph and dividers.

Article title

Written by Super User on 12 April 2012. Posted in Blog

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

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

---

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Read more

COMMENT

Create comments, for example about articles.

The Comment component consists of a comment header, including an avatar, a title and meta data, and a comment body.

• 

  Author

  12 days ago | Profile | #

  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

  • 

    Author

    12 days ago | Profile | #

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

BUTTON

Easily create nicely looking buttons, which come in different styles.

To apply this component, add the .uk-button class to an <a> or <button> element. Now you have created a button. Add the disabled attribute to a <button> element to disable the button.

Link Button Disabled

COLOR MODIFIERS

There are several color modifiers available. Just add one of the following classes to apply a different look.

SIZE MODIFIERS

Add the .uk-button-mini, .uk-button-small or .uk-button-large class to a button to make it smaller or larger.

Mini button Mini button

Small button Small button

Default button Default button

Large button Large button

FULL WIDTH BUTTON

Add the .uk-width-1-1 class from the Grid component and the button will take up full width.

Button Button

BUTTON GROUP

To create a button group, add the .uk-button-group class to a <div> element around the buttons. That's it! No further markup needed.

BUTTON WITH DROPDOWNS

A button can be used to trigger a dropdown menu from the Dropdown component. Just add the .uk-button-dropdown class and the data-uk-dropdown attribute to a <div> element that contains the button and the dropdown itself.

UIKIT ALERT

Defines styles for success, warning and error messages.

To apply this component, add the .uk-alert class to a block element.

To apply a close button, add the .uk-alert-close class to a <button> or <a> element inside the alert box. To enable the JavaScript for the close button, just add the data-uk-alert attribute to the alert box. We recommend adding the .uk-close class from the Close component to give the button a proper styling, though you can also use text or an image. More option visit Uikit Alert.

SIZE MODIFIER

Add the .uk-alert-large class to increase the spacing in an alert box. This can be useful, if you want to use richer typography.

UIKIT ANIMATION

A basic collection of smooth animations to use within your page. For more options please visit Uikit Animation

To apply this component, add any .uk-animation-* class to an element and it will fade in with a nice animation. These classes are commonly set by using JavaScript to apply the animation to specific behaviors.

Hover over any of the boxes to see the animation.

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

This theme is built on the Warp framework, a well-engineered theme framework for WordPress and Joomla, and utilizes all of its latest features. The user interface is powered by UIkit, a lightweight and modular front-end framework, which provides the theme's styling. The theme also comes with a wide range of different layouts and widget variations.

This is a hidden article.