Typography

Base

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.

Headings

Use the <h1> to <h6> elements to define your headings.

Example

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5

h6 Heading 6

You can add the .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 or .uk-h6 class to alter the size of your headings, for example have a h1 look like a h3.

Paragraphs

The global font-size, line-height and regular margins between elements are set through variables, which can be customized. Paragraphs and other block elements stick to these values.

Text-level semantics

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

Example

Markup

<blockquote><p>Quotation</p><small>Source</small></blockquote>

Code blocks

For multiple lines of code, use the <pre> element which defines preformatted text. It creates a new text block that preserves spaces, tabs and line breaks. Nest a <code> element inside to define the code block.IMPORTANT Be sure to escape any angle brackets in the code for proper rendering.

Example

<pre><code>...</code></pre>

NOTE Optionally, you can add the .uk-scrollable-text class from the Utility component, which will set a max-height of 300px and provide a y-axis scrollbar.

Lists

Create an unordered list using the <ul> element and the <ol> element for ordered lists. The <li> element defines the list item.

Example

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 3

Item 4

Markup

<ul><li>...</li><li>...
<ul><li>...</li></ul></li></ul>

<ol><li>...</li><li>...
<ol><li>...</li></ol></li></ol>

Description lists

Create a description list using the <dl> element. Use <dt> to define the term and <dd> for the description.

Example

Description lists

A description list defines terms and their corresponding descriptions.

This is a term

This is a description.

This is a term

This is a description.

Markup

<dl><dt>...</dt><dd>...</dd></dl>

Tables

Create a table using the <table> element. Use <tr>, <td> and <th> elements to create table rows, table cells and table headings. The <thead>, <tbody> and <tfoot> elements define the table parts. You can also create captions by adding the <caption> element.

Markup

Responsive images

All images in UIkit are responsive by default. If the layout is narrowed, images adjust their size and keep their proportions.

Example

Resize the browser window to see the responsive behavior of the image.

NOTE To avoid the responsive behavior and preserve the original image dimensions, add the .uk-img-preserve class to one of your single images. If you have more than one image, you can also add the class to the parent container. This is not required for Google Maps.

Print

Optimize your pages for economic printing.

This component is based on the print styles from HTML5 Boilerplate. It strips your document from background colors and changes font colors to black to save printer ink. Pictures will be scaled down to fit the page and anchors are underlined to distinguish them from regular text.

Markup

Grid

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.

Usage

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.

Class

Description

.uk-width-1-1

Fills 100% of the available width.

.uk-width-1-2

Divides the grid into halves.

.uk-width-1-3 to .uk-width-2-3

Divides the grid into thirds.

.uk-width-1-4 to .uk-width-3-4

Divides the grid into fourths.

.uk-width-1-5 to .uk-width-4-5

Divides the grid into fifths.

.uk-width-1-6 to .uk-width-5-6

Divides the grid into sixths.

.uk-width-1-10 to .uk-width-9-10

Divides the grid into tenths.

We built an intentional redundancy into each set of unit classes, so that for instance the .uk-width-5-10 class will work just as well as .uk-width-1-2.

Example

Take a closer look at the following grid example, which gives you a great overwiew of all basic .uk-width-* classes.

.uk-width-1-3

.uk-width-1-3

.uk-width-1-3

.uk-width-1-2

.uk-width-1-2

.uk-width-3-10

.uk-width-7-10

NOTE The grid has no style related CSS. In our example we used panels from the Panel component.

Markup

Here is a simple code example of how the default grid with 2 columns would look like:

Responsive width

UIkit provides a number of very useful responsive widths classes. Basicall they work just like the usual width classes, except they are prefixed, so that they only come to effect at certain breakpoints. These classes can be combined with the visibility classes from the Utility component. This is great to adjust your layout and content for different device sizes.

IMPORTANT To create a margin between stacking grid columns, just add the data-uk-grid-margin attribute.

Example

.uk-width-medium-1-2.uk-width-large-1-3

.uk-hidden-medium.uk-width-large-1-3

.uk-width-medium-1-2.uk-width-large-1-3

.uk-width-1-2.uk-width-medium-1-3

.uk-hidden-small.uk-width-medium-1-3

.uk-width-1-2.uk-width-medium-1-3

.uk-width-1-1 .uk-visible-small

.uk-width-medium-1-1 .uk-visible-medium

.uk-width-large-1-1 .uk-visible-large

