Styleguide (the Half-Naked Truth)

Standard

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 Styleguide

This 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

  1. List Item 1
  2. List Item 2
    1. List Item 1
    2. List Item 2
  3. 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 samp element example

The small element example

The big element example

The strong element example

The sub element example

The sup element example

The u element example

The var 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 1Table Header 2Table Header 3A Bit Longer Table Header 4
Division 1Division 2Division 3Division 4
Division 1Division 2Division 3Division 4
Division 1Division 2Division 3Division 4
Division 1Division 2Division 3Division 4
Responsive Table

4. Formulier Elementen


Some of the pre-styled forms used in rajtoral.com.

The Fieldset:

Legend




Radio 1
Radio 2
Radio 3


Radio 1
Radio 2
Radio 3



HTML5-specific Form Elements








5. Embedded Media


a. Images with Captions

hou-t-simpel

Full-width Image and Caption

fireworks-animated-gif

Left-aligned Image and Caption

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.

Snowy View

Right-aligned Image and Caption

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.

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. Externe of Interne Link en Download Buttons

gonzoblog ionicons

b. Quote, Note and Event Blocks

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.
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.

c. Responsive Video

d. Dropdown Menu

Lorem ipsum

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.

e. Tabs

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.

f. Responsive Columns

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.

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.