A style guide serves to catalog the total of all decisions related to one’s preferred approaches to writing and design. Its utility is determined by its ability to simply communicate these conventions, and ideally the logic behind them, among the members of a team. A resource of such complexity requires maintenance and should continue to evolve.
This page and the companion code file serve provide a wide range of common web elements.
Vestibulum cursus erat a felis aliquet, quis tristique sem tincidunt. Quisque dignissim velit sed eros faucibus, sit amet dictum lacus blandit. Donec ut urna rhoncus, volutpat velit sit amet, euismod velit. Curabitur facilisis mi ut ante vestibulum, at ornare sapien ultricies. Etiam gravida erat iaculis ex imperdiet, at tincidunt quam dapibus. Quisque bibendum nec metus id bibendum. Proin elit libero, blandit vitae ullamcorper eget, ullamcorper et magna. Nam non est vel neque dapibus sollicitudin. Cras vel mattis massa, et finibus augue.
Section headings
Aenean ac facilisis metus, nec malesuada libero. Morbi volutpat nunc mi, eu blandit neque semper in. Fusce vitae pharetra metus. Mauris cursus vulputate nisl, sed eleifend mauris bibendum non. Duis eu magna gravida, pharetra arcu at, mollis diam. Nullam efficitur felis dapibus, condimentum ex quis, maximus tellus.
Aliquam eget sagittis leo, ac aliquam metus. Aliquam tincidunt, tellus vitae eleifend finibus, odio odio pretium quam, at posuere lectus mi sit amet nulla. Sed tempus erat non felis cursus malesuada. Pellentesque at dui a nulla aliquam tempor. Maecenas non venenatis ipsum. Nam in pretium elit.
Sections
Another section starting this low on a page should be assessed whether or not it should be its own page. Will enough readers get this far? For the sake of the style page, it will prove necessary to introduce much verticality.
Unordered Lists
Mauris faucibus nisi sed enim consectetur, sit amet dapibus quam dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet dapibus diam. Ut scelerisque, magna at posuere lacinia, dui nisl pulvinar leo, a laoreet ipsum lorem eu est. In ut lacinia lorem. Fusce sit amet dui ut felis tincidunt faucibus nec in tortor. Pellentesque sodales ligula et risus blandit laoreet. Donec velit nisl, varius vel arcu in, vestibulum vulputate purus.
- List
- One
- Two
- Three
Ordered Lists
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet dapibus diam. Ut scelerisque, magna at posuere lacinia, dui nisl pulvinar leo, a laoreet ipsum lorem eu est. In ut lacinia lorem. Fusce sit amet dui ut felis tincidunt faucibus nec in tortor. Pellentesque sodales ligula et risus blandit laoreet. Donec velit nisl, varius vel arcu in, vestibulum vulputate purus.
- List
- One
- Two
- Three
Blockquote
The blockquote is an interesting content type. If you decide to use it, be sure to clearly define when it can be used. Its visual presentation should also be sufficiently different from basic paragraph text. Indents and secondary colors are often used to highlight these special types of information.
So, this is what the fuss is about. And traditionally its used for blocks of sufficient size, although, not always. But those are style rules, parameters per se, that you should determine. Blockquotes don’t require citations, but sometimes it’ll be necessary and it can also be styled specifically.
Blockquote attribution, affiliation
Table
Fusce sit amet dui ut felis tincidunt faucibus nec in tortor. Pellentesque sodales ligula et risus blandit laoreet. Donec velit nisl, varius vel arcu in, vestibulum vulputate purus.
| Column Guide | Column Header |
| Column data | Column data |
Call to action and button
Vivamus sit amet dapibus diam. Ut scelerisque, magna at posuere lacinia, dui nisl pulvinar leo, a laoreet ipsum lorem eu est. In ut lacinia lorem. Fusce sit amet dui ut felis tincidunt faucibus nec in tortor. Pellentesque sodales ligula et risus blandit laoreet. Donec velit nisl, varius vel arcu in, vestibulum vulputate purus.
Headings
The smaller the text
The more you can comfortably write
Hypertext supports up to six heading styles, but content management systems are trending toward four in common use. Four headings provides ample opportunity to nest content.
But to really understand headings you can’t just stack them up. They need to be displayed in regular context with preceding and supporting paragraphs and subheadings.
Like so and so
This text supports what’s above it. But if written well, it should merely introduce the bulk of the content which comes in subsections, delineated appropriately with sections and subsections.
And as much thus
This supports again, and most likely has a bit more heft. Thus the additional text to show weight of more meaty paragraph. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet dapibus diam. Ut scelerisque, magna at posuere lacinia, dui nisl pulvinar leo, a laoreet ipsum lorem eu est. In ut lacinia lorem.
With whom we dine
The point here is that we have a heading level two and two heading threes in close proximity. Can we tell at a glance they are definitely at different levels, with the most recent two headings being subordinate to the ‘Like so and so’ text? This is essential, and the point of this section.
Images
This section includes images sizes and placement, but it is also a continuation of different heading hierarchy arrangements.
In in condimentum dui, quis pulvinar risus. Proin placerat mattis urna in tempus. Etiam euismod augue ac leo porta ultricies. Donec ac sapien vitae urna rutrum cursus non suscipit nibh.
Full width
Etiam scelerisque ultrices rutrum. Nunc posuere aliquam dui posuere pellentesque. Suspendisse ac nunc nisl. Duis a posuere nisl. Donec elit neque, pellentesque a tincidunt nec, egestas non mauris. Phasellus eget nulla sit amet erat hendrerit dignissim. Aenean ipsum mi, euismod in ante consectetur, pulvinar pretium sem.
Half width, right and center
Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed porttitor ligula sit amet massa placerat, eget suscipit dolor venenatis.
Phasellus dapibus nisi a diam rutrum, vestibulum vehicula lectus rhoncus. Praesent placerat dui eget cursus molestie. Ut iaculis condimentum venenatis. Nullam fermentum eros id tempor ullamcorper. Curabitur porttitor lorem nec sem maximus pretium. Cras elementum lacinia auctor.
Mauris porta iaculis justo sed finibus. Pellentesque congue ex ac turpis ullamcorper, at finibus nisi pulvinar. Vestibulum egestas mi vitae diam lobortis ornare. Sed sed erat vel arcu tristique euismod. Quisque pretium congue velit.
