UIkit v2

https://getuikit.com/v2/docs/
Admin
UIkit is a lightweight and modular front-end framework for developing fast and powerful web...
Tokens:80,682
Snippets:805
Trust Score:9.6
Update:10 months ago
Show doc for...
Tokens:
Raw
### UIkit CDN Integration Example

Source: https://getuikit.com/v2/docs/documentation_get-started

Shows how to link to UIkit's CSS and JavaScript files using the Cloudflare CDN. This method is convenient for quickly integrating UIkit without downloading the files.

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.xx.x/js/uikit.min.js"></script>
```

--------------------------------

### UIkit File Structure Example

Source: https://getuikit.com/v2/docs/documentation_get-started

This snippet illustrates the directory structure of a downloaded UIkit project, showing the location of CSS, JavaScript, and font files. It includes different styles and minified versions.

```text
/css
    <!-- UIkit with the basic style -->
    uikit.css
    uikit.min.css

    <!-- UIkit with Gradient style -->
    uikit.gradient.css
    uikit.gradient.min.css

    <!-- UIkit with Almost flat style -->
    uikit.almost-flat.css
    uikit.almost-flat.min.css

    <!-- Advanced components -->
    /components

/fonts
    <!-- FontAwesome webfont -->
    fontawesome-webfont.ttf
    fontawesome-webfont.woff
    fontawesome-webfont.woff2
    FontAwesome.otf

/js
    <!-- JavaScript and minified version -->
    uikit.js
    uikit.min.js

    <!-- Advanced components -->
    /components

    <!-- Core components -->
    /core
```

--------------------------------

### List of UIkit Documentation Sections

Source: https://getuikit.com/v2/docs/customizer

A list of links to different sections of UIkit documentation, including Getting Started, Core components, Customizer, and Tutorials.

```html
* Get Started
* Core
* Customizer
* Showcase
* Tutorials
* UIkit 3
```

--------------------------------

### Basic HTML Page Markup with UIkit

Source: https://getuikit.com/v2/docs/documentation_get-started

Demonstrates how to include the UIkit CSS and JavaScript files in the header of an HTML5 document. jQuery is a required dependency for UIkit.

```html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
    </head>
    <body>
    </body>
</html>
```

--------------------------------

### Basic List HTML Example

Source: https://getuikit.com/v2/docs/customizer

A simple unordered list example in HTML, showcasing list items as defined by UIkit.

```html
* List item 1
* List item 2
* List item 3
```

--------------------------------

### Description List Example

Source: https://getuikit.com/v2/docs/customizer

Demonstrates a description list in HTML, where terms are followed by their descriptions, suitable for defining terms or specifications.

```html
Description lists
    Description text. 
```

--------------------------------

### Pagination Component HTML Example

Source: https://getuikit.com/v2/docs/customizer

Demonstrates the structure of a UIkit pagination component, including navigation controls for moving between pages.

```html
* __
* 1
* 2
* 3
* 4
* ...
* 20
* __
```

--------------------------------

### UIkit Modal Markup Examples

Source: https://getuikit.com/v2/docs/modal

Demonstrates the HTML structure for creating and triggering UIkit modal dialogs. Includes examples for anchor and button triggers, as well as the modal's internal structure with close button.

```html
<a href="#my-id" data-uk-modal>...</a>

<button class="uk-button" data-uk-modal="{target:'#my-id'}">...</button>

<div id="my-id" class="uk-modal">
    <div class="uk-modal-dialog">
        <a class="uk-modal-close uk-close"></a>
        ...
    </div>
</div>
```

--------------------------------

### Basic HTML Structure Example

Source: https://getuikit.com/v2/docs/customizer

A simple HTML div element with a custom class, demonstrating basic structure for content styling within UIkit.

```html
<div class="myclass">...</div>
```

--------------------------------

### Nested List Structure Example

Source: https://getuikit.com/v2/docs/customizer

Demonstrates a nested list structure, showing how to create hierarchical lists with multiple levels of indentation.

```html
* Active
* Active
    * Active
    * Item
```

--------------------------------

### Badge Component HTML Example

Source: https://getuikit.com/v2/docs/customizer

Illustrates the usage of the UIkit Badge component with different contextual states (Success, Warning, Danger) to visually highlight counts or statuses.

```html
Badge 1 Success 4 Warning 3 Danger 4
```

--------------------------------

### Scrollspy Basic Markup Examples

Source: https://getuikit.com/v2/docs/scrollspy

Demonstrates how to apply the data-uk-scrollspy attribute to individual elements with different options for class application, repetition, and delay. These examples are useful for applying animations when elements first enter the viewport.

```html
<div data-uk-scrollspy="{cls:'uk-animation-fade'}">...</div>

