ArtLung [Joe Crawford]

Web developer & user interface engineer
Tinkering with the web since 1996

email: joe@artlung.com · twitter: @artlung · (photo from instagram)
San Diego, California, USA

Responsive joecrawford.com with Twitter Bootstrap 2.0 2012 Feb 01

Continuing my series on upgrading joecrawford.com using Bootstrap. Bootstrap 2.0 was just released, and it has some default “responsive” features. What’s “responsive” about it? Stanford has a good definition.

Responsive web design
A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices.

Check it out in this animated GIF, or by visiting the site in a current browser and resizing the main window.

Basically by including bootstrap.min.css and bootstrap.min.responsive.css, and adding a few @media queries in my CSS, and a meta tag like: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> I get a responsive layout nearly for free from Bootstrap with their upgrade to version 2.0.

Joe Crawford blogged this at 2:35am in 2012 in February. The 1st was a Wednesday. You are reading this 6 years later. Make a public comment. There are no comments Tweet. Direct message. Send email. It has hashtags→ .

Leave a Reply

Comments Open; Trackbacks Open.