First of all... Skeleton kicks ass!

I've added:

alpha.omega { margin-left: 0; margin-right: 0; } to the @media only screen and (min-width: 768px) and (max-width: 959px) {}

because i didn't like that .omega overrides the margins of .alpha

Maybe i fixed a very tiny bug? Tell me :)

went to use this, excuse my directness, but what is this mess?

<label for="regularCheckbox">
  <input type="checkbox" id="regularCheckbox" value="checkbox 1">
  <span>Regular Checkbox</span>
</label>

i know html5 has a wider allowed nesting interpretation, for eg anchor around block level elements ... but this seems too ut there for me.

have you checked out the html4 spec? http://www.cs.tut.fi/~jkorpela/html/nesting.html

How to remove hash tags after url like #simple, #mobileFriendly, etc

Is there a plan for some programming-friendly formatting for the <code> and <pre> tags? Thanks

I saw in the support section of the website that you will not try to implement a JavaScript fallback. I think just bundling with either of these already proven implementations would be a good idea.

• Respond - My personal favorite and what seems to be the most polished.
• css3-mediaqueries-js - A promising alternative.

I don't know if you have a reason not to, but I think it would be good to provide a useful script for a fallback if the user requires it. It saves them hunting around for a polyfill and potentially using one that does not work correctly.

Maybe it's a mistype or on purpose but,

Line 79 the src is missing the http: and seems to be causing the page to take forever to load since it's calling the file from the localhost and not actually ajax.googleapis.com.

Hi,
I was just introduced to skeleton through Spree. I really like it.
I was very confused that on the site you give a 12 column example though there are 16 columns in your grid.
The only mention to 16 columns is if you view the source for the example and there is this

<!-- Give column value in word form (one, two..., twelve) -->
<div class="sixteen columns">
    <h1>Full Width Column</h1>
</div>

which seems super vague to me and almost misleading.
I looked at the source to see that indeed there are 16 columns. I don't know if a less experienced dev would do the same.
I will be using this project often. Thanks for the time you put into it!
aaron

Need a class to have a full 16 column width within the .container so sections can be created at full-width inside the grid framework.

Hi, Iwould like to suggest an improvement in the branching model.
The best would be to follow these advices: http://nvie.com/posts/a-successful-git-branching-model/

But basically, what would be great is to create an unstable "develop" branch, while keeping the master branch as the stable one.
This would allow, by creating a version tag each time a merge is done to master, to make change logs easier to follow.

I hope it makes sense :) .

Hi, I'm building a site that, using ajax and web sockets, loads content when links are clicked without refreshing the page itself. Some pages are small and fit into the screen without the need of a scrollbar to the right, and some are long so they get one.

So when the scrollbar appears or disappears the entire page contents jump to the left or to the right by the width of the bar. You can watch this happen on getskeleton.com by deleting divs starting with "what is it" going down, until the scrollbar hides itself.

I wish I could offer a solution to this almost insignificant glitch, but I'm not a designer and don't know the new css all that well.

In any case thank you for a great framework.

I really like Skeleton and it may sound trite, but the styling of the buttons really influenced me to take it serious (it just looks professional). However, I noticed that when I have a button on a dark background, it looks atrocious. I think this is because the button's gradient background is a transparent overlay rather than solid colors so it lets the background of the containing div bleed through.

I'm currently overriding base.css so that it displays consistently irrespective of the div behind the button - it'd be great if in future releases, I didn't have to override that aspect of the css. Here's what I'm using (generated w/ http://www.colorzilla.com/gradient-editor/):