<div data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">...</div>

<div data-uk-scrollspy="{cls:'uk-animation-fade', delay:900}">...</div>
```

--------------------------------

### List with Detail and Author Info

Source: https://getuikit.com/v2/docs/customizer

Example of a list item structure that includes a date and author information, commonly used for blog posts or news articles.

```html
* #### Author
May 2, 2090 at 1:55 pm
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.
```

--------------------------------

### Progress Bar Component HTML Example

Source: https://getuikit.com/v2/docs/customizer

Demonstrates the UIkit progress bar component with different percentage values, indicating task completion or loading status.

```html
55%
55%
55%
55%
```

--------------------------------

### Dropdown Menu Structure

Source: https://getuikit.com/v2/docs/customizer

Example of a dropdown menu structure, including headers, parent items with sub-items, and separated items, commonly used in navigation.

```html
* Header
*   * Active
* Parent
* Item
```

--------------------------------

### Navigation Links Example

Source: https://getuikit.com/v2/docs/customizer

A list of navigation links, commonly used in website headers or sidebars, including parent and sub-item structures.

```html
* Home
* Blog
* Category
* Post
```

--------------------------------

### Switcher Animations (Scale Example)

Source: https://getuikit.com/v2/docs/switcher

This example shows how to implement the 'scale' animation for the UIkit Switcher component. Setting the `animation` parameter to `'scale'` in the `data-uk-switcher` attribute will cause content items to scale up when they become active.

```html
<ul data-uk-switcher="{connect:'#my-id', animation: 'scale'}">
    <li><a href="">...</a></li>
</ul>

<ul id="my-id" class="uk-switcher">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

--------------------------------

### Panels within a Grid (HTML)

Source: https://getuikit.com/v2/docs/panel

Example demonstrating how to use UIkit Panels within the Grid component. This example shows two panels side-by-side using grid width classes.

```html
<div class="uk-grid">
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </div>
    <div class="uk-width-medium-1-2">
        <div class="uk-panel">...</div>
    </div>
</div>
```

--------------------------------

### Message Component HTML Examples

Source: https://getuikit.com/v2/docs/customizer

Showcases different types of message components (Info, Success, Warning, Danger) in UIkit for displaying notifications or feedback to the user.

```html
Info message
Success message
Warning message
Danger message
```

--------------------------------

### Tab Component Structure

Source: https://getuikit.com/v2/docs/customizer

Example of a basic tab component structure with active and disabled states, used for organizing content into switchable panels.

```html
* Active
* Item
* Disabled
```

--------------------------------

### Dotnav with Contrast for Images

Source: https://getuikit.com/v2/docs/dotnav

This example shows how to apply the `.uk-dotnav-contrast` class to a dot navigation for better visibility when used over images, such as in slideshows. The `.uk-flex-center` class is also included for centering the navigation.

```html
<ul class="uk-dotnav uk-dotnav-contrast uk-flex-center">
    <li class="uk-active"><a href="">...</a></li>
    <li><a href="">...</a></li>
</ul>
```

--------------------------------

### Dropdown Alignment Examples (HTML)

Source: https://getuikit.com/v2/docs/dropdown

This set of examples demonstrates various alignment options for UIkit dropdowns using the `pos` parameter within the `data-uk-dropdown` attribute. Options include positioning the dropdown below, above, left, or right of the toggle, and centering or aligning it to the edges.

```html
<div data-uk-dropdown="{pos:'bottom-center'}"> ... </div>

<div data-uk-dropdown="{pos:'top-right'}"> ... </div>

<div data-uk-dropdown="{pos:'left-center'}"> ... </div>

<div data-uk-dropdown="{pos:'right-top'}"> ... </div>
```

--------------------------------

### Switcher Animations (Fade Example)

Source: https://getuikit.com/v2/docs/switcher

This example demonstrates how to apply the 'fade' animation to the UIkit Switcher component. By adding the `animation: 'fade'` parameter to the `data-uk-switcher` attribute, content items will fade in and out during transitions.

```html
<ul data-uk-switcher="{connect:'#my-id', animation: 'fade'}">
    <li><a href="">...</a></li>
</ul>

<ul id="my-id" class="uk-switcher">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

--------------------------------

### HTML Editor JavaScript Options Example

Source: https://getuikit.com/v2/docs/htmleditor

This example shows how to set JavaScript options for the UIkit HTML Editor when initializing it via a data attribute. It includes options like 'mode' and 'maxsplitsize' to customize the editor's behavior and responsive behavior.

```html
data-uk-htmleditor="{mode:'split', maxsplitsize:600}"
```

--------------------------------

### Getuikit v2 Basic Markup Example

Source: https://getuikit.com/v2/docs/layouts_documentation

Demonstrates a nested div structure using Getuikit v2's common classes `.my-class-1`, `.my-class-2`, and `.my-class-3`. This structure is often used for layout and component nesting within the framework.

```html
<div class="my-class-1">
    <div class="my-class-2">
        <div class="my-class-3">
            <h3>...</h3>
            ...
        </div>
    </div>
