Print Material

TYPOGRAPHY (UIKIT)

UIKIT DEFAULTS

These components generally normalize HTML elements for cross browser functionality and add some very basic styling.

HEADINGS

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

h1 Heading 1

h2 Heading 2

h3 Heading 3

h4 Heading 4

h5 Heading 5
h6 Heading 6

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates cum eaque possimus delectus accusamus a, repellat reprehenderit odit tempora unde, consectetur in, assumenda odio dolore beatae optio sed accusantium iste. 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.

BLOCKQUOTES

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

Someone famous

TEXT-LEVEL SEMANTICS

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

Element Description
<a> Turn text into hypertext using the a element.
<em> Emphasize text using the em element.
<strong> Imply any extra importance using the strong element.
<code> Define inline code snippets using the code element.
<del> Mark document changes as deleted text using the del element.
<ins> Mark document changes as inserted text using the ins element.
<mark> Highlight text with no semantic meaning using the mark element.
<q> Define inline quotations using q element inside a q element.
<abbr> Define an abbreviation using the abbr element with a title.
<dfn> Define a definition term using the dfn element with a title.
<small> De-emphasize text for small print using the small element.

UIKIT LAYOUT

Apply our fully responsive fluid grid system and panels, common layout parts like blog articles and comments and useful utility classes.

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.

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

FLEX AND GRID

Flex Grid Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

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.

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 Panel.
Hot

Title

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

Title

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

Title

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

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.

Panel

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

Panel

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

Panel

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

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.

Class Description
.uk-block-default Add the default background color, usually white or similar.
.uk-block-muted Adds a light background color.
.uk-block-primary Adds a primary background color.
.uk-block-secondary Adds a another background color, usually a dark one.

Block

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

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

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

UIKIT ARTICLE

Create articles within your page.

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

Class Description
.uk-article Add this class to define the Article component. Typically you would use an <article> element for this.
.uk-article-title Add this class to a heading to create an article title. Typically you would use a <h1> element for this.
.uk-article-meta Add this class to a paragraph which contains meta data about your article.
.uk-article-lead Add this class to the opening paragraph of your article to highlight it.
.uk-article-divider Add this class to a <hr> element to create a divider seperating different sections of your article.

Article title

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.

Class Description
.uk-comment Add this class to define the Comment component.
.uk-comment-header Add this class to create a comment header.
.uk-comment-avatar Add this class to an <img> element to create an avatar for the comment author.
.uk-comment-title Add this class to a heading to create a comment title.
.uk-comment-meta Add this class to a paragraph to create meta data about your comment.
.uk-comment-body Add this class to a <div> element to create 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.

UIKIT COMMON

Here you'll find components that you often use within your content, like buttons, icons, badges, overlays, animations and much more.

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

COLOR MODIFIERS

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

Example Class Description
.uk-button-primary Emphasizes to identify the primary action in a set of buttons.
.uk-button-success Indicates a successful or positive action.
.uk-button-danger Indicates a dangerous or negative action.
Link .uk-button-link Deemphasizes to look like a link while maintaining button behavior.

SIZE MODIFIERS

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

FULL WIDTH BUTTON

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

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.

Link
Link
Link
Link

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

To indicate success or a positive message add the .uk-alert-success class.

To indicate a message containing a warning add the .uk-alert-warning class.

To indicate an important message add the .uk-alert-danger class.

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.

Today's headline

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.

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.

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.
.uk-animation-shake The element shakes.
.uk-animation-scale The element scales down without fading in.

Hover over any of the boxes to see the animation.

Fade
Scale up
Scale down
Shake
Slide top
Slide bottom
Slide left
Slide right

 

Follow Us:  

CONTACT US

  • Office:

    216 Market Street, Suite 100,
    Spencer, WV 25276

  • Office Hours:

    Monday - Friday

  • Phone:

    Office: (304) 927-5189
    Fax: (304) 927-5953

    Kim.Davis@roanecountyeda.org