Build UIkit by myself

Published by @SoNiceInfo at 4/1/2020

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 | github.com

git clone git://github.com/uikit/uikit.git

Select CSS you need.

Import modules to build css at the file below.

uikit/src/less/components/_import.less

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.

uikit/src/js/components/index.js
uikit/src/js/core/index.js

Example:

// 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';

Build

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.

uikit/dist/css/uikit.min.css
uikit/dist/js/uikit.min.js
uikit/dist/js/uikit-icons.min.js