When Javascript is disabled, the HTML tooltip content in the Elements Demo page looks confusingly un-professional.

While I'd understand you saying that it's the developer's responsibility to deal with that in their own sites, the elements sampler page is often taken as a representation of how you would envision your framework being used.

As such, it'd probably be a good idea to add a few simple CSS style rules (at least a border) to pretty up the HTML tooltip when a lack of Javascript causes it to permanently appear below the button.

Chosen now has support for this option on initialize. I haven't found a way to change this option after the initial setup... I'd like to bind this option to the size atribute of select controls. Since your code is initializing all selects with the fancy class, I cannot initialize some controls by myself (controls are dinamically created from certain conditions), so the code to initialize that option must go in kickstart.js for the moment being.

With Chosen : when a single select box isn't a required field, you can set allow_single_deselect: true and Chosen will add a UI element for option deselection. This will only work if the first option has blank text. (http://harvesthq.github.com/chosen/)
Why this function don't work with HTML-KickStart ?

I have tabs with
< a href="#tab1">tab1< /a> and
< a href="#tab2">tab2< /a>
The url location is domain.com/sub/ (which isn't a directory, but rewritten url).
When I click on a tab, "/sub/" is lost and the location in address bar is changed to domain.com/#tab1 instead of domain.com/sub/#tab1 which is a problem if I refresh the page.

When I change
"history.pushState( null, null, window.location.search + $(this).attr('href') );"
to
"history.pushState( null, null, window.location.pathname + $(this).attr('href') );"
in kickstart.js, line 94 - the problem is solved.

I didn't test it to see if this would be a problem for some other things, but it solves it for me right now.

Just wanted you to know of this issue.

Thanks for this awesome tool 👍

Any chance we could get this wonderful CSS framework in a SASS/SCSS variety? 👍

Given that you've already got UL.checks to cover this uses:

• Lists of features
• Lists of tasks already performed
• Lists of certification tests performed on an order that has been shipped

It'd probably be a good idea to also have an "empty checkbox" counterpart in the same visual style to cover uses like these:

• Lists of tasks still to be completed (Especially useful in a @media print style)
• Lists of known bugs open to volunteers
• Suggested Google Summer of Code projects
• Developer roadmaps
• Lists of certification tests that will be performed if a customer makes an order

I found that if I input Chinese (I am not sure if it's just Chinese, or if it happens to all other languages except English) in the textarea on Safari on Mac, the page would reload it self.
Input English has no problem, Firefox on Mac has no problem, Safari on Windows has no problem, so far I found only Safari on Mac has this issue.

I´'m trying to apply some offset value to a button from left. Is it possible?
Thanks.

Greetings,
I really love the design but have a question for you: i have a tab in my document body and it works fine. If I move it to a small dialog box, it displays fine but the tabs don't work when you click on the flaps.

Thanks,
Everardo

Hi, I use this here and there for prototyping via jsfiddle and other one off tests. Would love to have it available via http://cdnjs.com

Can you add it? https://github.com/cdnjs/cdnjs

When using a combination of menu items with and without the "right" class added to them, they display correctly on IE and FF. On Google Chrome, however, the normal menu items will display on the left, and the ones with the "right" class will be on the right, but UNDER the initial height of the menu. The width of the menu bar, thus, doubles and places the "right" menu items lower.

Is there any fix?

Hi!

I have a serious problem with several of my corporate websites and personal projects: The lack of any versioning information in the Kickstarter production files.

They literally are called kickstarter.js, and there's nothing in the file to indicate a version, date, nothing.

If it is at all possible, please modify the build system for minifying the JS and CSS to append a date of the last commit, if nothing else. Currently, upgrading kickstart.js is an ABSOLUTE PAIN, becase we have NO IDEA what the upgrade pain will be, short of looking at git log js/kickstart.js and trying to gauge based on date/time, which is prone to much error.

Proper semantic version tagging seems like a remote possibility, but it would be extremely ideal!

-box-shadow in radio and checkbox inputs makes look them ugly
fixing: adding -box-shadow:none to input[type="checkbox"] and input[type="radio"]

I'm trying to modify dinamically the HTML which is shown in a tooltip but apparently this is not possible. Just removing the class "tooltip-content" from the div makes the JS works properly (but, of course, lose the tooltip effect).

For modifing the HTML I have tried with the functions html() and append() of JQuery.

One of the biggest design traits of my more recent creations is that I like them to be able to reflow all the way down to the width of the Opera Mini Simulator (Somewhere between 200px and 220px wide, if I remember correctly).

However, the CSS used by the HTML KickStart grid system doesn't provide any significant help for fluid or responsive layouts (beyond the barebones relatively-sized columns necessary to classify as "fluid"). I just have to hack on my own fixes after the fact.

Things like:

• Using @media queries to redefine col_# classes as the viewport narrows (eg. making col_3 mean width: 100% if the screen is 600px or narrower) for responsive design.
• Slapping some min-width rules on the col_# classes so they wrap in a less than ideal but still usable manner.
• Slapping some max-width rules on the col_# classes so wide browser windows can have narrow-column typography for easy reading without forcing users to waste space.

Having some officially supported approaches to this sort of thing which everyone can use and collaboratively hammer the bugs out of would really help to make HTML KickStart more attractive.

When using Firefox 11.0 on Linux (Fedora 16), the menu buttons in a HTML Kickstart menu bar do not show up until you mouse over. Occasionally the bottom part of menu buttons is visible, but when scrolling the page these disappear again. A screenshot can be found at http://minus.com/mkEUEaZnn/1f

I have the same issue when using the menu bar for a project of my own. In Chromium and Opera, the menu bar displays fine.

When i place on hover for more than 3 second it remains the same even on mouse out.

and completely remains in the page

Hi~
Adding tags for repo could specify points in history and mark release points.
It's helpful for user to know the version and status of repository, and would enable wider distribution of the library, for example on CDNJS
Would you please consider on using tags?

Thanks for your great work!!
Piicksarn

Given how much CSS3 is used elsewhere, I found it very disappointing that the zebra-striping support depends on Javascript.

A much better solution would be to use a selector like tr:nth-child(even) to stripe the table using pure CSS on modern browsers and then, only if an older browser is detected, to apply the alt classes via Javascript.

Doing so might also save a few CPU cycles on page load.

With Javascript disabled, HTML tooltip support is obviously non-functional. However, the Elements Demo page gives no indication as to what will happen if both an HTML and traditional tooltip are supplied.

Will it cause things to break horribly or will HTML KickStart remove the textual tooltip when it detects an HTML one, allowing the textual tooltip to be used as an equivalent to <noscript> and <noframes>. (And, if it does break, that should probably be considered a bug too)

I've got ready access to server-side libraries which attempt to generate pleasing plaintext from input HTML, so it's not as if it's an onerous thing to do even if I'm working with user-provided data.

When using

<ul class="slideshow">
<li><img src="http://lorempixel.com/400/400/" height="400" width="400"/></li>
<li><img src="http://lorempixel.com/400/400/" height="400" width="400"/></li>
<li><img src="http://lorempixel.com/400/400/" height="400" width="400"/></li>
<li><h3>Slide Anything</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></li>
</ul>

It does not show the images as 400x400, instead by 400 in height and then expands the width to fill the page.

Can be closed found solution here -> #39

In the kickstart.js the code adds a div with class="caption" around every image that has class="caption". But then it injects all the CSS classes of the image to the parent div plus caption. Well, the image definitely has caption as a class already, or it wouldn't match the selector $('img.caption'), so the div ends up with caption caption as the css class. I think it would be better to add img-wrap to the parent div, this would allow for left and right aligning of images with captions.

/*---------------------------------
    Image Caption
-----------------------------------*/
$('img.caption').each(function(){
    $(this).wrap('<div class="caption">');
    $(this).parents('div.caption')
        .attr('class', 'img-wrap '+$(this).attr('class'));  // definitely will get caption from $(this)
    if($(this).attr('title')){ 
        $(this).parents('div.caption')
        .append('<span>'+$(this).attr('title')+'</span>');
    } 
});

Is possible to alter css to scss for better managing all system?
This framework looks very well (like BS, but easier to understand and not so robust), but is written in plain text only and it means harder way with override and manage.

In kickstart.js on Line 190 and 288 it uses an old version (1.2.18) of TinySort.

New Version: 2.0.97
All Releases: https://github.com/Sjeiti/TinySort/releases
New Table-Sort example: http://tinysort.sjeiti.com/#sorting-tables

With Javascript disabled, the "Item 3" menus in the Elements Demo appear as menu items (and icon-free ones at that) rather than as functional submenus.

Given that it's been possible to do this with :hover and no Javascript for at least half a decade now, I consider this a deal-breaker. (Both in sites I visit as a user and, often, in frameworks I evaluate as a developer)

(These days, every site I write is designed on the assumption that early adopters will be using NoScript to save CPU cycles and must not come away with a bad first impression.)

Before getting into the issue, let me explain the scenario. I have a form that needs to be populated before the submit button can be enabled. Therefore, I set the submit button to disabled and plan on enabling it after proper population of the form. However, the submit button appears different from a regular disabled button and the hover and click still work while it is disabled.

When an image is shown with fancybox, there's a fade effect, and then a "slip effect" from left to right and up to down wich is unwanted.
I thought it was only on my website, with a css problem, but i can see the same bug on your website.
I can reproduce the bug on firefox, ie, and chrome.

See the bug here: www.okazo.eu
and here: http://www.99lime.com/elements/ (image section)

Solucion: añadir la linea

  input[type="password"]:focus,

luego de la línea 120 en kickstart-forms.css

There'a a problem in the base icon set.
<span class="icon medium" data-icon="o"></span> shows the key icon. <span class="icon medium" data-icon="O"></span> also shows the key icon but, originally the key icon's syntax should have been <span class="icon medium" data-icon="0"></span>. I think that the icon set has a bug. I use the latest version of Google Chrome on a Win. XP SP3 PC.

Hi there!

Houston, We've Got a Problem (c)

jQuery already deprecated .live function. Now they use .on.
Unfortunately, latest version of HTMLKickStart still uses .live.

Changing .live to .on doesn't work at all.

Please, help!

Thank you!

Add this code to work
var w = $(document).width();
if (w > 1024) {
$(".show-desktop").show();
$(".hide-desktop").hide();
} else if (w > 768 && w < 1024) {
$(".show-tablet").show();
$(".hide-tablet").hide();
} else if (w < 768) {
$(".show-phone").show();
$(".hide-phone").hide();
}

Does HTML-KickStart support LESS? If so, is there any documentation provided for it?

Thanks

As implemented, the icons currently fail two requirements for truly professional websites:

1. They do not provide an accessible fallback for buttons which contain only an icon like the ones in the "Button Bar" portion of the Elements Demo.
2. They do not appear at all when a user is running with Javascript disabled, as is the case with anyone using NoScript (or equivalent) to save on CPU load, improve browser responsiveness, or limit the potential for 0-day exploits.

My suggested solution is to use an icon font like Ligature Symbols which uses the ligatures support in the font engine to convert meaningful words like "back" into icons using only @font-face.

<!-- Your approach -->
<a href="#"><span class="icon" data-icon="T"></span></a>

<!-- The Ligature Symbols Approach -->
<a href="#" class="lsf-icon">trash</a>

Add right align class for menu items

I'm having problems with the image gallery.

The pop-up box in the div gallery is not show in the view windows when the div.gallery is longer than the view window. The box is show near the end of the div and is moved even lower every time the next-arrow is clicked.

Hey :)
You're doing some awesome work here. I only found one problem so far. I can't add IMG.style1 to IMG.full-width. If I do so the span around the image gets width and height 0 so the image disapears. Is that a bug or do I anything wrong here?

In Google Chrome the implemented scrollTo lib doesn't work, if you use jQuery 1.8.2.

I've tested it with the newest version of scrollTo and then, everything works as expected. I'll open a pull request for this.

The glow effect in the form input looks exactly twitter bootstrap's one and in fact it looks like a copy from there, it distracts , please they must be replaced ASAP , well may be with HTML-KickStart brand color :-)

To use

<img class="align-left style1" src="..." alt="" width="180" height="150" />

propertly just change two lines in kickstart.css:

#388    img.align-left{float:left;margin:0 10px 5px 0;}
#389    img.align-right{float:right;margin:0 0 5px 10px;}

to

#388    .img-wrap.align-left, img.align-left{float:left;margin:0 10px 5px 0;}
#389    .img-wrap.align-right, img.align-right{float:right;margin:0 0 5px 10px;}

I was having problem loading the slideshow and realized the problem was in kickstart.js. It doesn't always happen but this is a good practice in case we want to use jQuery with some other Javascript framework such as Prototype.

Line 6:

Could be changed to this instead:

Line 6:

For your consideration. Love your work!

Andrews (a.k.a kongnir)

Hi,

I have this structure:
(i don't know why the tab code isn't working on github)

• Pessoas
• Slideshow
• Tab 3

Pessoas

...

and my tabs work or doesn't work according to nothing,just a refresh on chrome. The same behaviour with the slideshow. Does anyone know what is the problem?

Thanks

In the interest of graceful degradation, the image styles demo'd in the Elements Demo should still apply when a user is using NoScript but they currently don't.

I know of no reason it's not possible to do it purely using CSS (one's a simple border, one's rounded corners, and one's a border with rounded corners and an inset box shadow) with Javascript to compensate for flaws in older browsers.

