A simple 2 column responsive layout using Node.js and LESS
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
node_modules
public
routes
views
.gitignore
LICENCE.txt
README.md
app.js
package.json

README.md

Responsive Website using Node.js and LESS

Usage

From the root folder start the app: > node app.js Browse to http://localhost:3000

Tutorials

This web demo was created as a quick test to go over the very basics of responsive web design.

You can follow along and see the progression by going to this location: http://localhost:3000/html/

Based on the original building blocks of a responsive website, we start with a fixed width layout and convert it into a flexible layout, focuing on "mobile first".

Media queries are then added using a series of major and minor breakpoints.

The last step is to add support for basic responsive images.

You can see the fully finished site at either the final.html file or at the root of the project in the index.ejs template.

If you are interested you can also check out my presentation that goes along with this introduction on Slideshare at: http://www.slideshare.net/sspdf/responsive-websites

LESS

The examples use LESS to help with a few of the features, including dynamically calculating percentage based and em based sizes. The actual formula is from the book by Ethan Marcotte.

Notes

Please note that this sample is not fully finished, nor does it cover support for all browsers. It is only meant to be a starting point for those who want to get their feet wet with Responsive Design.

More

You can find me at http://seifi.org