UIkit
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
- Homepage - Learn more about UIkit
- @getuikit - Get the latest buzz on Twitter
- Discord Chat - Join our developer chat on Discord.
UIkit is an Open Source project developed by YOOtheme.
Getting started
You have the following options to get UIkit:
- Download the latest release with pre-built CSS and JS.
- Install with npm to get all source files as they are available on GitHub:
npm install uikit
- Install with yarn to get all source files as they are available on GitHub:
yarn add uikit
- Directly load UIkit from jsDelivr: https://www.jsdelivr.com/package/npm/uikit
- Clone the repo to get all source files including build scripts:
git clone git://github.com/uikit/uikit.git
Developers
To always have the latest development version of UIkit, even before a release, you may want to use npm or yarn with the dev
tag.
- Using npm:
npm install uikit@dev
- Using yarn:
yarn add uikit@dev
- Using cdn: https://cdn.jsdelivr.net/npm/uikit@dev
Contributing
Finding bugs, sending pull requests or improving our docs - any contribution is welcome and highly appreciated. To get started, head over to our contribution guidelines. Thanks!
Versioning
UIkit is maintained by using the Semantic Versioning Specification (SemVer).
Browser Support
Latest |
Latest |
Latest |
Latest |
Latest |
Copyright and License
Copyright YOOtheme GmbH under the MIT license.
UIkit 3 Ideas and Suggestions
UPDATE: Get ready... UIkit 3 beta is coming on Monday 9th, January 🎉💥
We would love to get your feedback and ideas for UIkit 3. Just post them here.
The following lists are a short roundup of all feature requests below (hope I did not miss one) and what our thoughts are about them. I will update the list if new ideas are posted.
On our todo list
Following feature requests are planned or already in development.
In consideration
Following feature requests are taken into consideration.
uk-background-primary
.psd
file for quicker mockupsNot very likely
Following feature requests will most likely not be added to UIkit. But no final decision made. So it is open for discussion.
Already available
Following feature requests are already available in UIkit.
uk-hidden-small
) - Docs, TestReported bugs
Please don't use this thread to report bugs. Instead open a new issue.
interested in [official] SASS port of uikit
Hey uikit!
Are you guys interested in an SASS port for this project?
Originally I am a bootstrapper, but I like the style and structure of uikit.
I am not new to this, previously I was one of the contributor of the jlong/sass-bootstrap project. Did the translation for many bootstrap 2.x and 3.x versions.
I don't know, if a project-fork is the right decision, as the guys did for twbs/bootstrap-sass. Maybe a
scss
directory structure inside this repo would be fine. With some smart conversion scripts around. But that is to much detail for the moment.What are your thoughts..?
Best, m5o
Icons not showing (beta7)
I updated the less and js files to the latest beta7 and the icons are not appearing, then i replaced the uikit.js with the beta6 one and they appear again. I get no errors in the console so i have no idea what's wrong
Also i would like to suggest a global variable for the directory of the icons, that way 99.99% of the people will just replace one variable instead of 32457398472398792, thanks
Where is the Date and Time Picker?
Sorry if I'm asking this here but where is the Date and Time Picker? There's no way to customize the current I can't find JS and CSS that refers to it also.
Nothing in the documentation as well. In test, there's only one javascript option for form.
Dropdown with Multiple checkbox select
Hi UiKit Team, u did awesome framework for developers and compared to bootstrap ur given full feature and functionality. and one more i request to you pls develop Dropdown with Multiple checkbox select option, for example find bellow one link http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html
i dont want to use external plugin for developement. i want to use only one that is your file . so pls develeop it
UIKit3: Icons don't work.
Where put
<span uk-icon="icon: check"></span>
icons.svg are not loaded, because there are loaded from path 'css/dist/images'. In project we have dir: css, js and images where are icons.svg.Feature request - Sticky Footer
This may already be possible, but there is nothing in the documentation for it, so am guessing it currently is not. But it would be great if the Sticky component could be used to make a sticky footer.
Thanks very much :)
CDN auto-update broken
Hi there,
I'm Peter from @cdnjs, as requested in #153, @aheinze made a pull request: https://github.com/cdnjs/cdnjs/pull/2189 to host uikit on cdnjs, to make sure the human works minimum, I further enabled auto-update in https://github.com/cdnjs/cdnjs/commit/5a6c3a0dc2c3331a1a114859186f93fa0eaca96a, which will pull new releases via git tags, using
dist/
folder, however, this folder seems to be removed since v2.27.3, which makes auto-update broken on CDNJS, I wonder if is possible to add it back so that we can pull the latest release automatically? Thanks a lot!Best, Peter
uk-tabs will change from click and dragging mouse inside tab content in IE, Edge, and older Chrome
Using the uk-tab functionality, we have run into a major bug that occurs in older versions of Chrome + newest version on older OSX, plus newest versions of Edge and Internet Explorer.
While inside an active uk-tab, if I click and drag to the left or the right, the active tab changes. This is a major issue for us. Here is an example: http://codepen.io/eroc/pen/NRVJKB
Click next to the h1 inside the tab's content, and drag to the left or right and you will see the tabs change.
I have observed this behavior on the following operating systems and browsers: Mac OS X Mavericks v.10.9.5 - Chrome - latest version 54.0.2840.71 Mac OS X El Capitan v.10.11.6 - Chrome version 53.0.2785 (it is working in latest v 54.0.2840.71) Windows 10 - Microsoft Edge - latest version 38.14393 Windows 10 - Microsoft IE11 - latest versions 11.187.143
*please note the windows machines are NOT touch devices.
How to use with npm and webpack
Hi,
Are there any examples of how to use this with NPM? All the documentation says is to do
npm install uikit
but not on how to actually use it/include additional components such asnotification
.When I try the following code in my main
index.js
file:import 'uikit';
I get the following error:
Module not found: Error: Can't resolve 'uikit'
Has anyone used uikit with webpack/webpack2?
Double uk-icon when inside vue.js instance element
UIkit version
3.0.0-beta.18
Reproduction Link
https://jsfiddle.net/egw6ha1g/6/ (every time in chrome & firefox, 2s timer) https://jsfiddle.net/egw6ha1g/4/ (every time in chrome, sometimes in firefox) (search for uk-icon in the HTML) (this is race condition, if vue.js loads first then the problem doesn't manifest itself)
http://i.imgur.com/4kIJslD.png
Steps to reproduce
Put an element with
uk-icon
tag inside of vue.js instance element.What is Expected?
One icon appears.
What is actually happening?
Two icons appear.
I'm assuming this is because vue.js re-adds the elements after it parses them, causing uikit notice another uk-icon tag and it just adds the icon. Not sure if this is uikit or vue.js bug.
Navbar broken afer 3.15.19 update
Updating 3.5.9 to 3.15.19 breaks navbar, sticky, parallax....
Margins also disappeared in navbar, the same problem even on Ukit's example pages. https://getuikit.com/docs/navbar
This code works fine on version 3.5.9, switch to version 3.15.19 and everything breaks.
`
3.15.19uk-scroll prevent href="#link" from working
UIkit Version 3.15.14
Actual Behavior
What happened? Screenshots please, if relevant! I am using one-site page (my-domain.com), where are anchors to another site , ie. cookies page (my-domain.com/cookies). But on my navigation I am using hashtag navigation (my-domain.com/#about-us etc.), When I am on Cookies page and want to use hashtag navigation, it stops working!
Expected Behavior
What should have happened? Redirecting from my-domain.com/cookies to my-domain.com/#about-us should have worked.
Steps to Reproduce the Problem
<section id="link">
.uk-scroll
no aria-expanded for toggle modal-dialogs
UIkit Version
3.15.18
Actual Behavior
The recommend markup to open a modal-dialog is with uk-toggle. BUT uk-toggle adds aria-expanded="false" to the HTML-element. This is wrong behaviour for modal-dialogs (see WCAG).
Expected Behavior
If I use uk-toggle AND the target is a uk-modal THEN there should not be an automatic aria-expanded on the uk-toggle.
When opening modal with iframe in it, the dimensions of the modal cannot be in percent
Summary
I want to load HTML like an article from Joomla into a modalbox using uikit modal function. The dimensions of that modal should harmonize with the available screen width. This could be achieved easily by setting the dimensions in percent values. But the uk-modal does not allow, setting dimensions in percent.
Feature Request: It should be possible, to set dimensions of a modalbox with an iframe in it in percent values.
Priority
5 - because I need this function in my new websites.
Article Slider empty slides on tags in joomla plugin
We use ukit slider and article in combination as plugin for joomla 4.2.5 php8.1.
the slider shows all slides for the posts. But as soon as keywords are added and these are selected, the filtering goes haywire and shows too many slides instead of just the ones selected via tags.
You can test it here: https://codepen.io/WM-Loose/pen/dyKLPRx
All and Tag1 is ok but Tag2 not.
Hope you can help!
Greatings from germany Dirk
When opening a modal with audio in it, audio won't stop after closing the modal
Summary
When I start a modal window with an audio in the modalbox and I start playing the audio and then closing the modal box, the audio will keep on playing. In the uikit description for playing videos in a modalbox, they give a strong advice, to add "uk-video" at the end of the src definition. Consequently I am missing the function of a "uk-audio" term.
Please add the missing event handler to uk-audio!
PS: I am using YOOtheme pagebuilder and do not want to use their lightbox instead of the modal because of many flaws.
Priority
_On a scale of 1-5, how important is this feature to you? It is of big importance = 5 for me, because actually I am redesigning my two websites and do want this function in both websites.