UIKit is an ingenious framework built by the talented team over at YooTheme. The combination of a solid structure, a well thought out javascript approach, powerful features, fantastic documentation, and a web-based customizer make UIKit a dynamo in the CSS library world. Their approach will remind developers more of Foundation then Bootstrap, but from our view it really serves the Ghost approach well.

Why UIKit Rocks.

CSS Libraries are everywhere, but Ghost is built with an explicit intent - simplicity. It deserves a UIKit who keeps that same goal in mind. All styling in UIKit is based on class, all begin with the unique "uk-" prefix, and the layout is a simple fractional grid. Put two divs inside a "uk-grid" classed div, give them both the class of "uk-width-1-2" and you'll see the beauty in this approach. You can also easily add other Javascript based features - this theme includes the "sticky" and "grid sorting" ones for example.

UIKit HTML Guide

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

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.


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.

Blockquotes

For quoting multiple lines of content from another source within your document, use the <blockquote> element.

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

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

Responsive Images

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

UIKit Logo

So Much More...

Share This Post

Additional Posts
Natalie Berkman

Slow-carb heirloom Thundercats actually quinoa, direct trade Schlitz tousled tofu lumbersexual. Vinyl Portland retro meh Wes Anderson. Aesthetic gastropub shabby chic. via http://hipsum.co. About Natalie Berkman

Natalie Berkman Profile Picture

Comment