Responsive Design Boilerplates

Ethan Marcotte coined the term “Responsive Design” to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size.

Fluid grids is one of the three technical ingredients (Fluid grids, flexible images, and media queries) to deliver elegant visual experiences. A fluid grid layout can be created through the smart use of DIV layers, percentages and math.

Boilerplates combines these three ingredients (flexible grid, Responsive images and Media queries) into one neat package: a flexible grid enhanced with scripts. There are several interesting Boilerplates out there, some are right for some situations, and others are right for others.

  1. Skeleton is a small collection of CSS & JS files that can help you develop sites that look beautiful at any screen size. Skeleton uses 960 grid as its base.
  2. 320 and up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.
  3. Gridless is a solid HTML5 and CSS3 framework for making responsive, cross-browser websites with nice typography. Gridless takes a different approach to responsiveness: it uses media queries to serve a progressively-enhanced responsive layout, starting from mobile and building up to desktop sizes.
  4. The Goldilocks Approach offers a slightly different practice from the most other responsive design frameworks which is: “targeting every resolution/device rather than only the popular ones”. You can view a working demo here.
Issue - Mar-19-2012

Comments

Leave A Comment:

Name:

Email:

Website: