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 |
<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.insidea 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.
So Much More...
Share This Post
