Skip to content

Latest commit

 

History

History
225 lines (119 loc) · 8.35 KB

README.md

File metadata and controls

225 lines (119 loc) · 8.35 KB
Raw

Gridless -- A boilerplate for responsive, cross-browser websites

DESCRIPTION

Gridless is a HTML5 and CSS3, one web boilerplate for responsive, cross-browser websites.

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.

PHILOSOPHY

Some of the core principles of Gridless:

RESPONSIVE

Gridless uses responsive web design to serve each user a design that responds to the size of their browser window. This means Gridless will work anywhere: old feature phones, smartphones, laptops, netbooks, desktops etc.

Gridless encourages and uses progressive enhancement. Its media queries are mobile first, which means they start from mobile and go building up to desktop sizes.

SIMPLE

Gridless is extremely simple and straightforward.

It isn't littered with with non-semantic classes or pre-made grid systems ( hence the name 'Gridless').

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.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.

FILES

  • README.md: the file you're reading right now

  • index.html: The HTML(5) page with the initial markup

  • 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

      • respond.min.js: Respond.js, which is a polyfill for media queries on older browsers

PROJECT

CSS

  • main.css:

    • CSS normalization
    • Beautiful typography
    • Vertical rhythm (baseline grid)
    • Placeholder media queries for responsive web design
    • Safe CSS hacks to target IE6 and IE7

  • debug.css:

    • Styles to debug your markup

MAKE IT BETTER

Some tips to improve Gridless and your productivity:

<!--[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 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!

LICENSE

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' 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:

  1. Clone your fork
  2. Hack away
  3. If you are adding significant new functionality, document it in the README
  4. Do not change the version number, I will do that on my end
  5. Push the repo up to GitHub
  6. Send a pull request to thatcoolguy/gridless-boilerplate