uikit / uikit Goto Github PK

I know the web is moving forward, but unfortunately some company like mine are still a tad behind. This framework doesn't work in IE8. Components are broken.

Any future support for ie8?

Hi, I just found uikit some hours ago and I felt in love with it immediately. It works like a champ in desktop browsers but I got some problems about delaying and unsmoothly animation in webkit mobile browsers.

I've checked the code and saw that the animations was done by using the css() method. In my knowledge, it's not hardware accelerated so it'll better if we could replace it with translate3d ?

Hi,
I congratulate you. I like very much your work. I already use TwitterBootstrap at my projects.

I wonder with which responsive components at below are compatible with uikit:

1. Carousel slider
2. Date-time picker
3. Multisuggest
4. Calendar
5. Tag Manager
6. WYSIWYG editor
7. Lightbox

Also do you have some web sites samples? Just I start to modified with them.

Thanks for your all advice...

Best regards.

With most HTML tabs you can be able to focus on a tab on a page by adding the #id of the tab to the url. It would be nice to see this feature on uikit.

Example:
If my site is http://www.mysite.com and I have a tab with id = "mytab", the url http://www.mysite.com#mytab should make the tab active

regards

This was originally reported on the YOOtheme forum.

The border that creates the top arrow in the menu dropdown is set to inherit from @theme_global-dark-background (navbar.less):

.uk-navbar-nav .uk-open:before {  
    content: '';  
    position: absolute;  
    left: 50%;  
    bottom: -@dropdown-navbar-margin;  
    margin-left: -@theme_navbar-nav-open-arrow-width + (@theme_navbar-nav-margin-left/2);  
    border-right: @theme_navbar-nav-open-arrow-width solid transparent;  
    border-bottom: @theme_navbar-nav-open-arrow-height solid @theme_global-dark-background; // <-- this row  
    border-left: @theme_navbar-nav-open-arrow-width solid transparent;  
    -webkit-animation: @dropdown-animation 0.2s ease-in-out;  
    animation: @dropdown-animation 0.2s ease-in-out;  
    z-index: 10;  
}

This causes the arrow to become the wrong color if you change the background of the dropdown in the customizer, instead the variable should be changed to use '@dropdown-navbar-background' that defines the background for the dropdown.

It would be a nice addition to be able to pass animation/transition options to all the javascript components in the same way you can pass "bgclose:false" to Modal.

though perhaps it would be more flexible to be able to pass a function i.e. for Switcher =

transitionFnct = function(showElem, hideElem) {
//showElem = li to be shown
//hideElem = li to be hidden or null
..
}

It would be nice to have bower packages published

Regards, uk-icon-medium css rule not correctly display the icon in Internet explorer 11, oversized

Please add class to navbar to stay fixed on top when scrolling page.
Thanks.

This is not an interoperability issue, but more a wrong example. address is not for mail addresses it is for contact information. HTML5 reference.

The issue is present at least in the documentation on base

Hello,
I'm playing with the amazing theme customizer making my own theme and I'm really impressed of what I can achieve! :-)
All is working very very good except the "Get LESS" utility: here's what I did

After creating a new theme folder, I put the following lines (to have different background colours for body and container):

variables.less

@global-background: #f5f5f5;
@utility-container-background: #fff;

utility.less

.hook-container() {
    background-color: @utility-container-background;
}

To change the container color through Customizer as well, I added a "@utility-container-background" variable in the groups/general/vars section

"label": "General",
"vars": [
    "@global-background",
    "@global-border",
    "@utility-container-max-width",
    "@utility-container-large-max-width",
    "@utility-container-background"
]

All is working very fine and I can easily change the container background colour, but when I click on "Get LESS" button, the file has a duplicated entry for "@utility-container-background":

/*
 * General
 */
@utility-container-background: #f7dbdb;
/*
 * Utility
 */
@utility-container-background: #f7dbdb;

Where am I wrong? Is this the expected behaviour?
Thanks a lot!

Hi,

First, thanks for your amazing work !!

In fact, I just try to get the same render than you by using the ProximaNovaLight font but, for an unknown reason, I'm not exactly getting the same.

Here are the specific parameters:

