Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Gridless is an awesome HTML5 and CSS3 boilerplate for making responsive, cross-browser websites with beautiful typography
branch: master

This branch is even with suhas-p-bharadwaj:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
assets
.gitignore
README.md
UNLICENSE.txt
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-precomposed.png
apple-touch-icon.png
demo.html
favicon.ico
humans.txt
index.html
robots.txt

README.md

Gridless

Gridless is an HTML5 and CSS3, one web boilerplate to help you make progressively-enhanced, mobile first responsive websites/webapps that have beautiful typography with a vertical rhythm, sensible styles and are HTML5-ready and cross-browser compatible.

Gridless is simple and isn't littered with pre-defined non-semantic silly classes or pre-made grid systems.

Main features

  • Responsive (responds to the user's device screen width with the correct content and CSS)
  • Progressive enhancement, mobile first
  • Cross-browser compatible (even IE6 and 7)
  • CSS normalization instead of CSS reset
  • Beautiful typography with a vertical rhythm and heading sizes based on golden ratio
  • Print styles optimized for performance
  • Optimal caching
  • HTML5 and CSS3 ready
  • Safe CSS hacks instead of conditional classnames/stylesheets
  • Micro clearfix hack
  • A well-organized folder structure

Browser support

Gridless was tested in the following browsers: Mozilla Firefox 3.6+ Opera 11+ Google Chrome 11+ Safari 5+ Internet Explorer 6+

Although some of these browsers are very recent, Gridless should work in any modern browser without problems.

Folder structure

  • index.html: The HTML page with the initial markup
  • assets/ (folder): The folder that includes all the assets
    • css/ (folder): The folder that includes all the CSS files
      • main.css: The main CSS file with basic styles and media queries
    • fonts/ (empty folder): The folder where your webfonts reside
    • img/ (empty folder): The folder where your images reside
    • js/ (folder): The folder that includes all the JavaScript files
      • respond.min.js: Respond.js, which is a polyfill for media queries on older browsers

Make it better

<!--[if lt IE 7]>
<div style=' clear: both; height: 59px; padding:0 0 0 15px; position: relative;'>
    <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode"><img src="http://www.theie6countdown.com/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." /></a>
</div>
<![endif]-->

FAQ

Why the name Gridless?

Because Gridless is ...well, gridless. It doesn't have any grid systems. The problem with most other CSS frameworks is that they include grid systems with presentational classes and/or ids without any semantic. Classes and ids should be unique to each project and shouldn't be declared on pre-made documents. Still, if you don't agree with that, just include your favorite grid system (only the grid part, remove the reset, typography etc.) and it'll work like a charm!

License

Major components:

Everything else:

Thanks

Ethan Marcotte, Bryan Rieger, Luke Wroblewski, Jeremy Keith, Paul Irish, Nicolas Gallagher, Jonathan Neal, Scott Jehl, Eric Meyer, Oliver Reichenstein, Wilson Miner, Harry Roberts, Mathias Bynens, Kroc Camen, Chris Coyier, Richard Rutter, Remy Sharp, Kilian Valkhof and many others.

Contributing

If you'd like to contribute to Gridless, visit https://github.com/thatcoolguy/gridless-boilerplate and send a pull request or an issue. You can also fork the project or clone it. Do anything, it's open-source!

Something went wrong with that request. Please try again.