Here's an example providing a superset of IMG.style2 and a rough analogue of IMG.style3 which takes that approach and looks perfect in my Firefox with Javascript disabled:

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

Note: It's from 2010. When I first encountered it, the flaws it mentions in Firefox and Chrome DID apply. Now, both of them seem to render it perfectly even with Javascript disabled, which means the JS would only be necessary to support older browsers.

(You might also want to add their superset of IMG.style2 as IMG.style4 since it looks quite nice)

I wanted to add the kickstart slideshow to a github page http://gradha.github.com/OpenIrekia-iOS/ but the results are really weird. Sometimes the slideshow shows the images as 2px width, sometimes their correct width. The problem is the width gets set at random: reloading the page once or twice tends to fix this. But it is really annoying, and reloading again may revert back to the squished version. Tried the page with firefox and chrome and it seems to work fine on those browsers.

I'm attaching a screen capture of the same local page (see location bar) at the same time open in two different tabs with the inspector showing the size, one wrong, the other right.

Is this a known bug? Does it have any solution? I've also seen this on an iOS 6 device (again, with reloading sometimes fixing this).

Kickstart.js will die in a ball of fire if there is an element in the document with a hashtag that contains a slash (/) in it. This basically rules out happy integration with projects such as jQuery Address.

Case code that caused it to blow:

    <a href="#multitables/3">Multiplication x4</a>

Demo: http://www.phpu.cc/megadiction#/vocab/5

in Chrome console:
Uncaught TypeError: Object function (){b.open.apply(this,arguments)} has no method 'init'

kickstart.js:273

On my system, the "Select.fancy multiple" example on the Elements Demo page is so cramped that the "Select Some Options" text is chopped off.

I've confirmed this on these two browsers:

• Chromium 20.0.1132.47 Ubuntu 12.04 (144678)
• Firefox Aurora 19.0a2 (2012-11-27)

Here's a screenshot of the problem:

I've tracked it down to the fact that you used these two CSS rules together but I'm not sure if removing them will break anything else:

.chzn-container-multi .chzn-choices .search-field input {
    height: 15px;
    padding: 5px;
}

Also, I generally consider it bad practice to size something like this using any units not relative to the font size because it tends to cause just this sort of problem to pop up whenever a user isn't using the same font settings as you are.

incorrect positioning of buttons fantsyboks in all popular browsers.

(resolution 1366x768)

• Test
• Another
• Test

It would be nice if this would round the appropriate edge,