This is my latest HTML5/CSS3 template. In this version I have added the use of a bit more strict SMACSS, OOCSS and DRYCSS methodologies in the CSS. Several years ago the trend was to organize your CSS into application categories such as layout, colors, etc. Back then I found this a bit difficult to manage, especially during rapid development i.e. having a class name in three different location in the CSS file (or separate files). SMACSS follows along the same line of thought - to make your CSS a bit more modular. OOCSS focuses more on code reuse, while DRY (do not repeat yourself) is more of a baseline rule of thumb. You can see how I interpreted these methodologies by viewing the comments in my styles.css file.

I remain somewhat on the fence whether SMACSS really works for me. In standard practice, I prefer to organize my CSS by UI pages, putting reusable styles in a section labeled "Global". I believe any way of organizing your CSS in some modular fashion is acceptable, as long as it is scalable and easy to interpret by others.

Because most of what I do as a freelance designer/developer includes user-facing behaviors, I included a small subset of the JavaScript code that I work with on a regular basis and implemented several of its features. Feel free to take a peek at thisApp.js - I have not minified it for this project.

Also worthy of note is the responsive UI. Some time ago I narrowed down the set of CSS Media Queries I use to the lowest common denominator/set. I have found, in several applications, these work best. Take a look at respond.css.

Lastly, I have included my rdiv.js file for developing the responsive UI. You can read more about that in another lab listing :)

Toggle Dev Data

Is IOS:
Is Android:
Is Desktop:
Is Win8:
Window Width:
Device Width:
This device is a/an:

Set Local Storage Key
View Local Storage
Delete Local Storage
Local Value Stored:

Domain:
Path:
URI:
Query:

External Link: joggoon.com

Modal Demo

TODO: Add JS module:
(1) add an accordian in the column (bpp labs); (2) add a modal implementation (bpp labs); (3) add page curls to main sections (bpp labs); (4) add tab UI here (bpp labs);

TODO: Documentation:
Replace the above lorem with a description of this demo template.

  1. Tab 1
  2. Tab 2
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.