</div>
```

--------------------------------

### Image Overlay Positioning Examples

Source: https://getuikit.com/v2/docs/overlay

Demonstrates how to position the overlay panel within its container using classes like '.uk-overlay-top', '.uk-overlay-bottom', '.uk-overlay-left', or '.uk-overlay-right'. These classes control the alignment and cropping of the overlay.

```html
<figure class="uk-overlay">
    <img src="" width="" height="" alt="">
    <figcaption class="uk-overlay-panel uk-overlay-top">...</figcaption>
</figure>
```

--------------------------------

### UIkit Thumbnail Grid Layout

Source: https://getuikit.com/v2/docs/thumbnail

Shows how to combine thumbnails with the UIkit Grid component to create responsive thumbnail layouts. This example demonstrates a two-column layout with nested grids.

```html
<div class="uk-grid">
    <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
    <div class="uk-width-medium-1-2">
        <div class="uk-grid">
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
            <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
        </div>
    </div>
</div>
```

--------------------------------

### Basic Toggle Example (HTML)

Source: https://getuikit.com/v2/docs/toggle

Demonstrates how to use the `data-uk-toggle` attribute on a button to control the visibility of a div. By default, it toggles the `.uk-hidden` class.

```html
<button class="uk-button" data-uk-toggle="{target:'#my-id'}">...</button>

<div id="my-id">...</div>
```

--------------------------------

### Sortable JavaScript Initialization

Source: https://getuikit.com/v2/docs/sortable

Provides an example of how to manually initialize the sortable component using JavaScript. It allows for passing an options object to customize its behavior.

```javascript
var sortable = UIkit.sortable(element, { /* options */ });
```

--------------------------------

### UIkit Pagination Markup Example

Source: https://getuikit.com/v2/docs/pagination

This snippet demonstrates the basic HTML structure for creating a UIkit pagination component. It includes classes for active and disabled states, along with standard pagination links.

```html
<ul class="uk-pagination">
    <li><a href="">...</a></li>
    <li class="uk-active"><span>...</span></li>
    <li class="uk-disabled"><span>...</span></li>
    <li><span>...</span></li>
</ul>
```

--------------------------------

### Sticky Element with Delay and Animation (HTML)

Source: https://getuikit.com/v2/docs/sticky

This example shows how to introduce a delay before an element becomes sticky, making it appear only after scrolling a certain distance. It also demonstrates applying a UIkit animation for a smoother entrance.

```html
<div data-uk-sticky="{top:-200, animation: 'uk-animation-slide-top'}">...</div>
```

--------------------------------

### Grid with Small Gutter

Source: https://getuikit.com/v2/docs/grid

This example demonstrates how to apply a smaller gutter between grid columns by adding the `.uk-grid-small` class to the grid container. This is useful for creating tighter layouts with minimal spacing.

```html
<div class="uk-grid uk-grid-small">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>
```

--------------------------------

### Apply Cover to Video Element (HTML)

Source: https://getuikit.com/v2/docs/cover

This example shows how to make a video element cover its parent container using the `.uk-cover-object` class. A wrapper with `.uk-cover` is used to clip the video content.

```HTML
<div class="uk-cover">
    <video class="uk-cover-object" width="" height="">
        <source src="" type="">
    </video>
</div>
```

--------------------------------

### Switcher with Tabs Integration (HTML)

Source: https://getuikit.com/v2/docs/switcher

This example shows how to combine the Switcher component with the Tab component. The `data-uk-tab` attribute is used instead of `data-uk-switcher`, with the `connect` parameter pointing to the content list (`#my-id`). This creates a tabbed interface.

```html
<!-- This is the tabbed navigation containing the toggling elements -->
<ul class="uk-tab" data-uk-tab="{connect:'#my-id'}">
    <li><a href="">...</a></li>
</ul>

<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher uk-margin">
    <li>...</li>
</ul>
```

--------------------------------

### Switcher with Navs Integration (HTML)

Source: https://getuikit.com/v2/docs/switcher

This example shows how to apply the UIkit Switcher to the Nav component. The `data-uk-switcher` attribute is added to the main `<ul>` of the nav. The Grid component can be used to arrange the nav and its associated content in a layout.

