uikit / uikit Goto Github PK
View Code? Open in Web Editor NEWA lightweight and modular front-end framework for developing fast and powerful web interfaces
Home Page: http://getuikit.com
License: MIT License
A lightweight and modular front-end framework for developing fast and powerful web interfaces
Home Page: http://getuikit.com
License: MIT License
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!
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
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!
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!
It would be nice to have bower packages published
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;
}
Could you please help ?
Many thanks !
Phil
Trying add more than one theme in test.js, but it doesn't work for me. Can somebody help me what to do?
Please add class to navbar to stay fixed on top when scrolling page.
Thanks.
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
It's in : name_of_my_template/html/mod_menu
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
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 ?
The attached version of the navbar doesn't work because this css class isn't defined in de uikit files.
...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?
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
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 ?
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:
Also do you have some web sites samples? Just I start to modified with them.
Thanks for your all advice...
Best regards.
Implemented the UI-Kit in a new html page. In some browsers the icons of the font-awesome are not working properly.
Tested in
The temporarily site: http://orpt3.molkenstehler.eu
Did I something wrong or is something not working well in the kit?
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.
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.
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
Ideally being able to override the html but for now a default
Would you please extend your customizer to use existing files.
This is for some reasons:
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!!
Thought I had found an issue with the dropdown component when the screen real-estate isn't there... but you thought of that already :)
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
every component has 4 classes it seems except buttons. Could we get a warning class for buttons?
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; }
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
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!
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,
how can I change the width of the modal?
Greetings
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 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 */
}
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
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!
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
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
..
}
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"
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.
Regards, uk-icon-medium css rule not correctly display the icon in Internet explorer 11, oversized
It would be nice to be able to keep the offcanvas menu open by either attaching a class or using JS.
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
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:)
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.