dhg / skeleton Goto Github PK
View Code? Open in Web Editor NEWSkeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development
Home Page: http://www.getskeleton.com
License: MIT License
Skeleton: A Dead Simple, Responsive Boilerplate for Mobile-Friendly Development
Home Page: http://www.getskeleton.com
License: MIT License
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.
I understand the Tabs are a jQuery plugin, but the content within the tabs is not even accessible when JavaScript is not available.
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.
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.
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/
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.
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)
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.
For what reasons is this set to none? It prevents font-size adjusting when using browser level zooming.
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.
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
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
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.
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; }
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.
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 :)
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.
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.
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 */
}
It's possible to use 12 columns ?
I'm lost with table portrait for 12 columns.
Thanks
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.
Include some form of JS polyfill for browsers without support for media queries. Respond.js is one option.
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!
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
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ï.
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
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.
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>
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?
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, 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 :) .
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 :)
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!
Hope some of these suggestions are helpful.
font:inherit
will mean that useful defaults, like italic font style for i
and bold font-weight for b
, won't be stripped.line-height:inherit
for em
, strong,
and small
.font-weight:normal
on lines 65 and 67.font-weight:normal
on line 73.input
and button
elements. See css3 github buttons for the fixes (inc overflow:visible
property for IE).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.
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
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
Is there a plan for some programming-friendly formatting for the <code>
and <pre>
tags? Thanks
How to remove hash tags after url like #simple, #mobileFriendly, etc
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"?
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.
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...
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 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.
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.
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.
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.
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;
}
is there a specific reason you are using jQuery 1.5.1 ? The latest stable version is 1.6.2
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.