```html
<!-- Example with Grid layout -->
<div class="uk-grid">
    <div class="uk-width-medium-1-3">
        <!-- This is the nav containing the toggling elements -->
        <ul class="uk-nav" data-uk-switcher="{connect:'#my-id'}">
            <li><a href="">...</a></li>
        </ul>
    </div>
    <div class="uk-width-medium-2-3">
        <!-- This is the container of the content items -->
        <ul id="my-id" class="uk-switcher">
            <li>...</li>
        </ul>
    </div>
</div>
```

--------------------------------

### Slideshow Navigation with Item Index

Source: https://getuikit.com/v2/docs/slideshow

This example demonstrates how to create navigation links for a slideshow where each link targets a specific slide using the `data-uk-slideshow-item` attribute set to the slide's index (starting from 0).

```html
<div data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li data-uk-slideshow-item="0"><a href="">...</a></li>
        <li data-uk-slideshow-item="1"><a href="">...</a></li>
    </ul>
</div>
```

--------------------------------

### Responsive Cover Image (HTML)

Source: https://getuikit.com/v2/docs/cover

This example shows how to make a cover image responsive by adding the `.uk-invisible` class to an `<img>` element within the cover container. The image will adapt to the responsive behavior of its parent.

```HTML
<div class="uk-cover-background">
    <img class="uk-invisible" src="" width="" height="" alt="">
</div>
```

--------------------------------

### Datepicker Initialization with JavaScript Options (HTML Attribute)

Source: https://getuikit.com/v2/docs/datepicker

This example shows how to configure the UIkit Datepicker using JavaScript options directly within the `data-uk-datepicker` attribute. It illustrates setting `weekstart` and `format` options.

```html
data-uk-datepicker="{weekstart:0, format:'DD.MM.YYYY'}"
```

--------------------------------

### Manual Initialization of UIkit Dynamic Pagination

Source: https://getuikit.com/v2/docs/pagination-js

This code demonstrates how to manually initialize the UIkit pagination component using JavaScript. It shows the basic syntax for creating a pagination instance and passing configuration options.

```javascript
var pagination = UIkit.pagination(element, { /* options */ });
```

--------------------------------

### Switcher Animations (Slide Left Example)

Source: https://getuikit.com/v2/docs/switcher

This example shows the 'slide-left' animation for the UIkit Switcher component. With `animation: 'slide-left'`, content items will animate by sliding in from the left.

```html
<ul data-uk-switcher="{connect:'#my-id', animation: 'slide-left'}">
    <li><a href="">...</a></li>
</ul>

<ul id="my-id" class="uk-switcher">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

--------------------------------

### Switcher Animations (Slide Right Example)

Source: https://getuikit.com/v2/docs/switcher

This example illustrates the 'slide-right' animation for the UIkit Switcher component. By specifying `animation: 'slide-right'`, content items will animate by sliding in from the right.

```html
<ul data-uk-switcher="{connect:'#my-id', animation: 'slide-right'}">
    <li><a href="">...</a></li>
</ul>

<ul id="my-id" class="uk-switcher">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

--------------------------------

### Dynamic Grid Markup Examples

Source: https://getuikit.com/v2/docs/grid-js

Demonstrates two methods for applying widths to grid items: using uk-width-* classes on individual items or uk-grid-width-* classes on the grid container itself. Both methods achieve a multi-column layout adaptable to different screen sizes.

```html
<!-- This is a grid using uk-width-* on each item -->
<div data-uk-grid>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">...</div>
    <div class="uk-width-small-1-2 uk-width-medium-1-4">...</div>
</div>

<!-- This is a grid using uk-grid-width-* on the grid itself -->
<div class="uk-grid-width-small-1-2 uk-grid-width-medium-1-4" data-uk-grid>
    <div>...</div>
    <div>...</div>
</div>
```

--------------------------------

### Switcher Animations (Slide Bottom Example)

Source: https://getuikit.com/v2/docs/switcher

This example demonstrates the 'slide-bottom' animation for the UIkit Switcher component. Setting `animation: 'slide-bottom'` will cause content items to slide in from the bottom during transitions.

```html
<ul data-uk-switcher="{connect:'#my-id', animation: 'slide-bottom'}">
    <li><a href="">...</a></li>
</ul>

<ul id="my-id" class="uk-switcher">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

--------------------------------

### Switcher Animations (Slide Top Example)

Source: https://getuikit.com/v2/docs/switcher

This example illustrates the 'slide-top' animation for the UIkit Switcher component. By specifying `animation: 'slide-top'`, content items will animate by sliding in from the top when transitioning.

```html
<ul data-uk-switcher="{connect:'#my-id', animation: 'slide-top'}">
    <li><a href="">...</a></li>
</ul>

<ul id="my-id" class="uk-switcher">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

--------------------------------

### Parallax with Custom Start and Stop Values

Source: https://getuikit.com/v2/docs/parallax

