Project structure

Dig into the core of UIkit and learn what it's all about.

GitHub

UIkit is hosted on GitHub and licensed under MIT license. You're welcome to use it for all your personal and commercial projects. To access all source files, just clone the repository on GitHub or download the latest version.

Download source


File structure

UIkit is built on Less, a CSS preprocessor, which adds variables, mixins and much more to CSS. It compiles code written in Less into CSS. The main file structure of UIkit is as follows.

Folder Description
/docs Contains the very UIkit documentation you are looking at right now.
/src Contains all Less and JavaScript component files.
/tests Contains test files of all components.
/themes Contains all additonal theme files organized in sub folders.
/vendor Contains external libraries, like jQuery and others that are used by UIkit.

All compiled and minified CSS and JavaScript files, as well as Less and Sass files can be found in the separate Bower UIkit repository. Check out the documentation on Less and Sass files for more information.


Automate preprocessing

To automate the process of compiling Less files into CSS, we use Gulp, a Node.js based task runner, that watches the source directory you are working on. Whenever you save changes in the source files, Gulp automatically compiles all files into one single CSS file.

Firstly, you need to install Node and setup the gulp as a global install. Finally, switch to the UIkit directory and install the Node dependencies.

npm install -g gulp

cd uikit
npm install

Now you can run Gulp to build and modify the release. The built version of UIkit will be put in the /dist directory. Pass a theme name parameter to only build the specified theme.

gulp [-t themename]

You can also set Gulp to watch your working directory, so it will preprocess your files automatically everytime you hit save. Pass the theme parameter to watch only a specified theme to speed up the build process.

gulp watch [-t themename]

Load new themes and styles into the customizer.

gulp indexthemes

Tests

UIkit provides test files for every component. Each of these pages contains test cases of its component and gives you an overview of all the possibilities that are supported out of the box.

UIkit uses BrowserSync to accelerate your workflow. Run gulp watch [-t themename] and you will be able to see changes on-the-fly, not only in your browser but across multiple devices, when working on your own theme or modifying existing ones. You can switch between all components and themes within the tests and even switch to RTL mode.

Go to tests