UIkit can be installed via npm, yarn, or by downloading the pre-built files. We recommend using npm or yarn for easier management of dependencies.
npm:
npm install uikit --saveyarn:
yarn add uikitAfter installation, the UIkit CSS and JavaScript files will be available in your node_modules directory. You can then import them into your project (see Basic Usage). Alternatively, you can download the pre-built files from the official UIkit website and include them directly in your HTML.
Once installed, include the necessary CSS and JavaScript files in your HTML. The exact location depends on your project’s setup, but typically you would place them within the <head> and before the closing </body> tag, respectively.
Using npm/yarn: After installation using the methods above, you will need to import the CSS and JS files into your application’s entry point (e.g., index.js or main.js) The import style will depend on your chosen bundler (Webpack, Parcel, Rollup etc.) but may resemble this (using ES6 modules):
import 'uikit/dist/css/uikit.min.css';
import UIkit from 'uikit';
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons); // Load the icon libraryIf you are using a CSS preprocessor like Sass, consider using a Sass-compatible version of UIkit for easier integration.
Using pre-built files: Include the CSS and JS files directly in your HTML (replace path/to/ with the actual path to your files):
<head>
<link rel="stylesheet" href="path/to/uikit.min.css" />
</head>
<body>
<script src="path/to/uikit.min.js"></script>
<script src="path/to/uikit-icons.min.js"></script> </body>Before you start using UIkit, ensure you have a basic HTML project structure. This might involve creating a simple index.html file and including any necessary JavaScript files for your application’s logic. UIkit doesn’t enforce a specific project structure, but a well-organized project is recommended for maintainability. For example a basic project structure could look like this:
my-project/
├── index.html
├── src/
│ └── index.js
└── node_modules/Remember to adjust file paths and imports according to your project’s setup and preferred method of development.
Let’s create a simple button using UIkit. This example assumes you’ve already installed and included UIkit as described above. Add the following HTML within your <body>:
<button class="uk-button uk-button-primary">Click Me</button>This code will render a primary colored button thanks to the uk-button and uk-button-primary classes. This demonstrates the basic usage of UIkit classes to style HTML elements. Refer to the UIkit documentation for a complete list of available components and classes. Further functionality, such as JavaScript interactions, would require referring to the component’s specific documentation.
UIkit buttons provide a consistent and styled approach to interactive elements. They are easily customized using modifier classes.
Basic Usage:
<button class="uk-button">Default Button</button>
<button class="uk-button uk-button-primary">Primary Button</button>
<button class="uk-button uk-button-secondary">Secondary Button</button>
<button class="uk-button uk-button-danger">Danger Button</button>Modifiers: Numerous modifier classes are available for different styles (e.g., uk-button-large, uk-button-small, uk-button-text, uk-button-default). Consult the UIkit documentation for a complete list.
Alerts display important messages to the user. They come in various severity levels.
Basic Usage:
<div class="uk-alert-primary" uk-alert>
<a class="uk-alert-close" uk-close></a>
This is a primary alert.
</div>
<div class="uk-alert-danger" uk-alert>
<a class="uk-alert-close" uk-close></a>
This is a danger alert.
</div>The uk-alert attribute is required for dismissable alerts using the close button.
Badges are small indicators, typically displaying numbers or labels.
Basic Usage:
<span class="uk-badge">New</span>
<span class="uk-badge uk-badge-warning">12</span>Breadcrumbs display a hierarchical path.
Basic Usage:
<ul class="uk-breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li><a href="#">Data</a></li>
</ul>Callouts highlight important information or sections of text.
Basic Usage:
<div class="uk-card uk-card-body uk-card-default uk-margin">
<p>This is a callout. Use the classes `uk-card`, `uk-card-body` and `uk-card-default` for styling.</p>
</div>Customize styling through additional card classes.
A small “x” button for dismissing elements. Often used with alerts and modals.
Basic Usage:
<a class="uk-close" uk-close></a>UIkit’s grid system provides a flexible layout for arranging content.
Basic Usage:
<div class="uk-grid-small uk-child-width-1-2@s" uk-grid>
<div>Column 1</div>
<div>Column 2</div>
</div>This creates a two-column grid that stacks vertically on smaller screens and horizontally on larger screens. @s denotes a breakpoint (small screen). Check UIkit documentation for breakpoint details and more advanced usage.
UIkit provides a large set of icons.
Basic Usage:
<i class="uk-icon" data-uk-icon="icon: user"></i>
<i class="uk-icon" data-uk-icon="icon: trash; ratio: 2"></i>Requires uikit-icons.min.js to be included. See the icon documentation for the full list of available icons and customization options.
Labels provide textual descriptions for form elements.
Basic Usage:
<label class="uk-form-label" for="name">Name:</label>
<input class="uk-input" id="name" type="text">Provides numbered links for navigating through paginated content.
Basic Usage:
<ul class="uk-pagination" uk-margin>
<li class="uk-active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>Displays the progress of a task or operation.
Basic Usage:
<div class="uk-progress" style="width: 75%;">
<div class="uk-progress-bar" style="width: 50%;"></div>
</div>A loading indicator.
Basic Usage:
<span uk-spinner></span>A toggle switch for on/off options.
Basic Usage:
<label>
<input type="checkbox" checked>
<span class="uk-switch-button"></span>
</label>UIkit provides styling for HTML tables.
Basic Usage:
<table class="uk-table uk-table-striped">
<thead>
<tr><th>Name</th><th>Email</th></tr>
</thead>
<tbody>
<tr><td>John Doe</td><td>john.doe@example.com</td></tr>
</tbody>
</table>A basic text input field.
Basic Usage:
<input class="uk-input" type="text" placeholder="Enter text">Numerous options are available for customizing text inputs (e.g., uk-input-default, uk-form-width-large). Consult the UIkit documentation for details.
Accordions allow users to expand and collapse sections of content.
Basic Usage:
<ul uk-accordion>
<li class="uk-open">
<a class="uk-accordion-title" href="#">Item 1</a>
<div class="uk-accordion-content">
<p>Content for Item 1.</p>
</div>
</li>
<li>
<a class="uk-accordion-title" href="#">Item 2</a>
<div class="uk-accordion-content">
<p>Content for Item 2.</p>
</div>
</li>
</ul>The uk-accordion attribute is crucial for enabling accordion functionality. The uk-open class on a list item makes it open by default.
Dropdowns provide a menu that appears when clicked.
Basic Usage:
<div uk-dropdown>
<ul class="uk-nav uk-dropdown-nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
<button>Open Dropdown</button>This requires the uk-dropdown attribute on the container element. You’ll need to use JavaScript or a similar method to trigger the dropdown’s appearance (e.g., attaching a click event to the button). The button itself isn’t part of the UIkit dropdown component, it is used only to trigger it.
Menus present a list of navigation items.
Basic Usage:
<ul class="uk-nav uk-nav-default">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="uk-nav uk-nav-primary uk-nav-side">
<li class="uk-nav-header">Main Navigation</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>UIkit offers different menu styles such as uk-nav-default, uk-nav-primary, uk-nav-side for customizing the appearance.
Navbars provide a consistent top or bottom navigation bar.
Basic Usage:
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
<a href="#" class="uk-navbar-item uk-logo">My Website</a>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</nav>The uk-navbar-container and uk-navbar classes are essential, and uk-navbar-left and uk-navbar-right control the alignment of elements.
(This component was already described in the Core Components section)
Tabs allow users to switch between different sections of content.
Basic Usage:
<ul uk-tab>
<li class="uk-active"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
</ul>
<ul class="uk-switcher uk-margin">
<li>Content for Item 1</li>
<li>Content for Item 2</li>
</ul>The uk-tab attribute on the <ul> element makes it a tabbed interface. The uk-switcher class on the second <ul> is crucial for the content to be correctly switched. The uk-active class is on the first <li> element, indicating which tab is initially selected.
(This component was already described in the Core Components section)
UIkit provides classes for responsive images.
Basic Usage:
<img src="image.jpg" alt="My Image" class="uk-responsive-width">The uk-responsive-width class ensures that the image scales proportionally to its container, preventing overflow. For more advanced responsiveness, consider using the uk-width-* classes to control the image’s width relative to its parent container. For example, uk-width-1-2 will make the image take up half the width of its container.
Containers provide a consistent width across different screen sizes, preventing content from overflowing.
Basic Usage:
<div class="uk-container">
<h1>My Page Title</h1>
<p>This content will be contained within a defined width.</p>
</div>This creates a container with a maximum width that adapts to the screen size. UIkit offers variations like uk-container-xsmall, uk-container-small, uk-container-large, and uk-container-expand to fine-tune the container’s width behavior.
UIkit uses media queries to achieve responsiveness. The uk-width-* classes (e.g., uk-width-1-2@m) and other layout classes are responsive by default, adjusting their behavior based on screen size. The @m indicates a breakpoint, consult the UIkit documentation for details on breakpoint sizes.
UIkit leverages flexbox for flexible layout. You can use the uk-flex class for basic flexbox functionality.
Basic Usage:
<div class="uk-flex uk-flex-center">
<div>Item 1</div>
<div>Item 2</div>
</div>This centers the items horizontally using uk-flex-center. Explore other uk-flex-* classes for various alignment and direction options (e.g., uk-flex-middle, uk-flex-column).
UIkit provides utility classes for positioning elements. These classes rely on CSS positioning properties.
Basic Usage:
<div class="uk-position-top-left">Top Left</div>
<div class="uk-position-center">Center</div>
<div class="uk-position-bottom-right">Bottom Right</div>
<div class="uk-position-fixed uk-position-bottom-right">Fixed Bottom Right</div>These classes offer simple positioning relative to the parent or viewport. For absolute positioning, you can combine these classes with uk-position-fixed or uk-position-absolute. Remember that for uk-position-fixed to work correctly, the element should have a defined width and height. uk-position-absolute removes the element from the normal flow of the page, enabling it to be positioned relative to its ancestor.
(This component was already described in the Core Components section)
Select elements allow users to choose from a list of options.
Basic Usage:
<select class="uk-select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>UIkit provides basic styling for select elements. For more advanced customization, you’ll likely need custom CSS.
Checkboxes allow users to select one or more options.
Basic Usage:
<label><input class="uk-checkbox" type="checkbox"> Checkbox Option</label>The uk-checkbox class provides basic styling.
Radio buttons allow users to select only one option from a set.
Basic Usage:
<label><input class="uk-radio" type="radio" name="radio-group"> Option 1</label>
<label><input class="uk-radio" type="radio" name="radio-group"> Option 2</label>Note the shared name attribute for the radio buttons, ensuring only one can be selected at a time. The uk-radio class applies UIkit styling.
Textareas allow users to input multi-line text.
Basic Usage:
<textarea class="uk-textarea" rows="5" placeholder="Enter your text here"></textarea>File input elements allow users to select files from their system.
Basic Usage:
<input type="file" class="uk-input">UIkit provides basic styling for file inputs. For a visually improved experience, you might consider using a custom component or library that enhances the default file input’s appearance.
UIkit doesn’t provide built-in form validation functionality, but it integrates well with JavaScript validation libraries. You would typically use a JavaScript library to handle the validation logic and display error messages. UIkit’s styling can then be used to visually present error messages effectively. You would add classes to elements to indicate valid or invalid states. For example:
<input type="text" class="uk-input" id="name" required>
<div id="name-error" class="uk-text-danger uk-hidden"></div> <!-- Error message container -->
<script>
// JavaScript validation logic here... if invalid:
document.getElementById('name-error').textContent = 'Name is required';
document.getElementById('name-error').classList.remove('uk-hidden');
</script>This example shows a basic approach. More sophisticated validation would require a more robust JavaScript validation framework and potentially more advanced handling of error display using UIkit’s components.
Modals are overlay windows that appear on top of the main content.
Basic Usage:
<button type="button" data-uk-toggle="target: #my-modal">Open Modal</button>
<div id="my-modal" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Modal Title</h2>
<p>Modal content goes here.</p>
<button class="uk-button uk-modal-close" type="button">Close</button>
</div>
</div>This code uses the data-uk-toggle attribute on the button to trigger the modal. The uk-modal attribute is crucial for defining the modal element. The .uk-modal-close class on the button provides a styled close button. Remember to include the necessary JavaScript for UIkit to function.
Tooltips provide brief information when hovering over an element.
Basic Usage:
<a href="#" title="Tooltip text" uk-tooltip></a>
<button title="Another tooltip" uk-tooltip="pos:top">Hover</button>The uk-tooltip attribute enables tooltip functionality. The title attribute provides the tooltip text. You can specify tooltip position using the pos option (e.g., pos:top, pos:bottom, pos:left, pos:right).
Popovers are similar to tooltips but provide more space for content.
Basic Usage:
<button data-uk-popover="content: <p>Popover content here</p>">Open Popover</button>The data-uk-popover attribute enables popover functionality. The content option specifies the popover content. You can also target an element for the content using a selector (content: #my-popover-content) or use a URL (content: url.html).
(This component was already described in the Navigation Components section)
UIkit offers utility classes for controlling the visibility and behavior of elements across different screen sizes. These classes use media queries to adjust styles based on the viewport width.
Basic Usage:
<div class="uk-visible@m">Visible on medium and larger screens</div>
<div class="uk-hidden@s">Hidden on small screens</div>
<div class="uk-width-1-2@l">Half width on large screens</div>The @m, @s, @l, etc. suffixes indicate the breakpoint (medium, small, large, etc.). Consult the UIkit documentation for specific breakpoint sizes. The uk-visible and uk-hidden classes control visibility, while uk-width-* classes control the element’s width relative to its parent container, all responsively.
These utilities provide classes for adding margin and padding to elements.
Basic Usage:
<div class="uk-margin">Element with margin</div>
<div class="uk-margin-top">Top margin</div>
<div class="uk-padding">Element with padding</div>
<div class="uk-padding-small">Small padding</div>
<div class="uk-margin-remove-top">Remove top margin</div>
<div class="uk-margin-remove">Remove all margins</div>UIkit provides various modifiers for fine-grained control, such as uk-margin-small, uk-margin-large, uk-margin-remove-bottom, etc., which can be combined with directional modifiers such as uk-margin-top, uk-margin-bottom, uk-margin-left, and uk-margin-right. The same principle applies to padding utilities using uk-padding.
Classes for styling text.
Basic Usage:
<p class="uk-text-bold">Bold text</p>
<p class="uk-text-italic">Italic text</p>
<p class="uk-text-lead">Lead paragraph</p>
<p class="uk-text-muted">Muted text</p>
<p class="uk-text-center">Center-aligned text</p>Many other text styling utilities exist such as uk-text-uppercase, uk-text-lowercase, uk-text-small, uk-text-large etc.
Classes for applying colors to elements.
Basic Usage:
<div class="uk-background-primary">Primary background</div>
<div class="uk-text-secondary">Secondary text color</div>
<div class="uk-text-danger">Danger text color</div>UIkit offers a range of predefined color classes corresponding to the theme’s color palette (primary, secondary, danger, success, warning, etc.).
Control the display property of elements.
Basic Usage:
<div class="uk-display-block">Block-level element</div>
<div class="uk-display-inline">Inline element</div>
<div class="uk-display-inline-block">Inline-block element</div>
<div class="uk-display-none">Hidden element</div>These classes conveniently set the display property to block, inline, inline-block, or none.
(Many of these utilities are covered in the Layout Components section, under Flexbox. However, additional utilities exist.) Beyond the uk-flex-* classes for creating and styling flex containers and items, additional utilities are available for fine-grained control over flexbox behavior. Consult the UIkit documentation for the complete list of these utilities, as they are numerous and often depend on context. These are mostly classes to control things like flex-grow, flex-shrink, flex-basis, align-self, order, etc. These are very specific to controlling aspects of flexbox items and containers.
UIkit components can be customized using CSS and JavaScript. You can override existing styles using CSS and modify or extend component behavior using JavaScript. Overriding CSS is typically done by creating a custom CSS file that includes more specific selectors targeting the UIkit components’ classes. For example, to change the background color of all primary buttons, you would add this to your custom CSS file:
.uk-button-primary {
background-color: #007bff !important; /* Using !important is generally discouraged, use more specific selectors if possible. */
}Modifying JavaScript behavior requires a deeper understanding of UIkit’s code and might involve extending existing components or creating custom plugins. Consult the UIkit source code and documentation for details on specific components’ APIs.
Creating custom components allows extending UIkit’s functionality. This involves creating your own HTML, CSS, and JavaScript to build new components that integrate seamlessly with the existing UIkit framework. This generally involves writing your own JavaScript component, utilizing UIkit’s JavaScript API to interact with other components, and styling your new component using CSS. The process may involve using a module bundler to manage dependencies and build your custom component.
UIkit’s theme can be customized through CSS variables (custom properties). This approach allows changing the colors, typography, and other visual aspects of the framework without modifying the core UIkit CSS. By setting CSS variables in your own stylesheet, you can control the appearance of UIkit components throughout your application. Refer to the UIkit documentation for the available CSS variables and how to use them effectively.
Building accessible applications is crucial. UIkit is designed with accessibility in mind, but it’s the developer’s responsibility to ensure proper usage. Key considerations include semantic HTML, ARIA attributes, sufficient color contrast, keyboard navigation, and alternative text for images. UIkit provides many components that inherently support accessibility, but you need to carefully select and implement them correctly to maintain accessibility throughout your project.
Internationalizing (i18n) your application allows adapting it to different languages and regions. UIkit itself is language-agnostic; the responsibility of handling text translations rests with the developer. You can use JavaScript libraries or frameworks dedicated to i18n to manage translations within your UIkit application. These libraries usually enable loading language-specific data and dynamically switching between languages based on user preferences.
Optimizing performance is essential for a smooth user experience. Strategies include minifying and compressing CSS and JavaScript, using efficient image formats, and leveraging browser caching. Understanding which UIkit components or features might impact performance and proactively addressing them through code optimization and efficient asset management is crucial. Using lazy-loading techniques for images and other heavy assets is also recommended. Profiling your application’s performance is key to identifying performance bottlenecks.
Thorough testing is vital for ensuring UIkit application quality and reliability. This includes unit testing individual components, integration testing interactions between components, and end-to-end testing of user flows. Choose testing frameworks appropriate for your development environment. Regular testing is crucial, especially when making changes to existing components or adding new ones. Testing not only catches bugs but also helps maintain the code’s quality and ensures consistency over time.
We welcome contributions to UIkit! Whether it’s bug fixes, new features, or improvements to the documentation, your help is valuable. Follow these guidelines to contribute effectively.
Clone the repository: Start by cloning the UIkit repository from GitHub:
git clone https://github.com/uikit/uikit.gitInstall dependencies: Navigate to the cloned directory and install the necessary Node.js packages using npm or yarn:
npm install
# or
yarn installStart the development server: UIkit uses a development server for live reloading and building the project. Run the following command:
npm start
# or
yarn startThis will start a local development server and open UIkit’s website in your browser. Changes you make to the code will be automatically reflected in the browser.
UIkit adheres to specific coding standards to maintain consistency and readability. Please ensure your contributions follow these guidelines:
Before submitting a pull request, ensure your code passes all tests. Run the test suite using:
npm test
# or
yarn testAddress any failures before submitting your changes. Consider adding new tests to cover any new functionality you’ve introduced.
fix/button-styling, feat/new-component).Remember to consult the UIkit contribution guidelines on the official GitHub repository for the most up-to-date information and any specific instructions.
uk-button-primary modifies a standard button to have a primary color.This section would typically contain a detailed record of changes made to UIkit across different releases. Each entry would list version numbers, dates, and a summary of changes (new features, bug fixes, breaking changes, etc.). This section should be regularly updated with information about new releases and changes to the library. Refer to the UIkit project’s official repository (usually on GitHub) for the most current changelog.
UIkit is licensed under the MIT License. This means that you are free to use, modify, and distribute UIkit in your projects, subject to the terms of the MIT License. The license grants broad permissions to use the software, provided that the license notice is included in any redistribution. You can find the complete license text in the project’s repository. Always refer to the latest license file in the repository as it may contain minor updates or clarifications over time.