Defines specific start and end values for CSS properties, useful for properties like colors or when precise control is needed. Values are separated by a comma.

```html
<div data-uk-parallax="{x: '-100,100', 'background-color': '#EBF7FD,#FFF1F0'}">...</div>
```

--------------------------------

### Headline and Paragraph Text

Source: https://getuikit.com/v2/docs/customizer

A standard headline (H1) followed by a paragraph of Lorem ipsum text, demonstrating basic content layout.

```html
# 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
```

--------------------------------

### Switcher Animations (Slide Vertical Example)

Source: https://getuikit.com/v2/docs/switcher

This example shows the 'slide-vertical' animation for the UIkit Switcher component. With `animation: 'slide-vertical'`, content items slide vertically, with the direction determined by their adjacency to the active item.

```html
<ul data-uk-switcher="{connect:'#my-id', animation: 'slide-vertical'}">
    <li><a href="">...</a></li>
</ul>

<ul id="my-id" class="uk-switcher">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

--------------------------------

### Getuikit v2 Template Settings Markup Example

Source: https://getuikit.com/v2/docs/layouts_documentation

Illustrates a typical HTML markup for template settings in Getuikit v2, featuring a nested div structure with classes `.my-class-1`, `.my-class-2`, and `.my-class-3`. This pattern is useful for organizing and styling template elements.

```html
<div class="my-class-1">
<div class="my-class-2">
    <div class="my-class-3">
        <h3>...</h3>
        ...
    </div>
</div>
</div>
```

--------------------------------

### Switcher Animations (Slide Horizontal Example)

Source: https://getuikit.com/v2/docs/switcher

This example demonstrates the 'slide-horizontal' animation for the UIkit Switcher component. When `animation: 'slide-horizontal'` is set, content items slide horizontally, with the direction dependent on their position relative to the active item.

```html
<ul data-uk-switcher="{connect:'#my-id', animation: 'slide-horizontal'}">
    <li><a href="">...</a></li>
</ul>

<ul id="my-id" class="uk-switcher">
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>
```

--------------------------------

### Basic Table Markup (HTML)

Source: https://getuikit.com/v2/docs/table

Demonstrates the basic structure for creating a table with the `.uk-table` class. This includes the caption, header, footer, and body sections.

```html
<table class="uk-table">
    <caption>...</caption>
    <thead>
        <tr>
            <th>...</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>...</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>...</td>
        </tr>
    </tbody>
</table>
```

--------------------------------

### Basic Grid Layout Markup

Source: https://getuikit.com/v2/docs/grid

This example demonstrates the basic markup for creating a two-column grid layout using the `.uk-grid` and `.uk-width-1-2` classes. The `.uk-grid` class defines the grid container, and child elements with `.uk-width-*` classes determine their respective column widths.

```html
<div class="uk-grid">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>
```

--------------------------------

### Basic Form Structure (HTML)

Source: https://getuikit.com/v2/docs/form

Demonstrates the basic structure for creating a form using the `.uk-form` class. Includes a fieldset with input fields, a select dropdown, a button, and a checkbox.

```html
<form class="uk-form">

    <fieldset data-uk-margin>
        <legend>...</legend>
        <input type="text" placeholder="">
        <input type="password" placeholder="">
        <select>
            <option>...</option>
            <option>...</option>
        </select>
        <button class="uk-button">...</button>
        <label><input type="checkbox"> ...</label>
    </fieldset>

</form>
```

--------------------------------

### HTML Description List Markup

Source: https://getuikit.com/v2/docs/base

Demonstrates the HTML markup for description lists, using <dl> for the list, <dt> for terms, and <dd> for their corresponding descriptions.

```HTML
<dl>
    <dt>...</dt>
    <dd>...</dd>
</dl>
```

--------------------------------

### Duration Modifier (HTML)

Source: https://getuikit.com/v2/docs/animation

Extends the animation duration to 15 seconds by applying the `.uk-animation-15` class. This example demonstrates a slide-right animation with an extended duration.

```html
<div class="uk-animation-slide-right uk-animation-15">...</div>
```

--------------------------------

### Create a Basic Slideshow

Source: https://getuikit.com/v2/docs/slideshow

This snippet shows how to create a responsive slideshow using the `.uk-slideshow` class on a `<ul>` element. The `data-uk-slideshow` attribute initializes the JavaScript functionality, and options like `autoplay:true` can be added.

```html
<ul class="uk-slideshow" data-uk-slideshow="{autoplay:true}">
    <li><img src="" width="" height="" alt=""></li>
