imperavi / kube Goto Github PK

I really absolutely think I have found my favorite framework in Kube. However, I am someone who relies heavily on code examples and am having a tough time using the example pages.

Can you update and include samples on how to do use the various attributes (blur, width, etc.) to launch a mods window on page load? Can modals us an on page div as content or must it be another resource?

In documentation I found nav-fullwidth class for full width navigations, but actually you have to add fullwidth instead of nav-fullwidth

Can only set the first drop-down in a multiple form.

Any chance of adding the css for Vertical Tabs?

The navigation toggle for Safari on iOs has a delay in collapsing the contents of the menu. It can be seen on the imperavi site, whenever you load a new page you see the entire menu briefly and then it switches to the mobile menu icon. Could you make adjustments to the js file to hide to the list completely until the entire page is loaded and then display the mobile menu icon? Thanks, great framework. Bob

To reproduce:

1. Visit the Toggle Me Demo in the docs
2. Shrink the browser window until the Brand nav bar is replaced with the Toggle menu link
3. Open the menu
4. Close the menu
5. Stretch the browser window back to original size until the Toggle menu link disappears
6. Note that the Brand nav bar does not re-appear

I know it's just a minor thing, but I thought I'd mention it anyway.

Example:

One is using 14px and one 15px for base font size.

It should take no more than 30secs to set up

Hello,
could you please add rtl support?

thanks

Doesn't seem possible to send a CSRF token when making a request for autocompletion.

units-padding as mentioned here, when used in conjunction with unit-predefined numbers doesn't seem to be working. It should be working according to lines 882 - 899 in kube.css, but it's not.

Of course unit-paddnig without s works as expected.

When creating forms with multiple buttons the layout of the buttons break if there is not some sort of white space between them. For example take the first form example on your website. The buttons look like this:

<p>
    <button class="btn btn-blue">Log in</button>
    <button class="btn">Cancel</button>
</p>

but if you take away the white space like this:

<p>
    <button class="btn btn-blue">Log in</button><button class="btn">Cancel</button>
</p>

the buttons look like this:

This is a problem because my HTML gets generated dynamically by Jade so it has no whitespace between elements like that and it is breaking my layout.

Adding a '&nbsp' between the buttons adds too much space in between.

The problem seems to be that "button" elements are inline-block which respect whitespace. I don't think there is a way to fix this without changing everything. (Source)

For people using Jade like me, the problem goes away when you pass in the option "{ pretty: true }" (See here. The file size increases marginally and it probably takes slightly more time to generate but it seems like a pretty good fix for now.

Does anyone think it would be worth fixing at a css level?

The list items do not return to original inline position after resizing.

http://imperavi.com/kube/js-dropdown/

Navigation Fixed doesn't work in Firefox,
The navigation fixed works perfect in Chrome and Safari, but in Firefox it looses the padding,..
http://imperavi.com/kube/tools/js-navigation-fixed/

Hi,

I'm currently working on a project that is utilising the js components from v.4. As you have removed all documentation for these components from your website. It is all well that you have deprecated components from the library, but you have to continue to support previous versions for existing users. Can you add this up as either a subsection or as a download ASAP so I can continue working with the framework?

Regards,
Darren

I've found a minor issue on the Forms documentation in the first example when it says:

 <p>
    <button class="btn-blue">Log in</button>
    <button class="btn">Cancel</button>
</p>

It's missing the btn class in the first button.

 <p>
    <button class="btn btn-blue">Log in</button>
    <button class="btn">Cancel</button>
</p>

When including kube.js or kube.min.js in WordPress on a completely naked theme it outputs a console error and all js elements fail to fire.

Console Error is:
Uncaught TypeError: Cannot read property 'fn' of undefined
Line: 274

"$.fn[name] = SuperKube.createPlugin(name, klass, classname);"

I can't seem to make icons work here https://github.com/JJ/splash-volunteer/blob/master/public/index.html

I have tested several containers, but no way. They simply don't show up.

It would be great to have a mixin to set the base font-family for entire site. Only way I found to do it currently is by adding the variable to the theming.scss file:

$font-family: 'Roboto', sans-serif; $heading-font-family: $font-family;

Using Dropdown inside nav with Toggleme works only one time after page is loaded. Trying to open Dropdown again instantly closes nav.

http://i.imgur.com/aOQ7MnC.gifv

Chrome 51.0.2704.103 m, Opera 38.0.2220.41
Windows 10

I've added a new pull request under "scss", some issues are now fixed, so i closed the old "SaSS" request. If we can merge this folder to master, i can then make a new pull request with an implementation of a npm module for Node.js.

Has anyone put together any snippets or auto-completion plugins for Sublime Text, Atom or Visual Studio Code? I think that would be awesome!

During the dropdown process the dropdown displays for a very short period of time the scrollbar as per:

http://i.imgur.com/lLYjjfm.gifv

Chrome: Version 51.0.2704.103 m
Windows 10

This is my second post about the JS part of the framework. My other issue regarding the ability to launch modal windows programmatically is still open. Now I have come to learn that there is no documentation around how to invoke the "Upload" script on an element that is not loaded dynamically. I know I can use JQuery's on() function, but beyond that I am lost.

<button class="btn" onclick="$('#tabs').tabs('hideAll');">Hide Tabs</button>

Maybe I use it in the wrong way? Can you give me a more detailed example? My codes are below.

 <div class="docs">
    <div class="units-row">

        <div class="unit-20">
        <button class="btn" onclick="$('#tabs').tabs('hideAll');">Hide Tabs</button>
            <nav class="nav nav-pills side-nav" data-tools="tabs" data-equals="true" data-active="">
                <ul>
                    <li><a href="#tab1">Publications</a>
                    </li>
                    <li><a href="#tab2">Proposals</a>
                    </li>
                    <li><a href="#tab3">Talks&amp;Posters</a>
                    </li>
                    <li><a href="#tab4">Theses</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="unit-80">
            <div class="units-row" id="tab1">
                1
            </div>
            <div class="units-row" id="tab2">
                2
            </div>
            <div class="units-row" id="tab3">
                3
            </div>
            <div class="units-row" id="tab4">
                4
            </div>
        </div>
    </div>

</div>

Is there any way to fix the problem of the scrollbar disappearing and having the page jump to the right? Here are a couple examples from the KUBE support page:

Drodown: http://imperavi.com/kube/tools/js-dropdown/

Go to any dropdown on this page, open it, then hover on one of the options. The scrollbar disappears and the whole page shifts to the right.

Same with modals: http://imperavi.com/kube/tools/js-modal/

Open the model, the scrollbar disappears and the page jumps to the right.

Hi!

The modal component shifts the browser window on click. Looks like this is due to the removal of the scrollbar on modal popup.

Shaughn

In kube.css lines 1353 - 1362 has:

.navbar:after {
  content: "";
  display: table;
  clear: both;
}
.navbar:after {
  content: "";
  display: table;
  clear: both;
}

I'm guessing the first after should be before.

Hi,

In old kube 4 documentation, you have javascript components like tabs and fontsawesome examples...

Now in k5, there are no such components. Does it mean that they are removed?

Thanks,

Hi,
I have some questions about your framework.
Is there a reason that the grid has no unit-10 and unit-90 and why do have remove components like tabs?
And what I have found out is that there are no wrapper class is defined in the framework.
Was this a purpose from you or a mistake?

Greetings

At https://github.com/imperavi/kube
the README.md has "Documentation and examples"
followed by several URLs.

The URLs point back to subdirectories at http://imperavi.com and result in error messages "Page not found". The links are basically broken.

Is it hosted somewhere on CDN?

Why not add icons?
For example: http://glyphicons.com/

Hi! Why don't you customize de select element inside the form helper?

It will be nice to have horizontal form elements following the same style.

Thanks and congrats for the job ;-)

