Gridless is an opinionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.
Gridless encourages and uses progressive enhancement through mobile first responsive web design.
Gridless is meant to be a starting point, which should be edited, tweaked and overwritten to suit each project's design requirements, rather than being blindly used as a black box of non-touchiness.
Some of the core principles of Gridless:
Gridless takes the boring parts of making websites and webapps out. It comes packed with everything you're tired of doing in every new project: CSS normalization, beautiful typography, a well-organized folder structure, IE bugfixes and other nice tricks.
Gridless uses mobile first responsive web design to adapt itself to the device's width. This means it'll work anywhere: old feature phones, newer smartphones, tablets, notebooks and bigger desktops. IE6/7/8 don't support media queries, so we use Respond.js to polyfill that.
Gridless is extremely simple and straightforward. It doesn't come with any predefined grid systems or non-semantic classes. Gridless is meant to be a starting point, which should be edited, tweaked and overwritten to suit each project's design requirements.
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
A well-organized folder structure
Gridless was tested in the following browsers: Mozilla Firefox 3.5+ 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.
README.md: the file you're reading right now
index.html: The HTML(5) page with the initial markup and some tricks to get you started quickly
demo.html: A file demonstrating Gridless' styles
robots.txt: Permissions for search crawlers
humans.txt: Give credit to people involved in the project
UNLICENSE.txt: The Unlicense, the license which Gridless is licensed under
*favicon.ico, apple-touch-icon.png, apple-touch-icon-precomposed.png, apple-touch-icon--precomposed.png**: The favicons (bookmark icons)
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
debug.css: The debugging CSS file to help you debug your markup
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
Some tips to improve Gridless and your productivity:
Use a command line tool like Juicer to help you ship code for production and achieve better performance.
Use HTML5 polyfills to bring future to all browsers.
Use a tool like resizeMyBrowser or ProtoFluid for testing your responsive designs on common browser widths.
Consider using CSS3 Please! and CSSPrefixer to help you write faster CSS3.
Use a script loader like yepnope.js or HeadJS to load your scripts faster and without blocking.
Write efficient CSS for better browser performance.
Use an HTML5 lint tool for better markup.
Use microdata for better search results and semantic markup.
If you'd like to use font-sizes outside the default modular scale (1.625), see http://drewish.com/tools/vertical-rhythm and http://modularscale.com.
If you'd like help people move off IE6 with an warning, add this HTML to your body:
<!--[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]-->Gridless is under active development. Its current version is 2.0.
Because Gridless is ...well, gridless. It doesn't come with any grid systems.
In my opinion, grid systems are a great idea, but not in the way they're being used today — with lots of presentational classes like span-x or grid_y in the markup. These classes only describe the presentation of the content, nothing else. Markup should be semantic; it is meant to describe the structure of the content.
Grid systems can be used, but they should be:
Used with CSS preprocessors like Sass/Compass, LESS, PCSS etc.
Edited (modify the classes and ids) to suit each project's semantics
Made from the start of each project
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!
Major components:
HTML5 shim: MIT license
Normalize.css: Public domain
Gridless and everything else:
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.
If you'd like to contribute to Gridless' development, start by forking the GitHub repo:
https://github.com/thatcoolguy/gridless-boilerplate
The best way to get your changes merged back on Gridless is as follows: