UI Pattern Library Basics

For a front-end designer or developer, design and code scalability is a huge concern. It’s easy to use CSS and JavaScript to address individual features, but as the feature list grows, the code grows too, becoming complex and unmanageable. If you don’t consider the future, such as how to adapt one solution to a larger application, you can run into code bloat or poor performance.  The resulting maintenance headaches can waste countless hours of everyone’s time.

UI pattern libraries are a great way to solve this problem. Doing something right once saves you the trouble of needing to do it again, and a UI pattern library can be a major time-saver in any project.  At Above the Fold, we use UI pattern libraries to save time and maintain consistency on many projects, and with a few quick tips you’ll be on the way to creating one of your own.

What are UI patterns, and why a library?

UI patterns are standard, reusable ways of solving UI challenges.  Thus, a UI pattern library is a set of these patterns, documented so that they can be used across an entire site.  In practice, the UI patterns included in a library tend to be common widgets such as tabs, drag-n-drop tables, sliders, form fields and buttons. The library is designed to make developing websites and web apps easier, and allow for consistency across web elements. Rather than having to manually write code for each piece of functionality, you can just copy and paste widgets from the library.

One of the great benefits of a UI library is that everything – functionality, look, etc. – comes from simple CSS classes. There’s no additional coding, or style sheet writing necessary (unless you want to customize the defaults), only applying already defined classes to your (semantic) markup. If you’re looking for a time saver, a UI library is the way to go.

Common Libraries

There are a plethora of UI pattern libraries floating around the web, some better than others. Although libraries can be CSS-only, many include JavaScript, and are often based on an existing JavaScript library.  If you’re already using a JS library like jQuery, Prototype, or Mootools, make sure the UI pattern library you choose works with your JavaScript library.

Some common pattern libraries are:

  • Bootstrap by Twitter
  • MochaUI, based on the MooTools library
  • Prototype UI, based on the Prototype and Script.aculo.us libraries
  • Yahoo UI
  • jQuery UI, based on jQuery (my personal favorite)

 

These UI pattern libraries are the most popular among website and web app developers today. Each has an active community of people contributing to documentation, bug fixing, and tutorials.

ATF’s UI Library Checklist

While you may be able to use an existing pattern library out of the box for small projects, for larger efforts, it probably makes the most sense to build your own. The ATF library for example, is intentionally basic. For a new user interface, rather than starting from scratch, we consult the library, modifying pieces to create new background images, typefaces, and changing colors to match the project needs.

What elements should you include in your UI pattern library?

To begin, you need the base library. For our library, we started with the jQuery JavaScript library and used the jQuery UI library as an initial set of interactive widgets.

Next, using your base UI pattern library as a starting point, you’ll choose the most helpful elements to include in your library (based on what you need.) Here are some common patterns to consider including in a library:

  • Data tables, with sortable columns and maybe draggable rows
  • Tabs and tabbed containers
  • Buttons and icons
  • Dialogs and modals
  • Date pickers
  • Sliders, and other tuning controls
  • Containers, both standard and collapsible
  • Alert messages and highlights
  • Other visual effects

Once you establish a set of controls and elements, include the necessary files (scripts, style sheets, and images) you can begin adding the specific classes to your markup. Take, for example, this collapsible container:

<div>
<header>
<h2>Before UI Library Styling</h2>
</header>
<fieldset>
<div>
Paragraph in this container.
</div>
</fieldset>
<footer>
<a>Button</a> <a>Link</a>
</footer>
</div>

You can simply add classes specified in the pattern library to dress it up!

<div class="container flat rounded-sm bspace collapsible">
<header>
<h2>After UI Library Styling</h2>
</header>
<fieldset class="content form-fields">
<div class="inner tspace clearfix">
<p>Paragraph in this container.</p>
</div>
</fieldset>
<footer>
<a class="btn" href="">Button</a> <a class="secondary-link" href="">Link</a>
</footer>
</div>

And here’s what it will look like rendered in a browser:

By adding a few pre-defined classes from the pattern library, you can give a container rounded corners and set <h2> as the container heading with a collapse/expand icon to the right. Since this example is using jQuery as the library and our UI pattern library, the functionality for this container is already there with the “collapsible” class. You don’t need to write the scripting to actually make this collapse and expand – it’s already done!

What’s Your Favorite UI Pattern Library?

UI pattern libraries are a powerful asset in your development toolbox. By allowing you to speed up the styling and programming portion of your projects, they let you focus more on other important items, such as design details, complex functionality, or user testing.

What are your favorite UI pattern libraries and why? What are other methods you use to simplify your development process?