Build UIkit by myself

Published by @SoNiceInfo at 4/1/2020

image of uikit

To improve page speed faster, building UIkit with essential CSS / JS.
This site's uikit.min.css is 50% smaller than the one by default.
The size is 121KB. (263KB by the default)

Prerequisite knowledge

  • Skills to use CLI
  • git
  • node.js
  • yarn / npm

Download source code of UIkit

Download source code from GitHub.uikit/uikit: A lightweight and modular front-end framework for developing fast and powerful web interfaces |

git clone git://

Select CSS you need.

Import modules to build css at the file below.


Comment out unnecessary moudules no to import. There are some modules that you don't use, but the other module are dependent, so that error occures. Example:

// Base
@import "variables.less";
@import "mixin.less";
@import "base.less";

// Elements
@import "link.less";
@import "heading.less";
@import "divider.less";
@import "list.less";
// @import "description-list.less";
@import "table.less";
@import "icon.less";
// @import "form-range.less";
@import "form.less"; // After: Icon, Form Range
// @import "button.less";

Select JavaScript you need.

Import modules to build JavaScript at the file below.



// export {default as Countdown} from './countdown';
export {default as Filter} from './filter';
// export {default as Lightbox} from './lightbox';
// export {default as LightboxPanel} from './lightbox-panel';
// export {default as Notification} from './notification';
// export {default as Parallax} from './parallax';
// export {default as Slider} from './slider';
// export {default as SliderParallax} from './slider-parallax';
// export {default as Slideshow} from './slideshow';
// export {default as SlideshowParallax} from './slideshow-parallax';
// export {default as Sortable} from './sortable';
// export {default as Tooltip} from './tooltip';
export {default as Upload} from './upload';


Let' build.
Build result example:

[d1v1b@terminal] yarn compile
yarn run v1.22.1
$ yarn compile-less && yarn compile-js
$ yarn icons && node build/less
$ node build/icons
dist/css/uikit-core.css 172.47kb
dist/css/uikit.css 181.11kb
dist/css/uikit-core.min.css 110.61kb
dist/css/uikit.min.css 118.05kb
$ node build/build
dist/js/components/notification.js 4.34kb
dist/js/components/notification.min.js 2.14kb
dist/js/components/upload.js 6.24kb
dist/js/components/upload.min.js 2.82kb
dist/js/uikit-icons.js 67.79kb
dist/js/uikit-icons.min.js 62.49kb
dist/js/components/countdown.js 4.59kb
dist/js/components/filter.js 12.12kb
dist/js/components/countdown.min.js 2.04kb
dist/js/components/filter.min.js 4.98kb
dist/js/components/sortable.min.js 7.20kb
dist/js/components/sortable.js 17.13kb
dist/js/components/tooltip.min.js 6.32kb
dist/js/components/tooltip.js 14.99kb
tests/js/test.js 32.15kb
tests/js/test.min.js 12.09kb
dist/js/components/slider-parallax.js 16.08kb
dist/js/components/parallax.js 15.05kb
dist/js/components/slider-parallax.min.js 5.77kb
dist/js/components/parallax.min.js 5.37kb
dist/js/components/slider.js 33.45kb
dist/js/components/slider.min.js 13.77kb
dist/js/components/slideshow.js 29.72kb
dist/js/components/lightbox-panel.js 51.99kb
dist/js/components/slideshow-parallax.min.js 5.78kb
dist/js/components/lightbox-panel.min.js 21.22kb
dist/js/components/slideshow-parallax.js 16.08kb
dist/js/components/slideshow.min.js 11.99kb
dist/js/uikit-core.js 224.76kb
dist/js/uikit-core.min.js 87.30kb
dist/js/uikit.min.js 130.43kb
dist/js/uikit.js 334.69kb
dist/js/components/lightbox.js 54.25kb
dist/js/components/lightbox.min.js 22.19kb
✨  Done in 13.96s.

Use in your web site.

Built CSS and Javascript are in the directory below. Use them in you web site.