UXcellence Exploring excellent user experience

UXcellence Style Guide

A living guide to the styles, patterns, and design of UXcellence, a site devoted to user experience design, front-end development, building products, and making the world a better place to live one pixel at a time.

Typography & rhythm

H2 Heading: Use once for the title of the page.

H3 Heading: The primary subheading within bodies of content.

H4 Heading: The secondary subheading within bodies of content.

H5 Heading: Use for headings within a list of content.
H6 Heading: Use for subheadings within a list of content.

Paragraphs are long-ish bodies of text that define the majority of written content. Try to keep paragraphs to no more than 5 sentences. A paragraph should focus on a single concept. It shouldn’t overstay its welcome.

Some paragraphs may have different text styles, like bold concepts. Other sections of text may need a different style of emphasis. Because this is the web, there will be plenty of links. Sometimes, paragraphs may even contain a little bit of <code>.

  • This is an unordered list.
  • Lists contain similar, delineated content.
  • Use unordered lists when the order of content doesn't matter.
  • Think ingredients or packing lists
  1. Use ordered lists for sequential information.
  2. Each item in the list should build on the previous.
  3. Much better than this list.
Definition list
A list of terms and their definitions. Or any list with key/value pairings.

Blockquotes are pretty awesome. They let you quote other people or yourself.

Ste Grainer

Placeholder text from Fillerati & pull quotes

I try to pull quotes from other articles.

Ste Grainer

It was no time for pugilistic chivalry and my brother laid him quiet with a kick, and gripped the collar of the man who pulled at the slender lady's arm. He heard the clatter of hoofs, the whip stung across his face, a third antagonist struck him between the eyes, and the man he held wrenched himself free and made off down the lane in the direction from which he had come.

Partly stunned, he found himself facing the man who had held the horse's head, and became aware of the chaise receding from him down the lane, swaying from side to side, and with the women in it looking back. The man before him, a burly rough, tried to close, and he stopped him with a blow in the face. Then, realising that he was deserted, he dodged round and made off down the lane after the chaise, with the sturdy man close behind him, and the fugitive, who had turned now, following remotely.

Some quotes may be pulled to the left.

Suddenly he stumbled and fell; his immediate pursuer went headlong, and he rose to his feet to find himself with a couple of antagonists again. He would have had little chance against them had not the slender lady very pluckily pulled up and returned to his help. It seems she had had a revolver all this time, but it had been under the seat when she and her companion were attacked. She fired at six yards' distance, narrowly missing my brother. The less courageous of the robbers made off, and his companion followed him, cursing his cowardice. They both stopped in sight down the lane, where the third man lay insensible.

"Take this!" said the slender lady, and she gave my brother her revolver.

And some quotes won’t be pulled to the side, but will instead span the content like a majestic sloth.

"Go back to the chaise," said my brother, wiping the blood from his split lip.

She turned without a word--they were both panting--and they went back to where the lady in white struggled to hold back the frightened pony.

And here’s some tabular data

Column 1 Column 2 Column 3 Column 4 Column 5 Column 6
First column 2 Third column 4 Fifth column 6
First column 2 Third column 4 Fifth column 6
First column 2 Third column 4 Fifth column 6
First column 2 Third column 4 Fifth column 6

And some code samples:

<form action="/" method="post">
  <input type="hidden" name="secret" value="It's a secret to everybody.">
  <label for="fname">First name</label>
  <input type="text" name="fname" maxlength="50" placeholder="Tony" id="fname">
</form>

How about media, you ask?

"I am."

"I arrest you in the Queen's name!"

Phileas Fogg was in prison. He had been shut up in the Custom House, and he was to be transferred to London the next day.

Passepartout, when he saw his master arrested, would have fallen upon Fix had he not been held back by some policemen. Aouda was thunderstruck at the suddenness of an event which she could not understand. Passepartout explained to her how it was that the honest and courageous Fogg was arrested as a robber. The young woman's heart revolted against so heinous a charge, and when she saw that she could attempt to do nothing to save her protector, she wept bitterly.

As for Fix, he had arrested Mr. Fogg because it was his duty, whether Mr. Fogg were guilty or not.

The thought then struck Passepartout, that he was the cause of this new misfortune! Had he not concealed Fix's errand from his master? When Fix revealed his true character and purpose, why had he not told Mr. Fogg? If the latter had been warned, he would no doubt have given Fix proof of his innocence, and satisfied him of his mistake; at least, Fix would not have continued his journey at the expense and on the heels of his master, only to arrest him the moment he set foot on English soil. Passepartout wept till he was blind, and felt like blowing his brains out.

This is a caption. By default it is centered, but you can add p-left or p-right just as you would for images.

Aouda and he had remained, despite the cold, under the portico of the Custom House. Neither wished to leave the place; both were anxious to see Mr. Fogg again.

That gentleman was really ruined, and that at the moment when he was about to attain his end. This arrest was fatal. Having arrived at Liverpool at twenty minutes before twelve on the 21st of December, he had till a quarter before nine that evening to reach the Reform Club, that is, nine hours and a quarter; the journey from Liverpool to London was six hours.

Colors

The color palette is available on ColorBot. This is another link for testing.

  • #4197d4 rgb(65,151,212)
  • #d6b941 rgb(214,185,65)
  • #5f5583 rgb(95,85,131)
  • #43396a rgb(67,57,106)
  • #aaadb2 rgb(170,173,178)
  • #777981 rgb(119,121,129)
  • #555759 rgb(85,87,89)
  • #333537 rgb(51,53,55)
  • #222324 rgb(34,35,36)

Iconography

Navigation

  • uxc-articles
  • uxc-topics
  • uxc-tools
  • uxc-about
  • uxc-search

Meta

  • uxc-contact
  • uxc-date
  • uxc-follow
  • uxc-link
  • uxc-map
  • uxc-subscribe
  • uxc-tags

Social

  • uxc-facebook
  • uxc-gplus
  • uxc-twitter

The Grid

To create a section of gridded content, first create a <div> with a class of row. Then add divs within with a class of column or columns and a corresponding number (as represented below). There are twelve segments to the grid so the columns should add up to twelve.

.one
.eleven
.two
.ten
.three
.nine
.four
.eight
.five
.seven
.six
.six
.two
.eight
.two
.eight.centered

You can also use offset-two to leave blank space to the left of a column. Or you can use push-two and pull-two to swap the order columns. (Useful if you want content to appear to the left on desktop and below on mobile).

.eight.offset-four
.four.push-eight
.eight.pull-four
First in source
.six.push-six
Second in source
.six.pull-six