A lightweight and modular front-end framework for developing fast and powerful web interfaces

  • By null
  • Last update: Jan 4, 2023
  • Comments: 17

uikit banner

UIkit

Discord

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.


UIkit is an Open Source project developed by YOOtheme.

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.

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

Firefox Safari Chrome Edge Opera
Latest Latest Latest Latest Latest

Tested With
BrowserStack

Copyright and License

Copyright YOOtheme GmbH under the MIT license.

Github

https://github.com/uikit/uikit

Comments(17)

  • 1

    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.

    • Custom dist builder (Only the components you need) - Coming with Website Relaunch
    • Switch to SVG instead of Icon fonts - Not started yet
    • New navbar style - Default Theme will be completely overhauled with UIkit 3.0
    • Bigger default font-size - Default Theme will be completely overhauled with UIkit 3.0
    • Standarize script event - Modal use uk.modal.show while Nestable use sortable-start
    • Unit-less line-heights #461
    • Better JS documentation
    • More examples in documentation

    In consideration

    Following feature requests are taken into consideration.

    • Tags component for forms (Like select2)
    • Background classes like uk-background-primary
    • Sticky footers
    • A .psd file for quicker mockups

    Not very likely

    Following feature requests will most likely not be added to UIkit. But no final decision made. So it is open for discussion.

    • IE9 animation keyframe fallback
    • Inline calendar
    • All js in one file
    • Grid push classes for different screen sizes
    • Different tooltips (like danger, success)
    • Tree-view component
    • Form Validation
    • Navbar modifier for dark version
    • Stack multiple modals
    • Multi level drop down menu
    • Remember active tabs after reloading the page
    • Button custom active
    • Nestable with copy function

    Already available

    Following feature requests are already available in UIkit.

    • Sass Support - Docs
    • New dist repository for Bower - Bower Repo
    • Slideshow component - Docs, Test
    • Animations for Switcher - Docs
    • Responsive tables - Docs
    • Full screen images - Docs, Test
    • Flexbox component - Docs, Test
    • Markdown Support - Docs, Test
    • Nicer form checkbox/radio elements - Docs, Test
    • Elegant sticky headers (Scroll out and return later) - Docs, Test
    • Toggle with custom classes (like uk-hidden-small) - Docs, Test
    • Parallax component - Docs, Test
    • Accordion component - Docs, Test
    • Grid without gutter - Docs
    • Overlay with zoom effect - Docs
    • Popover component - Docs, Test

    Reported bugs

    Please don't use this thread to report bugs. Instead open a new issue.

  • 2

    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

  • 3

    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

  • 4

    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.

  • 5

    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

  • 6

    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.

  • 7

    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 :)

  • 8

    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

  • 9

    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.

  • 10

    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 as notification.

    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?

  • 11

    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.

  • 12

    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.19 Document
    <div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200"
        style="background-image: url(https://getuikit.com/docs/images/dark.jpg);">
        <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>
    </div>
    
    <div uk-sticky="end: #transparent-sticky-navbar; sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
        <nav class="uk-navbar-container" uk-navbar style="position: relative; z-index: 980;">
            <div class="uk-navbar-left">
                <ul class="uk-navbar-nav">
                    <li class="uk-active"><a href="#">Active</a></li>
                    <li>
                        <a href="#">Parent</a>
                        <div class="uk-navbar-dropdown">
                            <ul class="uk-nav uk-navbar-dropdown-nav">
                                <li class="uk-active"><a href="#">Active</a></li>
                                <li><a href="#">Item</a></li>
                                <li><a href="#">Item</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    `
  • 13

    uk-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

    1. Create a blank site with sitewide navigation and few <section id="link">.
    2. Create another page, that will be used as an "external" link.
    3. Try to reach my-domain.com/#about-us from my-domain.com/cookies with uk-scroll
  • 14

    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.

  • 15

    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.

  • 16

    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

  • 17

    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.