</ul>
```

--------------------------------

### Tooltip JavaScript Initialization and Options

Source: https://getuikit.com/v2/docs/tooltip

Shows how to configure tooltip behavior using JavaScript or by setting options directly in the `data-uk-tooltip` attribute. This allows customization of the tooltip's offset, position, animation, delay, and active state class.

```javascript
data-uk-tooltip="{pos:'bottom-left'}"
```

--------------------------------

### Reverse Animation Modifier (HTML)

Source: https://getuikit.com/v2/docs/animation

Reverses the direction of any animation by adding the `.uk-animation-reverse` class in conjunction with an animation class. This example shows a reversed fade-in.

```html
<div class="uk-animation-fade uk-animation-reverse">...</div>
```

--------------------------------

### Initialize Lightbox Manually via JavaScript

Source: https://getuikit.com/v2/docs/lightbox

This JavaScript code shows how to manually initialize a Lightbox instance on a given element. Options can be passed as a configuration object.

```javascript
var lightbox = UIkit.lightbox(element, { /* options */ });
```

--------------------------------

### UIkit Centered Modal Activation

Source: https://getuikit.com/v2/docs/modal

This example shows how to vertically center a modal dialog by adding the `{center:true}` option to the `data-uk-modal` attribute on the anchor element.

```html
<a href="#my-id" data-uk-modal="{center:true}"></a>
```

--------------------------------

### Importing Core Less Files

Source: https://getuikit.com/v2/docs/documentation_create-a-theme

This Less code snippet demonstrates how to import the main UIkit Less file into your custom theme. This ensures that all core framework styles are accessible, allowing you to build upon them.

```less
@import "../../src/less/uikit.less";
```

--------------------------------

### Gulp Task to Build Theme CSS

Source: https://getuikit.com/v2/docs/documentation_create-a-theme

This command-line instruction shows how to use Gulp to generate the CSS for your custom theme. Replace `THEME-NAME` with your theme's actual directory name.

```bash
gulp dist -t THEME-NAME
```

--------------------------------

### Complex List Item Structure

Source: https://getuikit.com/v2/docs/customizer

Example of a list with nested items, including headers and items marked with underscores, possibly indicating specific states or types.

```html
* Item
* Header
* __Item
* __Item
*   * __Item
```

--------------------------------

### Dynamic Pagination HTML Structure and Initialization

Source: https://getuikit.com/v2/docs/pagination-js

This snippet shows the basic HTML structure for the dynamic pagination component and demonstrates its initialization using jQuery. It specifies the total number of items and items per page, and uses an event listener to alert the user when a new page is selected.

```html
<ul class="uk-pagination" data-uk-pagination="{items:100, itemsOnPage:10}"></ul>
```

```javascript
$('[data-uk-pagination]').on('select.uk.pagination', function(e, pageIndex){
    alert('You have selected page: ' + (pageIndex+1));
});
```

--------------------------------

### UIkit Thumbnail Component Markup

Source: https://getuikit.com/v2/docs/thumbnail

Demonstrates how to apply the `.uk-thumbnail` class to `<img>`, `<a>`, or `<figure>` elements to create thumbnail images. It also shows how to add captions using `.uk-thumbnail-caption`.

```html
<img class="uk-thumbnail" src="" alt="">

<a class="uk-thumbnail" href=""><img src="" alt=""></a>

<figure class="uk-thumbnail"><img src="" alt=""></figure>

<div class="uk-thumbnail">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</div>

<a class="uk-thumbnail" href="">
    <img src="" alt="">
    <div class="uk-thumbnail-caption">...</div>
</a>

<figure class="uk-thumbnail">
    <img src="" alt="">
    <figcaption class="uk-thumbnail-caption">...</figcaption>
