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.
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 installNow 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 every time 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 indexthemesTests
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 sync 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.