Grid gutter

Grids automatically create a horizontal gutter between columns and a vertical one between two succeeding grids. By default, the grid gutter is wider on large screens. To avoid this behavior and preserve the originial spacing, just add the .uk-grid-preserve class.

Markup

NOTE The horizontal divider can not be applied to grids with any of the uk-push-* or uk-pull-* classes.

Source ordering

You can change the display order of the columns to keep a specific column order in the source code. Add one of the .uk-push-* classes to move the column to the right and add one of the .uk-pull-* classes to move a column to the left. This allows you for example to flip the columns’ display order for wider viewports. The classes can also be used to offset columns, creating additional space between them.

Source ordering is useful for SEO and responsive design, because in narrow viewports the grid will be displayed according to the source order of the markup.

NOTE This feature only works in combination with one of the .uk-width-medium-* classes.

Markup

Wrap multiple rows

You can also create a grid with as many columns as you want, which automatically break into the next line. Just add the data-uk-grid-margin attribute to create a margin between the grid rows. Typically this layout is built using a <ul> element.

Example

Box

Box

Box

Box

Box

Box

NOTE You can also apply a custom width to your grid columns. Just add the .uk-width-custom class and use an inline style to define the width. This example uses fixed pixel values for the widths as you would do with images.

Box

Box

Box

Box

Box

Box

Box

Box

Markup

<ulclass="uk-grid"data-uk-grid-margin><!-- These elements have a width in percent --><liclass="uk-width-medium-1-5"">...</li><liclass="uk-width-medium-3-10"">...</li><!-- These elements have a width in pixel --><liclass="uk-width-custom"style="width: 100px;">...</li><liclass="uk-width-custom"style="width: 150px;">...</li></ul>

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 Grid component.

Usage

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.

Class

Description

.uk-panel

Add this class to a <div> element to define the Panel component.

.uk-panel-title

Add this class to a heading to create the panel title.

.uk-panel-badge

Add this class to a <div> element to create a panel badge. The easiest way to style your badge, is by adding the modifier classes from the Badge component.

Markup

Thumbnail

Create different thumbnail images, which come in various styles and sizes.

Usage

To apply this component, just add the .uk-thumbnail class to an <img>, <a> or <figure> element.

Example

Markup

<!-- This is an image as a thumbnail --><imgclass="uk-thumbnail"src=""alt=""><!-- This is an anchor as a thumbnail --><aclass="uk-thumbnail"href=""><imgsrc=""alt=""><a><!-- This is a figure as a thumbnail --><figureclass="uk-thumbnail"><imgsrc=""alt=""><figure>

Caption

Add the .uk-thumbnail-caption class to a <div> element to apply a text caption under the image.

Example

Caption <div>

Caption <a>

Caption <figure>

Markup

<!-- This is a div as a thumbnail with a caption --><divclass="uk-thumbnail"><imgsrc=""alt=""><divclass="uk-thumbnail-caption">...</div></div><!-- This is an anchor as a thumbnail with a caption --><aclass="uk-thumbnail"href=""><imgsrc=""alt=""><divclass="uk-thumbnail-caption">...</div></a><!-- This is a figure as a thumbnail with a caption --><figureclass="uk-thumbnail"><imgsrc=""alt=""><figcaptionclass="uk-thumbnail-caption">...</figcaption></figure>

Size modifiers

Apply the .uk-thumbnail-large, .uk-thumbnail-medium, .uk-thumbnail-small or .uk-thumbnail-mini classes to resize images. The Base component is required to make the images responsive by default.

Example

Markup

Utility

Container

Add the .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.

Centering

To center the container, use the .uk-container-center class. For any other block element, you additionally need to apply a width.

Example

Centered block element

Markup

<divclass="uk-width-medium-1-2 uk-container-center">...</div>

Clearing and floating

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.

Smaller margin

Add one of the following classes to add smaller spacing to block elements.

Class

Description

.uk-margin-small-top

Adds small top margin.

.uk-margin-small-bottom

Adds small bottom margin.

.uk-margin-small-left

Adds small left margin.

.uk-margin-small-right

Adds small right margin.

Remove margin

Add one of the following classes to remove spacing from block elements.

Class

Description

.uk-margin-remove

Removes all margins.

.uk-margin-top-remove

Removes top margin.

.uk-margin-bottom-remove

Removes bottom margin.

Auto margin

