Content Box

As part of a new UI library, I have created a Content Box feature using the jQuery UI Widget Style in a manner that follows the guidelines found in the Webgrown Solutions UI Manifesto. The Content Box supports the following features:

• Allows for an easier visual seperation of information on a page.
• Header with title and action link.
• Uniform styling, padding, etc.
• Flexible layout options.
• "Equal Height" feature, which can be used on any element and not just the Content Box.
• UI Manifesto compliance:
  • Loosely Coupled Markup
  • Functional Flexibility
  • Simple Implementation

The Demo

The Markup

Just some basic page elements (<div>, <h1-h6>, <a>, etc.), with a normal class attribute and some custom data (data-*) attributes to allow feature customization. Once the CSS and Script stuff are in place on a website, any page can implement the Content Box by simply setting the top-level wrapping element of the Content Box markup with the class attribute to "contentBox", add a child header tag, and setting the desired optional custom data attributes. The custom data attributes are optional, so the Content Box could simple have only the standard markup plus the class attribute.

That sounds like a DRY solution to me (see UI Manifesto).

<div class="contentBox"
    data-flow="left"
    data-pad="right"
    data-width="191"
    data-equalHeightGroup="ehg1">
    <header><h2>Website Settings</h2><a>Edit</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo.
</div>
<div class="contentBox"
    data-flow="left"
    data-pad="right"
    data-width="191"
    data-equalHeightGroup="ehg1">
    <header><h3>People I Like</h3><a>Add Person</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. 
</div>
<div class="contentBox"
    data-flow="left"
    data-pad=""
    data-width="191"
    data-equalHeightGroup="ehg1">
    <header><h3>People I Love</h3><a>Add Person</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque.
</div>
<div class="contentBox"
    data-flow="left"
    data-pad="right"
    data-width="301"
    data-equalHeightGroup="ehg2">
    <header><h4>Favorite Movies</h4><a>Add Movie</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. 
</div>
<div class="contentBox"
    data-flow="left"
    data-pad=""
    data-width="301"
    data-equalHeightGroup="ehg2">
    <header><h5>Favorite Cars</h5><a>Add Car</a></header>
    Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. 
</div>
<div class="contentBox">
    <header><h6>Other Stuff</h6><a>Add Stuff</a></header>
    Etiam urna lacus, lobortis sed interdum ac, cursus at neque. Proin nunc enim, sollicitudin et dapibus sed, volutpat sed justo. Ut commodo dolor vitae metus volutpat imperdiet. Etiam tortor velit, tempor eget ullamcorper malesuada, lacinia sed diam. 
</div>    

Not shown to the general public.
        

Not shown to the general public.
        

In addition to the markup, CSS, and JavaScript code samples found below the demo, the following resources/files are required:

• jQuery (current release)
• jQuery UI
  (actually, only the jQuery UI CSS is what is needed)