It seems like everything is on a grid, right?
Although a grid is a great way to begin a project, especially if you need to through around your design and elements as you design. However, there are those projects that you know exactly how you want your site to lay out. You don’t need 12-16 columns with 20px gutters, maybe you want 4 columns? Or, maybe you don’t even want your site on a grid!
Gridless is the perfect boilerplate.
Gridless is a solid HTML5 and CSS3 framework for making responsive, cross-browser websites with nice typography. Gridless takes a different approach to responsiveness:
Most responsive and adaptive HTML/CSS frameworks or boilerplates start with desktop styles and use media queries to serve mobile browsers the right layout. The problem is that most mobiles won’t respond to these media queries because they don’t support it. Also, using a polyfill like Respond.js will not give you any result because they are very limited devices and don’t even support JavaScript.
But Gridless uses a different approach: it uses media queries to serve a progressively-enhanced responsive layout, starting from mobile and building up to desktop sizes.
Here are the main features of Gridless:
- Responsive (responds to the user’s device screen width with the adequated CSS).
- Progressive enhancement and 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.
Learn more, grab the code, fork the Git, and try the demo on the Gridless website.
Speak your mind...