To add spacing to stacking elements, for example inline elements that wrap on smaller vieports, just add the data-uk-margin attribute to their parent container. It will automatically add the .uk-margin-small-top to the lower element.

Markup

Display utilities

Add one of these classes to change the display properties of an element.

Class

Description

.uk-display-block

Forces the element to behave like a block element.

.uk-display-inline

Forces the element to behave like an inline element.

.uk-display-inline-block

Forces the element to behave like an inline-block element.

Visibility utilities

Class

Description

.uk-hidden

Hides the element on any device.

.uk-visible-hover

Displays hidden content on hover using display: block. Add this class to the parent element.

.uk-visible-hover-inline

Displays hidden content on hover using display: inline-block. Add this class to the parent element.

Example

Hover me…

Bazinga!

Markup

<divclass="uk-visible-hover"><divclass="uk-hidden">...</div></div>

Responsive visibility

You can show or hide content on specific viewport widths. Breakpoints are set through variables and can easily be modified. Since the line between different device sizes keeps blurring, class names are kept general and do not refer to particular devices.

Class

Small (Phones)up to 767

Medium (Tablets)768 to 959

Large (Desktops)960 and larger

.uk-visible-small

Visible

Hidden

Hidden

.uk-visible-medium

Hidden

Visible

Hidden

.uk-visible-large

Hidden

Hidden

Visible

.uk-hidden-small

Hidden

Visible

Visible

.uk-hidden-medium

Visible

Hidden

Visible

.uk-hidden-large

Visible

Visible

Hidden

Animation

A basic collection of smooth animations to use within your page.

Usage

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.

Class

Description

.uk-animation-fade

The element fades in.

.uk-animation-scale-up

The element scales up.

.uk-animation-scale-down

The element scales down.

.uk-animation-slide-top

The element slides in from the top.

.uk-animation-slide-bottom

The element slides in from the bottom.

.uk-animation-slide-left

The element slides in from the left.

.uk-animation-slide-right

The element slides in from the right.

Example

Click on any of the boxes to see the animation.

Fade

Scale up

Scale down

Slide top

Slide bottom

Slide left

Slide right

Markup

<divclass="uk-animation-fade">...</div>

Reverse modifier

All provided animations are fade-in animations. Add the .uk-animation-reverse class to reverse any animation and fade the element out.

Example

Click on any of the boxes to see the animation.

Fade

Scale up

Scale down

Slide top

Slide bottom

Slide left

Slide right

Markup

<divclass="uk-animation-fade uk-animation-reverse">...</div>

Tooltip

Easily create a nicely looking tooltip.

Usage

To apply this component, add the data-uk-tooltip attribute to an element. You also need to add a title attribute, whose value will represent your tooltip’s text.

Markup

Scrollspy

Trigger events and animations while scrolling your page.

Usage

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.

Data attribute

Description

data-uk-scrollspy="{cls:'MY-CLASS'}"

Applies the class only the first time the element appears in the viewport.

Example

Scrollspy Nav

To automatically update the active menu item in a menu depending on the scroll position of your site, just add the data attribute data-uk-scrollspy-nav to any navigation. Each menu item must link to the ID of its corresponding part of the site.

Data attribute

Description

data-uk-scrollspy-nav

Triggers the JavaScript necessary for the functionality of the scrollspy nav.

data-uk-scrollspy-nav="{closest:'MY-SELECTOR'}"

Looks for the closest element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

Example

Markup

<a href="#my-id" class="uk-button" data-uk-smooth-scroll>...</a>

Want Know More?

UIKit is a lightweight and modular front-end framework for developing fast and powerful web interfaces. UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable.And many more details here
….

Testimonials

I’ve been going to Monet’s salon for over 2 years now. Monet, Connie and Nick do my hair. All of the people that work in Monet’s shop are talented. You can’t go wrong. My hair always gets compliments. Monet is such a wonderful person. It has been an honor to get to know him and his staff and become their friends. Thank you, Monet! Best wishes for further success with your salons in Canoga Park, Burbank, and Las Vegas!.Mindy S. | West Hills, CA

ABOUT US

Monet Salon is currently looking for new team members to enhance our salon. If you feel ready to make the move to a salon that looks and feels professional - and have some fun while working - we may be the right fit for you. Monet Salon provides a relaxed "drama-free" atmosphere for both hair stylists and clients. -Monet Salon Canoga Park