https://github.com/joeshub/responsive-web-node-less

A simple 2 column responsive layout using Node.js and LESS
https://github.com/joeshub/responsive-web-node-less

Last synced: about 2 months ago
JSON representation

A simple 2 column responsive layout using Node.js and LESS

• Host: GitHub
• URL: https://github.com/joeshub/responsive-web-node-less
• Owner: joeshub
• License: other
• Created: 2012-09-05T21:34:01.000Z (over 12 years ago)
• Default Branch: master
• Last Pushed: 2017-04-22T20:27:58.000Z (over 7 years ago)
• Last Synced: 2024-04-15T10:44:45.509Z (9 months ago)
• Language: JavaScript
• Size: 1.96 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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