Welcome to the {{PROJECT_TITLE}} styleguide – an internal guide & code repository for designing and coding projects for {{PROJECT_TITLE}}. If you're new here, have a look through some of the topics on the left.
Typography is the atomic element of good interface design as it defines branding,
layout, composition & rhythm. Note that it's not just about choosing the right
typeface, it's also about tone of voice, microcopy. Head over to
IBM Design Language
for an in-depth overview on the elements of typography.
Good reading experiences have the right amount of characters per line.
If a line is too long users will have a hard time focusing, if a line
is too short the eye will have to travel back too often, breaking the
reader's rhythm. An optimal line length is 50-75 characters,
which is about 10-12 words or 25-33 × base font-size (1em).
To increase readability of typographic elements, default letter-spacing
values for headings & small text are adjusted.
Base font-size: 16px
Sans-serif: Flanders Art Sans Regular
Heading 1
Heading 2
Heading 3
Many desperate acts of design (e.g. gradients, drop shadows, and the gratuitous use of transparency) are perpetuated in the absence of a strong concept. Good ideas provide a framework for design, guiding the work.
Heading 4
Paragraph
Heading 5
Heading 6
Small text
Great design will not sell an inferior product, but it will enable great products to achieve their maximum potential. Thomas J. Watson Jr.
Good design will not sell an inferior product...
Thomas J. Watson Jr.
Hyperlink
This looks like a hyperlink
This text is quoted
This text is strong
This text is emphasized
This text is quoted
This text is highlighted
This text is obsolete/deleted/updated
The icon-set is converted with a custom Gulp iconfont-task. To add/remove icons from the generated font, please contact Little Miss Robot or use an online service like IcoMoon. Warning: using an online service could break stuff!
{% include "general/quarks/icons.njk" %}
Basic grid classes for layout purposes, has no extra margins &
paddings applied to items and will work with anything (class based).
Optionally the grid system can be extended to include default margins which can be used
in general, multi-column page layouts. Add the .u-grid--with-margins
class to the wrapping container for this to work.
{% include "general/utils/grid.njk" %}
The table-layout utility makes it easy to display any kind of content as a row of table-cells. These table-cells will adapt their size to make sure they're allways covering the enitre width of the row. If the content exceeds the size of the table-cell, it wil just break to a new line.
<div class="u-table-layout">
<div>
block
</div>
<div>
block
</div>
<div>
block
</div>
</div>
<div class="u-table-layout">
<div>
block
</div>
<div class="u-table-layout__main">
block
</div>
</div>
<div class="u-table-layout">
<div>
block
</div>
<div>
block
</div>
<div class="a-button-group">
<a href="#" class="a-button">example</a>
</div>
</div>
By appling .u-vertical-center to an element you can easily center its content vertically.
<div class="u-vertical-center">
<div>
block
</div>
</div>
We provide a few basic classes to show & certain parts of a page on various screens-sizes:
To guarantee a consistent padding throughout the project, we make use of the following classes
Use <a> for navigation, <button> for everything else. Submit/reset buttons are the only exceptions, using <input[type="submit"]> to trigger default browser behaviour associated with submitting form input. Buttons should follow a typographic scale, based on importance and base font-size.
Primary buttons: <button class="button{{-color}}"> {% include "general/atoms/buttons/general.njk" %}Buttons for in-line interactions, as used in toolbars (eg. close, add, remove, ...)
{% include "general/atoms/buttons/outline.njk" %}Labels can be used to show content belongs to different categories, or tags.
{% include "general/atoms/labels.njk" %}
{% include "general/atoms/labels.njk" %}
Tags are used to group defined terms.
{% include "general/atoms/tags.njk" %}
{% include "general/atoms/tags.njk" %}
By default lists are not included in base/_normalize.scss. Each class extending the default (e.g. inline-list) must handle the reset in itself. Usually this means resetting the padding-left value and adjust the list-style property.
- List item
- List item
- List item
Tables are, like, you know... tables? Use them for tabular data, but not for layout.
{% include "general/atoms/tables.njk" %}
{% include "general/atoms/tables.njk" %}
Each input field should have a label and inform users about the kind of input they need to provide. This info-text switches functionality during the user flow: information becomes inline validation/immediate feedback. The tone of voice should be human and add personality to the experience/brand.
Every form should have an action- and method-attribute. To encourage default browser behaviour, the submit button should be added as input[type=submit]. Every input should have a label with corresponding for-, id- and name-attributes. Labels are always placed before inputs, nesting is not allowed (except for checkboxes and radio's).
Tell the user what kind of input is expected, add a clickthrough as needed
Feedback, suggestions, ideas, ... we would love to hear from you!
By default upload fields aren't easy to style in a specific look& feel.
The trick is to use a hidden field to display input value and some additional
javascript to make this work.
Note: Javascript functionality in the source code is just a prototype
(not present in production /js/main.js). The actual submit/upload
functionality is also not implemented.
By default range sliders aren't easy to style in a specific look& feel.
In order to get it working, some additional javascript is needed. Changing
the slider value will reveal a tooltip with the actual value.
Using the Pikaday Datepicker plugin,
which is lightweight & has no dependencies. Styling of the plugin is embedded
in the generated CSS (simply add the javascript & confire as shown below).
Note: Javascript functionality in the source code is just a prototype
(not present in production /js/main.js).
{% include "general/atoms/form-elements/date.njk" %}
Toggles (radiobuttons, checkboxes & switches ) are wrapped inside a label to enable the default browser behaviour.
{% include "general/atoms/form-elements/toggle.njk" %}Always provide feedback on user interaction. This can be immediate (eg. inline validation) or after the action (eg. submit a form). Feedback messages are informative and provide an easy escape or alternative/following action. The tone of voice should be human and add personality to the experience/brand.
This is a feedback message.
Something went wrong, please try again.
Perhaps you meant something else.
Now how about adding some more.
Some features might not work.
Use tooltips to display inline information or validation feedback. Just like default alerts, different styling can be applied (error, warning, success and information). Although tooltips will work with any typographic style, the use of <small> is adviced.
{% include "general/atoms/tooltips.njk" %}
Tooltip with hyperlink
Tooltip
Tooltip
Tooltip
Tooltip
Tooltip with hyperlink
Tooltip
Tooltip
Tooltip
Tooltip
Tooltip with hyperlink
Tooltip
Tooltip
Tooltip
Tooltip
Tooltip with hyperlink
Tooltip
Tooltip
Tooltip
Tooltip
Always provide immediate/inline feedback on user interaction. Feedback messages are informative and provide an easy escape or alternative/following action. The tone of voice should be human and add personality to the experience/brand.
{% include "general/atoms/form-elements/inline-validation.njk" %}Place this element in the DOM to display a spinning loader.
{% include "general/atoms/loader.njk" %}
{% include "general/atoms/loader.njk" %}