Guys, I recommend you to know the helpers css framework: http://helpers.araujo.cc

This use semantic html attributes, like this:

<p text="gray-80 normal center">
  <span text="bold underline big line-1 red">
    Some text
  </span> feel the
  <span text="italic blue semi-bold">
    Another some text
  </span>
  lorem ipsum
  <span text="pre white-80 line-1.5" layout="navy few-rounded inline-block">  lorem  </span>
  lorem ipsum
   <span text="bolder">ipsum</span>!
</p>

I hope it can be useful.

How to validate a form with kube.js?
I have added data-tools="validate" to my form tag, but nothing is happening.
Thank you

Hello, please fix style for .pagination li a:hover

use this, for example:

.pagination li a {
    border: 1px solid #fff;
}
.pagination li a:hover {
    border: 1px solid #0f0f0f;
}

or outline

Found Kube after extensively researching and comparing different CSS-frameworks (bootstrap, skeleton, pure). Now I was wondering to what extent Kube is compatible with normalize.css? Would it make sense to use both, is there overlap or would it be a bad idea to combine them?

Looks like your CSS doesn't understand file type of <input> form element. No formatting is applied to it. Or I'm doing something wrong?

<form method="post" action="#" enctype="multipart/form-data" class="forms forms-inline">
  <input name="file" type="file"/>
  <button class="btn btn-blue" type="submit">Upload</button>
  <div class="forms-desc">Maximum file size is 10mb</div>
</form>

I can't find the badge colors, or the full set of icons, for instance. Any help will be appreciated.

I am wondering if it is possible to add this framework to npm, or at least add a package.json file to github, so it can be easily installed via npm. I am trying to simplify my projects by loading both client and server dependencies from npm and kube is the only package I use that is not available on both. There are other css libraries doing this, for example https://www.npmjs.com/package/purecss. Thanks.

Hi,
how can display the with the latest release the messages notification ? it's seems messing in the new

Where can I find old documentation for the v5.0?

Hi,
in my application user is able to add/remove accordion elements and panels. Currently, accordion doesn't support panel dynamic creation – if new panel is added, accordion must be reinitialized.

$(elem).accordion();

Every time initialization is executed, toggle() event is binded to each panel title, without erasing previously binded toggle() events, which results in multiple toggle() event execution on panel title click.
I've solved that problem by unbinding previously binded events in build() method:

        build: function()
        {
            this.getTitles();
            this.getPanels();

            this.titles.unbind('click');
            this.titles.on('click', $.proxy(this.toggle, this));
        },

It would be great to have more lightweight method to refresh accordion, or just to fix multiple binding bug.

Hi,

I've rummaged through the documentation but couldn't find a way to target mobile screens with grids.

As it is, the columns automatically grow to 100% while I was looking at the option of say splitting a row into two on phones.

Let me know if there's a way to do this

The documentation should be one page (or have some fixed navigation somewhere to quickly navigation to other components). It is very annoying to go back to components and then choose another grey box, and do this to look at everything.

If a button has two words or more in it and the we start to condense the grid, the word is wrapping but the outline is not. See below.

• I'm interested on contributing and writting a copy of the framework in SaSS.

How do I implement the blur property correctly for the model function? I have tried both "true" and "50" as values for the data-blur attribute, but neither causes the content beneath the modal to be blurred.