</figure>
```

--------------------------------

### Manual Initialization of Sticky Element (JavaScript)

Source: https://getuikit.com/v2/docs/sticky

Initialize the sticky component programmatically using JavaScript. This allows for dynamic creation or manipulation of sticky elements with custom options.

```javascript
var sticky = UIkit.sticky(element, { /* options */ });
```

--------------------------------

### Basic Button Markup

Source: https://getuikit.com/v2/docs/button

Demonstrates the fundamental HTML structure for creating link and button elements with the `.uk-button` class. Includes an example of a disabled button using the `disabled` attribute.

```html
<a class="uk-button" href="">...</a>
<button class="uk-button" type="button">...</button>
<button class="uk-button" type="button" disabled>...</button>
```

--------------------------------

### Basic Placeholder Usage with HTML

Source: https://getuikit.com/v2/docs/placeholder

This snippet demonstrates the basic implementation of a UIkit placeholder. It involves applying the `.uk-placeholder` class to a div element to create a styled area suitable for drag-and-drop file uploads. No external JavaScript dependencies are required for this basic styling.

```html
<div class="uk-placeholder">...</div>
```

--------------------------------

### Alert Color Modifiers - HTML

Source: https://getuikit.com/v2/docs/alert

This example illustrates how to apply different color variations to the alert component using modifier classes like `.uk-alert-success`, `.uk-alert-warning`, and `.uk-alert-danger`.

```html
<div class="uk-alert uk-alert-success"> ... </div>
<div class="uk-alert uk-alert-warning">...</div>
<div class="uk-alert uk-alert-danger">...</div>
```

--------------------------------

### Slideshow with Slidenav and Dotnav

Source: https://getuikit.com/v2/docs/slideshow

This example shows how to integrate UIkit's Slidenav and Dotnav components to style the navigation controls for a slideshow. It includes previous/next arrows and dot indicators.

```html
<div class="uk-slidenav-position" data-uk-slideshow>
    <ul class="uk-slideshow">
        <li></li>
        <li></li>
    </ul>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-previous" data-uk-slideshow-item="previous"></a>
    <a href="" class="uk-slidenav uk-slidenav-contrast uk-slidenav-next" data-uk-slideshow-item="next"></a>
    <ul class="uk-dotnav uk-dotnav-contrast uk-position-bottom uk-flex-center">
        <li data-uk-slideshow-item="0"><a href=""></a></li>
        <li data-uk-slideshow-item="1"><a href=""></a></li>
    </ul>
</div>
```

--------------------------------

### Panel Box Secondary Modifier (HTML)

Source: https://getuikit.com/v2/docs/panel

Example of a UIkit Panel using the `.uk-panel-box-secondary` modifier, which provides a lighter background for the box. A hover effect is available via `.uk-panel-box-secondary-hover`.

```html
<div class="uk-panel uk-panel-box uk-panel-box-secondary">...</div>
```

--------------------------------

### AMD: Autoload UIkit Core and Components

Source: https://getuikit.com/v2/docs/documentation_javascript

This snippet shows how to configure `require.js` to load UIkit and its components. It sets the path for 'uikit' and specifies the base directory for UIkit distribution. Subsequently, it uses `require` to autoload the UIkit core and specified components like 'notify' and 'sortable'.

```javascript
/* setup require.js first */
requirejs.config({

    paths: {
        "uikit": 'path/to/uikit.js'
    },

    config: {
        "uikit": {
            "base": "path/to/uikit_dist_folder"
        }
    }

});

/* now you can autoload uikit core + components separated by a comma */
require("uikit!notify,sortable", function(UI){

    // access loaded components: UI.notify, UI.sortable

});
```

--------------------------------

### Grid with Collapsed Gutter

Source: https://getuikit.com/v2/docs/grid

This example demonstrates how to remove the gutter entirely between grid columns by adding the `.uk-grid-collapse` class to the grid container. This creates a seamless layout with no spacing between columns.

```html
<div class="uk-grid uk-grid-collapse">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>
```

--------------------------------

### Basic Sticky Element Usage (HTML)

Source: https://getuikit.com/v2/docs/sticky

This snippet demonstrates the most basic usage of the sticky component. By adding the `data-uk-sticky` attribute to an element, it will automatically become sticky when it reaches the top of the viewport.

```html
<div data-uk-sticky>...</div>
```

--------------------------------

### Prefix UIkit via Less using Gulp

Source: https://getuikit.com/v2/docs/documentation_custom-prefix

This command allows you to create a custom prefixed UIkit build. It replaces the default 'uk-' prefix with your specified prefix, ensuring compatibility when multiple UIkit versions are used. The output will be found in the 'dist' folder.

```shell
gulp -p myprefix
```

--------------------------------

### Grid with Medium Gutter

Source: https://getuikit.com/v2/docs/grid

This example demonstrates how to apply a medium-sized gutter between grid columns by adding the `.uk-grid-medium` class to the grid container. This provides a moderate spacing between columns and rows.

```html
<div class="uk-grid uk-grid-medium">
    <div class="uk-width-1-2">...</div>
    <div class="uk-width-1-2">...</div>
</div>
```

--------------------------------

### Combinable Progress Bar Modifiers

Source: https://getuikit.com/v2/docs/progress

All available progress bar modifiers can be combined to achieve custom designs. This example shows a small, danger-colored, striped, and active progress bar.

```html
<div class="uk-progress uk-progress-small uk-progress-danger uk-progress-striped uk-active">...</div>
```

--------------------------------

### UIkit Upload Component Markup and Initialization (JavaScript)

Source: https://getuikit.com/v2/docs/upload

This snippet shows the HTML structure for the upload component, including a placeholder for dropping files and a hidden progress bar. The JavaScript initializes the upload functionality using UIkit's `uploadSelect` and `uploadDrop` methods, configuring options like the upload action, file type filtering, and callback events for progress and completion.

```html
<div id="upload-drop" class="uk-placeholder">
    Info text... <a class="uk-form-file">Select a file<input id="upload-select" type="file">
