Overview
User Interface Design Patterns
A style guide is a collection of user interface design patterns. Essentially they are a set of design elements that appear multiple times across a website or web appliction. Generally, that can include things like typography, colors, navigation, forms and much more. Also called a pattern library, it documents all of the desired patterns across a multi-device spectrum. It defines how they look, how they behave and how they are coded.
Benefits of a style guide:
- Consistent user experience
- Responsive across viewport sizes
- Code reusability
- Easier testing and maintenance
- Shared vocabulary for development team
Objectives
The goal of the Tower Style Guide is to provide initial styles and design patterns to the Tower development team as they build out the Tower CSS framework. All key components are shown within the style guide. Once the CSS framework is built out, we can use another tool to automatically generate a live style guide. Initially the two can be compared for differences, but at some point the live style guide will become authoritative. Until then, this pattern library is the authoritative guide to the default Tower styles.
Another objective is to show the design patterns for the major screen sizes at different break points. Unique style guides across different viewport windows will be included where required. Recommended breakpoints are outlined on the layout page.
This style guide is not designed to be used for code examples. It is built more like a prototype, not as production-ready code. Often shortcuts are taken with prototypes. Best practices are not always employed. Prototypes need to be built quickly and are primarily a tool for displaying appearance and where required, animation.
Organization
The following sections are included in the Tower Style Guide which will be used for a pseudo brand:
- Colors — default colors
- Typography — default fonts, font sizes and font weights
- Layout — base layout for various screen sizes
- Layout patterns — page layout formats we'll use (shown as a layout submenu)
- Navigation — multi-tiered navigation model & animation
- Tables — table format including style for small screens
- Forms — form usage along with guidelines
- Buttons — default button styles
- Icons — icons to be used
Live Style Guide
Different from most this style guides, this one will not show how elements are coded. That will depend on how the Tower developers choose to implement it. The Tower live style guide will add this important component. The Tower team will select one of the available tool to auto generate the style guide in which code samples are included. Examples of these automatic style guide generators include:
Mobile First
CSS frameworks must be developed using mobile first approach. We start with the smallest screen size and adapt the page using CSS media queries as the screen size increases. This means to only use min-width media queries. Max-width ones most likely will not be required.
NOTE: This site is built only with Chrome in mind. There may be issues with Firefox, IE and Safari.