@font-face {
font-family: 'ProximaNovaLight';
src: url("../fonts/proximanova-light-webfont.eot");
src: url("../fonts/proximanova-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-light-webfont.woff") format("woff"), url("../fonts/proximanova-light-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;

body {
background: #ffffff;
font-family: ProximaNovaLight, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
line-height: 20px;
color: #444444;
}

And the result

Could you please help ?

Many thanks !
Phil

The tooltip should have an activation toggle to activate on hover or active, just like the pos property.

Take for instance forms, where you might want to add a tooltip to explain what the user should input. triggering the tooltip on ':active' would activate the tooltip for the correct field as the user tabs through the form, and it won't require the user to keep the mouse pointer over the field at all times.

Please see comment below

I see that table data text is slightly bigger that normal typography text (that is 14px): is this a deliberate feature? Do you plan to set font size for THs and TDs in next releases?

Thanks

Hi,

you can add this?

http://jsfiddle.net/mta12/9rR4H/

Greetings

Hello,

I moved from bootstrap to your UIKit and I have a little problem here.
I'm inviting you to look at the attached image. Can someone tell me why my labels are compressed like that ?

First of all Great Job !!
In the customizer for me it looks like that the Default theme and the Almost Flat theme are reversed.
Viewed on the iPad !! Maybe its because of that but Check that on Mac later.

Greets

Ludwig

In the Off-canvas demo, triggering the off-canvas always scrolls back the main content to the top. Is this a limitation of the component or a bug in the demo?

I resize the screen, Navigation goes to left and I toggle nested navigation item.
And I resized to full width. But site
width doesn't go Full width. Look at attachment.
[But I get full width, when I click on other area.]

As I delve further into UIkit I have to say you have done a great job.

I love the default responsive behavior of Tabs (to a drop-down) but for better user experience the responsive drop-down tab needs an as per UIkit Drop-downs

While you scroll a list of items in dropdown component the item is selected on both touch start and end event.

Maybe we should use a configurable distance threshold to abort a tap event if the user moves his or her finger too far from the touchstart event?

When I try to download the .LESS Files they are empty!!

It would be nice to create a trail of modal box dialogs.

Therefore "Button open box1" > | Box 1 appears including "Button open box 2" | > Box1 closed + | Box 2 appears +"Close" Button |

Not aware if this is already possible at least I didn't manage to do.
Feedback is appreciated:)

Dear creators,

I just replaced bootstrap with uikit but one thing I miss very much: dark ui kit.

Like bootstrap has one: http://danneu.com/posts/4-darkstrap-css-a-dark-theme-for-twitter-bootstrap-2/

Thank you!

Current position at page is resetting when canvas-off has open. it's problem when content is big. is there a way to fix it?

I think it is good idea to put some information about browser support somewhere on home page or documentation as I can not see it anywhere.

Implemented the UI-Kit in a new html page. In some browsers the icons of the font-awesome are not working properly.

Tested in

• Opera 12.16 - works
• IE9 - don't works
• Firefox ESR 10.0.10 - don't works

The temporarily site: http://orpt3.molkenstehler.eu

Did I something wrong or is something not working well in the kit?

Hello, I'm having trouble placing multiple offcanvas buttons/areas on the same page. When the page loads, whichever offcanvas button I click on first becomes the one that works, and any other offcanvas buttons on the page do nothing when I click them. I see that you have multiples on the offcanvas demo page (i.e. http://www.getuikit.com/docs/offcanvas.html), but I can't seem to figure out how to accomplish it.

I don't think this is an issue, but I sure can't figure out what I'm missing. Thanks for any assistance you can provide.

It looks like .uk-grid comes with default padding around each interior grid item --> I'd love to see an uk-grid-collapse option that would effectively collapse any/all padding/margin around each column (or even the possibility of passing in a dynamic grid spacing value on init, like data-uk-grid-spacing which would expect an int). Thanks!

I ran into problems with the offcanvas display when using compiled LESS (either using less.js or less.php). The offcanvas bar did not show any content and kept the screen blocked after sliding back, so it had to be refreshed to continue.

I fixed it (for me) by modifying the offcanvas.less.
With this modification it works now:

.uk-offcanvas-bar {
position: fixed;
top: 0;
bottom: 0;
/* modified, before = left:0 and no z-index */
left: -100%;
z-index: @offcanvas-z-index + 1;

/* didn't work:
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
z-index: @offcanvas-z-index + 1;
*/
width: @offcanvas-bar-width;
max-width: 100%;
background: @offcanvas-bar-background;
overflow-y: auto;
-webkit-overflow-scrolling: touch;

/* didn't work:
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
.hook-offcanvas-bar;
/
/ substitute, taken from the original .css file /
-webkit-transition: left 0.3s ease-in-out, right 0.3s ease-in-out, right 0.3s ease-in-out, right 0.3s ease-in-out;
transition: left 0.3s ease-in-out, right 0.3s ease-in-out, right 0.3s ease-in-out, right 0.3s ease-in-out;
/ end of modification */
}

Hi all,
A great feature of the tab (or switcher) component on smaller screens is the tabs themselves dissapear and only the active tab is shown (with a dropdown for the remaining). The only issue I see with this is that there's no indication there are more items to that tab, which make the experience a bit misleading.

So, I wonder if there should be an icon added to the active tab that denotes more are available (maybe something similar to the off-canvas icon), or possibly collapsed tabs should be thought of differently, something like how Foundation: Section works. With that, they by default collapse down to accordions (which are easier to read/interact with on a mobile device) with the option of keeping them as tabs on a smaller screen (which I think the default uiKit way of dealing with this would be better). Thanks!

What about a UI item for upload file (<input type=file">) and even pictures with preview? It is often overlooked in other CSS frameworks, but it's used a lot in backends for uploading media, product pictures, etc.

At the moment, I only know of some 3rd party stuff for Bootstrap (the best IMHO is Jasny's fork: http://jasny.github.io/bootstrap/javascript.html#fileupload), it would be nice to have this feature integrated into UIKit

Thanks

Hi,

how can I change the width of the modal?

Greetings

Thought I had found an issue with the dropdown component when the screen real-estate isn't there... but you thought of that already :)

At the bottom in the section Navbar with dropdowns there is the wrong classname listed.
.uk-navbar-dropdown should be replaced by .uk-dropdown-navbar

When I look at my site with a smartphone, I have a gap on the left (padding?). I'm sure I followed the instructions:

body
div class="uk-container uk-container-center"
div class="uk-grid"
div class="uk-width-large-1-1"

Hi,
I love UIKIT. I would to create my own framework using UIKIT but I've a big problem. The dropdown menu don't works with me but I don't know why. When I'm on my parent

Hi,
I would like to close a modal with a "cancel" uk-button at the bottom of the dialog (not only the top right cross). I'm trying to add it the uk-modal-close class, but it change the aligment. Is there a best way to achieve that ?

Modal popup with slide transition does not appear to be transitioning (or transitioning enough) and opens with the top of the popup out of the viewport.

Does it with frameless modifier on in the modal docs page too.

It would be nice to be able to keep the offcanvas menu open by either attaching a class or using JS.

Please can you add a bordered table like the Bootstrap one (http://twbs.github.io/bootstrap/css/#tables-bordered) in the next releases? It would be nice for calendars, and more...

Thanks!

The attached version of the navbar doesn't work because this css class isn't defined in de uikit files.

http://getuikit.com/docs/navbar.html

Would you please extend your customizer to use existing files.

This is for some reasons:

• to work further on an open configuration
• to refine active configurations
• to update definitions for retaining individual configurations

It wuld be good if your documentation is revisited...a step by step on to how to build a simple uikit template (at least just a basis)....was stress trying to understand where to start...thanks

It would be nice to have the ability to prepend or apend icons and text to a form element. Take a look at 'Extending form controls' section of bootstrap for inspiration: http://getbootstrap.com/2.3.2/base-css.html#forms

I've implemented the modal box into Warp 6; When I add a module (which has the class .grid-box that is set to float: left ) it causes the uk-modal background not to display correctly.

It would be good to add a clearfix for that; At the moment I've added float:none to my custom css and it works

.uk-modal-dialog>:last-child {
margin-bottom: 0;
float: none;
}

Trying add more than one theme in test.js, but it doesn't work for me. Can somebody help me what to do?

Hallo,
I just discovered and overview UIKit: it seems very powerful and I'll check it in the next days!
I have to ask a question, though: can jQuery UI be easily integrated? Or will it clash with existing UIKit scripts? You know, all those sliders, calendars, etc. that we can't live without will continue to work?... :-)

Thanks

every component has 4 classes it seems except buttons. Could we get a warning class for buttons?