### 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
```
--------------------------------
### 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.css
uikit.min.css
uikit.gradient.css
uikit.gradient.min.css
uikit.almost-flat.css
uikit.almost-flat.min.css
/components
/fonts
fontawesome-webfont.ttf
fontawesome-webfont.woff
fontawesome-webfont.woff2
FontAwesome.otf
/js
uikit.js
uikit.min.js
/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
```
--------------------------------
### 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
...
...
```
--------------------------------
### 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
...
```
--------------------------------
### 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
...
...
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
...
...
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
...
```
--------------------------------
### 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
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
```
--------------------------------
### 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
...
...
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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 `
` of the nav. The Grid component can be used to arrange the nav and its associated content in a layout.
```html
```
--------------------------------
### 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
```
--------------------------------
### 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 `` element within the cover container. The image will adapt to the responsive behavior of its parent.
```HTML
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
...
...
...
...
```
--------------------------------
### 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
```
--------------------------------
### 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
```
--------------------------------
### 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
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
...
...
...
```
--------------------------------
### 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
...
...
```
--------------------------------
### 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
```
--------------------------------
### HTML Description List Markup
Source: https://getuikit.com/v2/docs/base
Demonstrates the HTML markup for description lists, using
for the list,
for terms, and
for their corresponding descriptions.
```HTML
...
...
```
--------------------------------
### 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
...
```
--------------------------------
### 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 `
` element. The `data-uk-slideshow` attribute initializes the JavaScript functionality, and options like `autoplay:true` can be added.
```html
```
--------------------------------
### 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
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
```
--------------------------------
### 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
...
```
--------------------------------
### 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
...
```
--------------------------------
### 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
...
...
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
```
--------------------------------
### 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
...
...
```
--------------------------------
### 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
...
```
--------------------------------
### 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
...
...
```
--------------------------------
### 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
...
```
--------------------------------
### 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
```
```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
...
...
```
--------------------------------
### 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
```
--------------------------------
### 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
...
```
--------------------------------
### 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
...
```
```html
...
```
--------------------------------
### 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
});
```