AppLayout: A simple starting layout for a web application

OK, first post. I've been delaying this for awhile, but it's a new year and I couldn't wait. I am starting this blog to contribute to the online web development community from which I've received so much knowledge. I am often googling for a solution to a technical problem and quickly find someone has tackled it and posted it on their blog or website.


I've been working on developing a fluid, lightweight application layout that is 508 compliant. The design of this blog is based on it. It uses percentage based widths to adjust to the user's viewport width (browser window). EM-based sizing keeps text and images within containers and correctly proportioned through font size changes. Other than a couple of optional images, it uses CSS entirely. The navigation is keyboard accessible even with javascript disabled (although not as visually sound) Update: I updated the submenus to use code from Twitter Bootstrap so they are not usable with javascript disabled anymore. The HTML is W3C validated and I tried to reduce the number of tags to make it as semantically accurate as possible. I used the WAVE toolbar to fix any accessibility concerns. The layout has been tested in a number of browsers and versions on both Mac and PC including Chrome, IE, Firefox, and Safari.

The code and documentation is available on GitHub and contains everything needed to put on a webserver and display. It is provided under the MIT license.

Any issues or bugs can go in the issue tracker.

I couldn't have made this layout without help from the community. Here's a few that I can remember. If I forgot you, let me know and I'll add you to the list.

Blake Haswell for keyboard accessible dropdowns Replaced with Twitter Bootstrap dropdowns.
Matthew Tayler for keeping footers at the bottom of the page
Yahoo! developers for YUI reset and other tips
Chris Coyier for CSS triangles

No comments :

Post a Comment

Stay Connected

Subscribe to feed Get email updates Follow @linecomments on Twitter Facebook