What is a Uikit

UiKit is an open-source frontend framework for our web development which means that it’s basically a collection of CSS and Javascript that helps you to structure your project and basically includes a lot of components that you can readily use in your own web pages, but also with custom JavaScript modules that add additional functionality to UiKit itself.

It is developed by germen company who develops WordPress and Joomla themes.

Why Use UiKit?

• It’s open source.
• It’s lightweight.
• It’s responsive.
• It’s easy to use, and it has a lot of features that make it very versatile in your application development process.
• It’s modular which means basically its split into a core part and the component part.

 

You can also customize the templates according to your specific needs and requirements by adding custom CSS rules or replacing existing ones with new stylesheets that match your brand identity more closely than the default ones do! This will help you create an elegant UI for your website/application without having any technical knowledge about HTML/CSS code whatsoever!

Installation

For a basic setup and overview of Uikit.

First of all, you need to download Uikit from here – Download Uikit (or get it from npm or yarn).

In the ZIP file, you will find all CSS and JavaScript files ready to use for your project. The core framework of Uikit has almost no styling in order to keep it slim. Therefore it provides two additional distributions with a gradient and an almost flat style. Each style comes as a single CSS file as well as a minified version.

UIKit comes with 3 prepared themes – default, gradient, and almost flat.

# HTML Markup

Add the compiled and minified CSS and JavaScript to the element of your HTML5 document.  jQuery is required as well. For your basic setup, that’s it.

To compile Uikit yourself, you can use the included build scripts.

UiKit is written in a language called LESS.

UiKit is written in a language called LESS. LESS is a CSS preprocessor that allows you to write stylesheets in a more modular and reusable way, while still keeping them as plain-vanilla as possible. This allows you to include customizations in the build process, rather than manually overwriting many CSS rules by hand.

There are basically two approaches available to you: 

• Set up your own build process
• Use the build scripts included in Uikit

 

Set up your own build process

To include Uikit in your project’s build workflow, you need to import the core Uikit styles (uikit.less) or Uikit with its default theme (uikit.theme.less) into your project’s own Less file. This main Less file than needs to be compiled in any way you like. 

Use the build scripts included in Uikit

If you want to change the styling of Uikit, you can use its build process to create a differently themed version of the CSS, that you can then include in your project. That way you do not need to set up your own build process.

To include your own Less theme in the build process, create a /custom directory, which will contain all of your custom themes.

UIkit and reactive JavaScript frameworks

Uikit is listening for DOM manipulations and will automatically initialize, connect and disconnect components as they are inserted or removed from the DOM. That way it can easily be used with JavaScript frameworks like Vue.js and React.

Component usage

You can use Uikit components by adding uk-* or data-uk-* attributes to your HTML elements without writing a single line of JavaScript. This is Uikit’s best practice of using its components and should always be considered first.

 

Note: React will work with data-uk-* prefixes only.

Custom prefix

By default, all classes and attributes in Uikit start with the uk- prefix. This avoids name collisions when introducing Uikit to existing projects or when combining it with other frameworks. Uikit allows to change that prefix. This even allows using multiple versions of Uikit alongside each other. In addition, the scope mode allows to limit the Uikit styles to only affect certain parts on your pages.

Right-to-left support

UIkit supports right-to-left languages and allows you to switch the orientation of all design elements.

To use Uikit in RTL mode, use uikit.rtl.min.css which is included in the dist/ folder. Make sure to add the dir=”rtl” attribute to the tag of your website. JavaScript supports RTL by default, so you can include the regular JS files without changing anything.

Conclusion 

In this blog post, you have learned all about using UiKit as a framework for our front-end development projects. UIkit makes it easy to build fast and powerful web interfaces, without compromising on quality or usability.