HTML - Documentation
You have 0 articles to compare. Do you want to see compare view now?
Articles on this page:
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.
To create the grid container, add the
.uk-grid class to a parent element. Add one of the
.uk-width-* classes to child elements to determine, how the units shall be sized. The grid supports 1, 2, 3, 4, 5, 6 and 10 unit divisions. This table gives you an overview of the
uk-width-* classes that can be applied to units.
||Fills 100% of the available width.|
||Divides the grid into halves.|
||Divides the grid into thirds.|
||Divides the grid into fourths.|
||Divides the grid into fifths.|
||Divides the grid into sixths.|
||Divides the grid into tenths.|
Provides the default style for all HTML elements.
This component defines the base look of your page. It offers great typography by setting the default colors, margins, font-sizes and more for each HTML element. This page is a short guide on how to use basic HTML elements and how UIkit styles them.
Note Basically UIkit utilizes the famous Normalize.css, but distributed it among all components. Only the necessary parts are adopted into the Base component to keep the unprefixed CSS as small as possible. Most of the normalization related CSS is moved into the Form, Button and Table components. This makes UIkit and its components very robust against conflicts with other CSS frameworks so that you don't have to worry about browser inconsistencies in your projects.
<h6> elements to define your headings.
h1 Heading 1
h2 Heading 2
h3 Heading 3
h4 Heading 4
h5 Heading 5
h6 Heading 6
You can add the
.uk-h6 class to alter the size of your headings, for example have a
h1 look like a
A collection of useful utility classes to style your content.
.uk-container class to a block element to give it a max-width and wrap the main content of your website. For large screens it applies a different max-width.
To center the container, use the
.uk-container-center class. For any other block element, you additionally need to apply a width.
<div class="uk-width-medium-1-2 uk-container-center">...</div>
Floating is fundamental for creating all kinds of layouts. But floats need to be cleared or in the worst case, you might end up with a scrambled site. The following classes will help you to setup basic layouts.
||Float the element to the left.|
||Float the element to the right.|
||Add this class to a parent container to clear floats.|
Trigger events and animations while scrolling your page.
The scrollspy component listens to page scrolling and triggers events based on the scroll position. For example, if you scroll down a page and an element appears the first time in the viewport you can trigger a smooth animation to fade in the element. Just add the
data-uk-scrollspy attribute and the following options.
||Applies the class only the first time the element appears in the viewport.|
||Applies the class everytime the element appears in the viewport.|
||Adds a delay in milliseconds to the animation.|
Typically, classes from the Animation component are used together with the scrollspy.0