-
Atoms
- Grid
- Colors
- Typography
- Buttons
- Inputs
-
Molecules
- Notifications
- Forms
-
Organisms
- Modals
-
More Style Guides
- Buffer Style Guide
- Static Pages
Introduction
As the Buffer team grows, it will become increasingly important to maintain a consistent style and visual language across all areas of the product. To do this, we have built the following style guide to document reusable components for faster product development.
This style guide is based largely on the principles of atomic design. The key idea of this methodology is that small, independent - atomic - parts, can be combined into larger molecular structures. Molecular structures can be combined into larger organisms, which can then serve as the foundation for templates and full pages.
Atom
Molecule
Organism
Grid
At the moment we only utilize the grid system on static (non-app) pages. For the sake of simplicity, the grid is built using larger chunks that provide a few simple ways to create diverse page layouts. The page can be divided into fifths, fourths, thirds and halves - and any combination of these.
Each grid row must contain parts that add up to one whole. For example, one-fourth + one-half +
one-fourth. Reference the styleguide.php
file to see an example of the grid system
in use.
<div class="grid-row">
<div class="col one-third"></div>
<div class="col one-third"></div>
<div class="col one-third"></div>
</div>
<div class="grid-row">
<div class="one-fourth"></div>
<div class="one-half"></div>
<div class="one-fourth"></div>
</div>
Nested Grids
Grids can be nested, too!
<div class="grid-row">
<div class="one-half">
<div class="col one-third"></div>
<div class="col one-third"></div>
<div class="col one-third"></div>
</div>
<div class="one-half">
<div class="col one-half"></div>
<div class="col one-half"></div>
</div>
</div>
Full-Width Grids
You can add a full-width
class modifier to a <section class="grid">
in order to escape any containers and margins. An example of this lives on the
transparency dashboard.
This is an example of a full-width grid (note: turn off the sidebar):
Colors
Using colors consistently brings a sense of familiarty and unity to a product. Buffer's color scheme aims to be clear, unintrusive and friendly.
The color grid below lists the hex value and CSS variable for each respective color. When writing
CSS for production code, please use the LESS variables when possible. For further reference, see the
variables.less
file.
Typography
We almost exclusively use Open Sans as the base typeface across the entire Buffer product. Maintaining typographic clarity and hierarchy is important; here is a showcase of different ways to structure content:
Heading Level One
Heading Level Two
Heading Level Three
Heading Level Four
Heading Level Five
Heading Level Six
This is a lead paragraph. It might be used as a longer-form tagline or subheading for a page or content section. It has a slightly larger font size and line-height.
This is a normal paragraph. On static pages, it's designed for readability and optimizing the number of characters per line. The font size is larger to account for longer chunks of text.
This is a blockquote. While rarely used, it's designed to stand out from the main body of content and provide hierarchical contrast on the page.
- This is an
- unordered list
- which can be used to
- ...you know, make lists
- This is a blank
- unordered list
- which can be used to
- ...you know, make lists
- This is an
- ordered list
- which has numbers in front of each item
- because counting is cool
This is an example of a code block. This style will be used for developer docs and in future
iterations of this style guide.
Buttons
Buttons are styled and controlled in buttons.less
. We aim to keep all buttons across
the app as consistent as possible. Any implementations of buttons should aim to follow a
systematic class naming system, detailed below:
Inputs
Creating forms can be tricky - this will be a toolkit to help build fast, flexible forms to be used anywhere in the product. Coming soon.
Notifications
Buttons are styled and controlled in buttons.less
. We aim to keep all buttons across
the app as consistent as possible. Any implementations of buttons should aim to follow a
systematic class naming system, detailed below:
Forms
Creating forms can be tricky - this will be a toolkit to help build fast, flexible forms to be used anywhere in the product. Coming soon.
Modals
We use modals heavily throughout the product to help users focus on single-tasks (like changing billing information or adding a team member). Modals should maintain a consistent style to provide a unified experience for users.