A style guide is a list of all design-related directives (UX/UI) and deals with questions regarding the use of typography, specific HTML (text) elements, embedded media and the right corporate colors.
With a visual style guide or style guide, the emphasis is on the accurate monitoring of the online branding of your website or mobile app so that the visual identity of your online application remains consistent.
This ‘living’ Digital Style Guide makes the most use of the Poor Man’s Style Guide (made by Bryan Brown), a quick-and-dirty frontend style guide to copy and use themselves.
Poor Man’s StyleguideThis way, the digital style guide is a helpful tool that effectively (both internal and external) will be used.
1. Typography
Using system fonts for headings and body text, only replaced ‘San Fransisco’ (system font for Apple iOS and OS X) by Open Sans using font-face. So depending on your OS you’ll get served a different font-family.
a. Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
b. Lists, Definitions, etc.
In HTML documents, you can use different types of lists. The most common are the unordered, ordered list and also the definition list.
Ordered List
- List Item 1
- List Item 2
- List Item 1
- List Item 2
- List Item 3
Unordered List
- List Item 1
- List Item 2
- List Item 1
- List Item 2
- List Item 3
Definition List
- Definition List Term 1
- This is a definition list description.
- Definition List Term 2
- This is a definition list description.
c. Default Blockquote
“Web Design is 95% Typography”
Oliver Reichenstein
d. Text Elements
The text you use in a website will get a standard layout, but by using certain standard elements and attributes you can tailor content of your page styling in CSS.
Below are some of the most common physical text formatting elements that can be placed within the source code.
The a element example
The abbr element element with title example
The ACRONYM element example
The cite element example
The code element example
The em element example
The del element example
The dfn element with title example
The ins element example
The kbd element example
The mark element example
The s element example
The small element example
The strong element example
The sub element example
The sup element example
The u element example
2. Monospace / Preformatted
A ‘code block’ can be wrapped in <pre></pre> tags in the HTML text editor of the relevant page or article.
/* RESPONSIVE TABLES */
table { width: 100%; }
th { display: none; }
td, th {
margin: 2px 0;
text-align: left;
padding: 0 !important;
}
td {
display: block;
}
When body text is wrapped in <code></code> tags, the text will be displayed in ‘Monospace Text’.
3. Tables
If you work with ‘tabular data’ on a webpage you’ll need to use tables (<table></table>). When displaying simple and responsive tables I used something familiar to Codepen ‘Responsive Table’ made by Geoff Yuen.
| Table Header 1 | Table Header 2 | Table Header 3 | A Bit Longer Table Header 4 |
|---|---|---|---|
| Division 1 | Division 2 | Division 3 | Division 4 |
| Division 1 | Division 2 | Division 3 | Division 4 |
| Division 1 | Division 2 | Division 3 | Division 4 |
| Division 1 | Division 2 | Division 3 | Division 4 |
4. Form Elements
Some of the pre-styled forms used in rajtoral.com.
The Fieldset:
5. Embedded Media
a. Images with Captions
Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle.
Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle.
b. The Audio Element
c. The Video Element
6. Extra TinyMCE Functionality
WordPress uses the TinyMCE text editor die over de meest gebruikte opties beschikt om uw tekst op te maken. Hieronder ziet u extra knoppen, en daarmee extra functionaliteit, die ik heb toegevoegd aan dit WordPress thema.
a. External Link and Download Buttons
gonzodesign.nl gonzoconsb. Quote, Note and Event Blocks
c. Responsive Video
d. Dropdown Menu
Lorizzle shizzlin dizzle gizzle sit amizzle, hizzle break it down elit. Nullizzle sapien velizzle, aliquet volutpizzle, funky fresh yippiyo, gravida vizzle, arcu. Pellentesque away tortizzle. Sed eros. The bizzle go to hizzle dolor hizzle dawg cool own yo’. Mauris pellentesque nibh et turpizzle. Own yo’ izzle fizzle.
Conclusion
As with graphic design, a corporate styleguide is a predetermined document that describes how a company presents itself visually. Stuff like fonts, corporate colors, logo placement, layout, business card, etc. are being described in order to build a consistent and professional corporate image among all target groups that are important to your business, such as existing customers, prospects, suppliers and potential employees.
The idea that a style guide will define all rules and regulations for consistent use of a corporate identity is secretly fiction. This dynamic style guide therefore has no recording or documenting character, but is more controlling and normative.