</a>
</div>

<div id="progressbar" class="uk-progress uk-hidden">
    <div class="uk-progress-bar" style="width: 0%;">...</div>
</div>
```

```javascript
$(function(){

    var progressbar = $("#progressbar"),
        bar         = progressbar.find('.uk-progress-bar'),
        settings    = {

        action: '/', // upload url

        allow : '*.(jpg|jpeg|gif|png)', // allow only images

        loadstart: function() {
            bar.css("width", "0%").text("0%");
            progressbar.removeClass("uk-hidden");
        },

        progress: function(percent) {
            percent = Math.ceil(percent);
            bar.css("width", percent+"%" ).text(percent+"%");
        },

        allcomplete: function(response) {

            bar.css("width", "100%").text("100%");

            setTimeout(function(){
                progressbar.addClass("uk-hidden");
            }, 250);

            alert("Upload Completed")
        }
    };

    var select = UIkit.uploadSelect($("#upload-select"), settings),
        drop   = UIkit.uploadDrop($("#upload-drop"), settings);
});
```

--------------------------------

### Animation on Hover (HTML)

Source: https://getuikit.com/v2/docs/animation

Triggers an animation when the element is hovered over. The `.uk-animation-hover` class can be applied directly to the animated element or to a parent container. This example shows a fade animation triggered on hover.

```html
<div class="uk-animation-hover uk-animation-fade">...</div>

<div class="uk-animation-hover">
    <div class="uk-animation-slide-right">...</div>
</div>
```

--------------------------------

### Include UIkit Component CSS and JavaScript

Source: https://getuikit.com/v2/docs/components

This example demonstrates how to include a UIkit component, such as Autocomplete, in your HTML document. It requires linking the main UIkit CSS and JavaScript files, along with the specific component's CSS and JavaScript files. jQuery is also included as a dependency.

```html
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="uikit.min.css" />
        <script src="jquery.js"></script>
        <script src="uikit.min.js"></script>
        <!-- Autocomplete CSS -->
        <link rel="stylesheet" href="components/autocomplete.css">
        <!-- Autocomplete Javascript -->
        <script src="components/autocomplete.js"></script>
    </head>
    <body>
    </body>
</html>
```

--------------------------------

### Create Dynamic Lightbox Gallery with JavaScript

Source: https://getuikit.com/v2/docs/lightbox

This snippet demonstrates creating a dynamic Lightbox gallery using JavaScript. It allows defining multiple items with their sources and types (video or image) and then showing the gallery.

```javascript
var lightbox = UIkit.lightbox.create([
    {'source': 'http://url/to/video.mp4', 'type':'video'},
    {'source': 'http://url/to/image.jpg', 'type':'image'}
]);

lightbox.show();
```

--------------------------------

### Parallax with Multiple CSS Property Animations

Source: https://getuikit.com/v2/docs/parallax

Animates multiple CSS properties simultaneously, such as vertical translation and opacity. Use comma-separated values for start and stop points if needed.

```html
<div data-uk-parallax="{y: '-200', opacity: '0'}">...</div>
```

--------------------------------

### Slideshow with Ken Burns Effect

Source: https://getuikit.com/v2/docs/slideshow

This example shows how to enable the Ken Burns effect for slideshow items by setting `{kenburns:true}` in the `data-uk-slideshow` attribute. The duration of the effect can also be customized.

```html
<ul class="uk-slideshow" data-uk-slideshow="{kenburns:true}">...</ul>
```

```html
<ul class="uk-slideshow" data-uk-slideshow="{kenburns:'30s'}">...</ul>
```

--------------------------------

### Creating New Block Formatting Context

Source: https://getuikit.com/v2/docs/utility

Provides examples of using `.uk-nbfc` and `.uk-nbfc-alt` to create a new block formatting context, which is an alternative method to `.uk-clearfix` for clearing floats. `.uk-nbfc` uses `overflow: hidden`, while `.uk-nbfc-alt` uses `display: table-cell`.

```css
/* .uk-nbfc: Sets overflow to hidden to create a new block formatting context. */
/* .uk-nbfc-alt: Sets display to table-cell to create a new block formatting context. */
```

--------------------------------

### AMD: Require UIkit Core

Source: https://getuikit.com/v2/docs/documentation_javascript

This example demonstrates how to load the UIkit core JavaScript module asynchronously using AMD (Asynchronous Module Definition) with a simple `require` call. It provides the global UIkit object as the second argument to the callback function.

```javascript
/* Simple require of the UIkit core */
require("path/to/uikit.js", function(UI){

    // UI is the global UIkit object a.k.a. $.UIkit

});
```
Tokens:
Raw