frankpf / gridless-boilerplate Goto Github PK

h3 {
font-size: 1.625em; /* 26px */
line-height: 1em;
margin: 0 0 1em;
}

Just wondering if there isn't something wrong with the calculation of an h3's line height within gridless. Seems awfully compact.

See: http://cl.ly/J9Nb

Input elements in IE8 differ in size from inputs in Chrome 12. It seems line-height/padding is off causing IE8 inputs to be shorter.

• Use a script loader like yepnope.js, LABJS, HeadJS etc.?
• Finish debug.css
• Include non-semantic helper classes? If yes, in main.css or in a different file?
• Custom boilerplate builder?

EDIT:
I decided not to add a build script nor server-side configs because that's beyond Gridless' purpose. But I'll recommend using juicer in the Make it better section.
Modernizr also will not be included in the main repo.

EDIT2: well, I think 2.0 won't make it now. The only new feature I could think of was debug.css, which is not enough for a new major version.

The element is no longer part of the HTML5 spec and can be removed from main.css.

http://html5.org/tools/web-apps-tracker?from=3858&to=3859

You could remove the keywords meta, it's essentially useless these days.

IE conditional comment around the HTML5 shim will block downloads in IE6-8 - http://www.phpied.com/conditional-comments-block-downloads/

having a default margin on 'img' makes the inline image element example not display correctly

I don't think the demo page is working. It looks like the styles are missing for the page.

I see that gridless is an extended version of normalize.css with prettier defaults and extra boilerplate simplifications. It would be nice to read exactly what those enhancements on top of normalize.css are.

Is there supposed to be an underscore prefixing the width style on line #246

img, object, embed, video {
    max-width: 100%; /* Consider this first: unstoppablerobotninja.com/entry/fluid-images/ */
    _width: 100%; /* If the image/video is smaller than the container, change 100% to an absolute value */
}

After clicking on the first, second and third link, every link below "Features" are getting hide.

I'm using Chrome 12.0.742.91 and Mac OS X 10.6.7

Might be useful to include some notes alongside where you've specified font-sizes, line-heights and margins to explain how you arrived at those figures. You've provided notes and links to a lot of other resources in main.css but not for font-sizing.

• There are 2 body rulesets. Should be combined.
• Remove tt element. It's obsolete in HTML5 "and must not be used by authors".
• You've removed the border on fieldset, and overridden the default margins, but the default padding is still there. You might want to remove it.
• Missing legend margin fix for IE6/7
• Repetition of font and color styles used on body and form elements. Consider merging into one ruleset.
• Missing IE6/7 overflow:visible fix for input and button
• Missing Firefox ::-moz-inner-focus fix for input and button
• The blockquote > p rulset doesn't seem to be needed
• mark and ins have different semantics. Consider giving them different visual appearances
• th doesn't need to have font-weight:bold specified. As far as I know, this is the default in all browsers
• What is background:none used for on lines 248 and 251?

Hi thatcoolguy,

wanted to use your project, but couldn't find that "Well documented" documentation.
SOrry about that, don't want to sound too pissed, but is the link (http://gridless.io/docs/) in the READMET correct?

Cheers,
Jaki

PS. and http://unlicense.org/ seems to be down as well...

• The README still has reset.css and Eric Meyer in the License/Thanks section, but your project doesn't use reset.css anymore.
• Described folder structure is incorrect: _/ vs assets/

If you use a high value for line-height then the placeholder ist going to be misplaced in chrome eg. use low line-height and add padding. good work btw