a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #f3f4f3; /* Old browsers /
background: -moz-linear-gradient(top, #f3f4f3 0%, #c3c3c3 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3f4f3), color-stop(100%,#c3c3c3)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #f3f4f3 0%,#c3c3c3 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #f3f4f3 0%,#c3c3c3 100%); / Opera11.10+ /
background: -ms-linear-gradient(top, #f3f4f3 0%,#c3c3c3 100%); / IE10+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f4f3', endColorstr='#c3c3c3',GradientType=0 ); / IE6-9 /
background: linear-gradient(top, #f3f4f3 0%,#c3c3c3 100%); / W3C */
}

a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
background: #f4f5f4; /* Old browsers /
background: -moz-linear-gradient(top, #f4f5f4 0%, #ababab 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f5f4), color-stop(100%,#ababab)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #f4f5f4 0%,#ababab 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #f4f5f4 0%,#ababab 100%); / Opera11.10+ /
background: -ms-linear-gradient(top, #f4f5f4 0%,#ababab 100%); / IE10+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f5f4', endColorstr='#ababab',GradientType=0 ); / IE6-9 /
background: linear-gradient(top, #f4f5f4 0%,#ababab 100%); / W3C */
}

a.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
background: #f5f6f5; /* Old browsers /
background: -moz-linear-gradient(top, #f5f6f5 0%, #989998 100%); / FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f5), color-stop(100%,#989998)); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, #f5f6f5 0%,#989998 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, #f5f6f5 0%,#989998 100%); / Opera11.10+ /
background: -ms-linear-gradient(top, #f5f6f5 0%,#989998 100%); / IE10+ /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f5', endColorstr='#989998',GradientType=0 ); / IE6-9 /
background: linear-gradient(top, #f5f6f5 0%,#989998 100%); / W3C */
}

When you zoom into a page that is marked up with skeleton, the text gets smaller relative to its container, while the opposite happens when you zoom out (text gets larger relative to its container). On a "normal" web page when you zoom in, everything gets bigger together (proportions of text to container are maintained). Any suggestions on how to make a skeleton page zoom "normally"?

Big image are not resized when you change the browser size or try to access through iPhone or iPad.
I think, you should add a CSS property to resize big image.

It could be something like that :
.container img { max-width:100%}

Or for each Media query :
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container img { max-width:767px;}
}
.etc...

I'm referencing issue #43

While this certainly does fix the issue for tablet, wouldn't a better fix be to simply remove the margin-xyz: 10px from alpha and omega for the tablet media query?

In other words, now its:

.column.alpha, .columns.alpha     { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega     { margin-right: 0; margin-left: 10px; }
.alpha.omega     { margin-left: 0; margin-right: 0; }

Wouldn't this be better and more congruent with the rest of Skeleton?

.column.alpha, .columns.alpha     { margin-left: 0; }
.column.omega, .columns.omega     { margin-right: 0; }

Hello,

I'm attempting to build my web application with this excellent (!) skeleton, but I miss something I can not do by myself.

The form inputs are all nice and look alike, but the file type input stays 'raw' with the default look.

Could you please enhance the CSS to make it look like the other form inputs and buttons ?

Thank you

LeMogwaï.

Love the button styling!

Would be interested in a button that has more oomph to it as well (like, say a blue, or darker grey button) that matches that styling.

The Apple touch icons are being properly delivered on iPhone 4 retina and iPad, but for some reason the standard 57x57 for iPhone 3 isn't working. Instead, on iPhone 3, a scaled version of the 114x114 for the iPhone 4 is getting served. Need to figure out why and fix it :)

Anyone else seeing major issues in IE8?

Skeleton Demo (included in download) in IE8
http://contempographicdesign.com/wp-content/uploads/2012/03/skeleton-demo-ie8.png

My Theme IE8
http://contempographicdesign.com/wp-content/uploads/2012/03/re3-ie8.png

Same site in Chrome:
http://contempographicdesign.com/wp-content/uploads/2012/03/re3-chrome.png

It works great in IE9+, Chrome, Firefox, Safari but fails miserably in IE8 below. I've tried both the HTML5 Shiv and IE9.js

I understand the Tabs are a jQuery plugin, but the content within the tabs is not even accessible when JavaScript is not available.

Could you make a GH Pages branch? This would allow the CSS files to be added using GitHub as a "CDN" for quickly wireframing sites, eg:
http://skeleton.github.com/

When I place an image on the page, there is always a random few pixels of space below it that I can't seem to get rid of. The best solution I've come up with is setting the line height of the containing element to 0. For example:
<div style="line-height:0;"><img src="#" title="..." /></div>

This isn't a very good solution in my opinion (as it requires wrapping every single image used on what will be a WordPress site), but I'm struggling to find a better one at the moment. If I find a solution that doesn't require a hack, I'll submit I fix.

If you place together a normal button and an anchor with class="button", you'll notice that they have different height. And it looks really ugly.

Using the index.html in the download package, I created a quick two-third, one-third column page. I want the two columns to be side-by-side. With the following code below, it works great. However, if I am adding a very long text anywhere in the first two-third column, the second column (one-third) is being pushed down on its own line and the two columns aren't side-by-side anymore.

Is that expected or I am missing something? I would expect the 2/3 and 1/3 column to stay the same and just the text to wrap.

Thanks!

    <div class="container">
        <div class="two-third column">
            <h3>Title</h3>

            <ul class="square">
                <li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets</li>
                <li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
                <li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
            </ul>
        </div>
        <div class="one-third column">
            <h3>My Title</h3>
            <p>The easiest way to really get started with Skeleton is to check out the full docs and info at <a href="http://www.getskeleton.com">www.getskeleton.com.</a>. Skeleton is also open-source and has a <a href="https://github.com/dhgamache/skeleton">project on git</a>, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at <a href="mailto:[email protected]">[email protected]</a>.</p>
        </div>
    </div>

Great boiler plate, been using it for a personal project and needed some disabled submit buttons, may be useful to include some in your CSS. A really basic style I've used:

button[disabled] {
    background:#ccc;
    border-color: #ccc;
    text-shadow:none;
}

Hi,
first I would like to say thanks and congratulations for the great job with skeleton.

I am not sure if this is pertinent but if you declare this

<input name='firstname'>

It seems skeleton renders it differently than

<input name='firstname' type='text'>

I am not sure but as far as I know in html5, the type attribute defaults to text when ommited, so perhaps it should render as such?

Thanks.

There is a mysterious and weird gap at the base of the .container that persists almost no matter what. Need to resolve why that is there and crush it!

The tabs.js code can use a less memory intensive jQuery function, .delegate, to accomplish the same functionality in fewer LOC and with a smaller memory footprint. Instead of iterating over each ul.tabs and creating a new anonymous function each time, you could bind as follows:

$('body').delegate('ul.tabs > li > a', function(e) {
    //Get Location of tab's content
    var contentLocation = $(this).attr('href');

    //Let go if not a hashed one
    if(contentLocation.charAt(0)=="#") {

        e.preventDefault();

        //Make Tab Active
        $(this).parent().siblings().children('a').removeClass('active');
        $(this).addClass('active');

        //Show Tab Content & add active class
        $(contentLocation).show().addClass('active').siblings().hide().removeClass('active');

    }
});

The above is an example of the approach, and not actually tested. I can create a tested pull request if you'd prefer. An additional advantage of this approach is that it supports dynamic tabs; developers can create tabs that will still have the same functionality without rebinding events, or add new tabs to existing tab bars. The number of cases where that will be useful is limited, hence why the primary reason to modify the tabs is the reduced memory footprint/advantage in speed.

Hi, during my first try with Skeleton on Rails3, I'm facing some difficulty with Tabs which don't get "ACTIVE" on clicking them. My "haml on rails" generate the following html code http://pastie.org/2244879 do you advise some missing ?

Thanks in advance
Luca G. Soave

On a 1024 wide image that is a background for a 16 column div, I can't seem to get rid of the gutters so that the image stretches to the edges of the grid.

I tried adding alpha and omega to the class, which eliminated the left gutter but not the right. I also tried negative margins and padding, which did nothing.

Any tips?

http://qa.ncgov-2012.nc.gov/index.aspx

many thanks, Lois

Does skeleton need a print stylesheet? When printing with chrome, content runs off the side of the page.

Including the following fixes the problem:

@media print {
  .container {width: 100%}
  .container .sixteen.columns {width: 100%}
}

but that's obviously a crude hack for my special case.

Include some form of JS polyfill for browsers without support for media queries. Respond.js is one option.

I think that as a boilerplate/framework, Skeleton should style tables as well, possibly the same way blueprint does it, with different colors for each rows.

is there a specific reason you are using jQuery 1.5.1 ? The latest stable version is 1.6.2

Hi,

as author of https://github.com/helios-technologies/skeleton-rails Rails gem, i'm very interested: do you plan to future development and improvement of Skeleton CSS?
Looks like you have 10 pull requests, and few of them looks very good.

Thanks.

It would be great to have push and pull classes a la http://960.gs/, so that you have more freedom to place important content closer to the start of the page. This would be particularly nice for small screens so you can control what comes first.

At least with the Leaflet.js map library, the img { max-width: 100% } rule makes images not load at all in Firefox. This might affect other map libraries (YMaps, Google Maps, etc) but I haven't tested those.

Need to test the micro-clearfix across browsers. If it works, it will be a more lightweight solution that I would love to use! (http://nicolasgallagher.com/micro-clearfix-hack/)

Originally suggested by Necolas (https://github.com/necolas)

Hello!

First, thanks for Skeleton. It looks real nice and promising.

From the documentation:

<ul class="tabs">
  <li><a class="active" href="#simple">Simple</a></li>
</ul>
<ul class="tabs-content">
  <li class="active" id="simpleTab">…</li>
</ul>

It breaks standard fragment links and seems like unnecessary cruft.

<ul class="tabs">
  <li><a class="active" href="#simple">Simple</a></li>
</ul>
<ul class="tabs-content">
  <li class="active" id="simple">…</li>
</ul>

Works fine.

Hi, I've just found this nice tool for testing responsive design:
http://mattkersley.com/responsive/

And could notice he uses 240 for small phones....I'm not sure how often it is used but do you think it might be interesting to add it to skeleton.css?

Cheers

I might just be over-thinking this but…anyone know of an easy way to add padding to the overall container without having to redo all the math? For instance I'm working on a layout that needs a bg color on the main container with 20px of padding.

Any insight is appreciated.

I am trying to add a "sticky footer" to my web site based on skeleton but I can't get it to work correctly. I am doing this based on the instruction on this website: http://www.cssstickyfooter.com/using-sticky-footer-code.html. In Chrome I get an extra pixel or two in the height of the page which result in a vertical scrollbar and in IE the main container becomes left-aligned.

Any idea how I should implement this properly based on Skeleton? Thank you Dave for the great work!

It's possible to use 12 columns ?

I'm lost with table portrait for 12 columns.

Thanks

An unconfirmed issue was reported that the standard Skeleton font stack can render poorly in a Windows environment without Helvetica. Need to check and confirm, then make needed CSS alterations.

When programmatically adding elements to a page, it's a little frustrating to have to make the distinction between .column and .columns. Would it be possible to make .one.column give the same layout same as .one.columns?

I would really like to see CSS LESS support(meaning almost a full rewrite =( ) for this project to make it easily modifyable/minifyable/etc.

Are there any plans for this?

For what reasons is this set to none? It prevents font-size adjusting when using browser level zooming.

Hope some of these suggestions are helpful.

• Removing font:inherit will mean that useful defaults, like italic font style for i and bold font-weight for b, won't be stripped.
• HelveticaNeue font stack can look nasty on Windows.
• No need for line-height:inherit for em, strong, and small.
• Duplication of font-weight:normal on lines 65 and 67.
• No need for font-weight:normal on line 73.
• Buttons could do with styles to fix common browser bugs related to use of input and button elements. See css3 github buttons for the fixes (inc overflow:visible property for IE).
• Consider switching clearfix code (also in layout.css) to micro clearfix

I really like what you have done here. But I ran into a couple of minor issues when dealing with forms.

First, you have no styles defined for input elements of the button, submit, or reset type. I just added the appropriate [] selectors to the base.css file.

a.button, 
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
    etc.
}

Along the same lines, you do not have a style setup for legend tags. The legend tag is supposed to be used whenever you use a fieldset. I noticed on your site you opted for a label instead. I just added legend to the label's definition and it was all fixed.