Uikitty - UIkit for Drupal 8

Demo to see how the theme looks in a sample Drupal site Apply theme

Faster and less bloated than Bootstrap. A lightweight and modular front-end framework for developing fast and powerful web interfaces with Drupal 8.x

This base theme bridges the gap between Drupal and the UIkit Framework.

Features

Many built-in overrides for UIkit css
Focus on extensibility
Completely modular
Easy to use
Many sub-themes to choose from or learn how to make your own

Documentation

Visit the projects official documentation site.

This site has articles about advanced usage of uikitty, check out the first article showing how to turn Drupal core status messages into sophisticated javascript alerts using the notify component of uikitty. (This is now a default feature of uikitty.)

Additional sub themes for uikitty:

All UIkit core functions are automatically available and can be activated through the use of UIkit markup injected into the pages through custom templates and preprocess code. For example adding a class of "uk-button" to any link will automatically turn that link into a button. Using a modifier class of "uk-button-primary" will turn the button into the primary button color. UIKIT CSS can be customized here. It is important to have an understanding of UIkit before attempting to use this theme, if you are not familiar with UIkit and it's awesome collection of useful functions, you can find more info here.

Using components is where the magic under the hood starts getting really powerful.

All components from UIkit are built in as drupal asset libraries and easily accessible by adding the following code to your twig page templates:
{{ attach_library('uikitty/<component-name>') }}
The code for adding a slider would be:
{{ attach_library('uikitty/slider') }}
That's it! All javascript and CSS will automatically be loaded for that page. Once you've added the library to the template, that libraries functions will be available for you to access via classes and attributes as defined in UIkit documentation.

Adding attribute markup to page templates

After adding a uikit library asset to your page, you will want to update your templates and preprocess code to inject attributes as defined by the UIkit structural guidelines and the desired functionality. Attributes can be added easily using Twig template syntax. Instructions for adding attributes to page templates.(Additionally adding classes to views generated lists, blocks and pages is very effective.)

UIKITTY issues and development are managed at GITLAB.

If you are using uikitty, please consider contributing to the project. We have decided to use Gitlab's issue tracker to manage feature additions and merging code. Check out the uikitty project page on Gitlab, fork it, send us a pull request, share your child theme or code block and most importantly create any issues for uikitty in the Gitlab issue tracker so we can effectively manage integration of new features and bug fixes.

 

Want to customize this theme in a unique way for your website, we are here to help you!

We also build custom Drupal themes

 

Get a custom theme