3 atoms Atoms

Source: 00-config/_variables.scss, line 15

3.1 atoms.button Button

In addition to the default styling of <button> and <input type="submit|image|reset|button"> elements, the .btn class and its variants can apply buttons styles to various elements (like an <a> link).

Use logical elements for your buttons. If it is not a link do not use an a but a <button> tag instead. If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Source: 02-atoms/button/button.scss, line 4

3.1.1 atoms.button.type Button types

Toggle example guides Toggle HTML markup

There are different types of buttons that can be used.

  • Default button: Rectangular shaped buttons that is used in most cases. Does not lift (on same layer as the parent element) and should be placed cards.
  • Flat button: Are text-only buttons. They should always have a color to distinguish them from normal text. They can be used to put less emphasis or visual attraction to the action. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press.
  • Raised button: Rectangular-shaped buttons that behave like a piece of material resting on another sheet – they lift and fill with color on press. Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces. They may be used inline. They lift and display ink reactions on press.
Examples
.btn-default
Default button
.btn-link
Link button
.btn-default.btn-raised
Raised button
Markup

Source: 02-atoms/button/button.scss, line 22

3.1.2 atoms.button.style Button styles

Toggle example guides Toggle HTML markup

There are different types of buttons that can be used.

  • Default button: Rectangular shaped buttons that is used in most cases. Does not lift (on same layer as the parent element) and should be placed cards.
  • Flat button: Are text-only buttons. They should always have a color to distinguish them from normal text. They can be used to put less emphasis or visual attraction to the action. They may be used in dialogs, toolbars, or inline. They do not lift, but fill with color on press.
  • Raised button: Rectangular-shaped buttons that behave like a piece of material resting on another sheet – they lift and fill with color on press. Raised buttons add dimension to mostly flat layouts. They emphasize functions on busy or wide spaces. They may be used inline. They lift and display ink reactions on press.
  • Floating action button: A circular button that lifts. A floating action button is used for page-wide actions.

    Guidelines

In the overview above we have listed many options which you can use to style a button. For consistency we recommend the following:

  • Start with a default button style and type.
  • Is your button next (left, right, below) to a card? Consider making it a raised button to put it on the same elevation level as the card.
  • Does the button need to be one level higher then card content in terms of elevation? Then make it a floating button. This usually means that there is no direct relationship with a specific card or section, but the page as a whole. An example for this would be to edit a node, where this button to do this is put in a block, but you are not only editing the block but the whole node.
  • Only when a button needs more emphasis use the primary style, or even the accent style. Per form or set of buttons you only want one emphasized button and this should be the preferred action in any context.
  • If you want to button to be less visible/prominent you can use a flat button style. You can combine this with a smaller size of course. This is mostly used when buttons are repeated on a page or you have limited space and other elements need more attention.
  • The succes, warning and danger buttons are inhereted from the bootstrap framework and aren't used in the default style. You can use them however if you indicate positive action, negative action or caution when interaction with the button.
Examples
.btn-primary
Primary style
.btn-accent
Accent style
.btn-default
Default style
.btn-flat
Flat style
Markup

Source: 02-atoms/button/button.scss, line 49

3.1.3 atoms.button.sizes Button sizes

Toggle example guides Toggle HTML markup

Define a different button size with .btn-lg, .btn-sm, or .btn-xs.

By default use the default size. You can choose to use a large button if the action really needs to catch the user`s attention. Combine this with a primary or accent style as well to get maximum exposure. Do not mix different button sizes in a set of buttons. If the information density in a block or section is high and you need to make up space you can choose a smaller button size. An example of this are buttons that appear in repetetive blocks.

Examples
.btn-primary.btn-xs
Extra ssmall size
.btn-primary.btn-sm
Small size
.btn-primary.btn-lg
Large size
.btn-primary.btn-block
Block level size
Markup

Source: 02-atoms/button/button.scss, line 100

3.1.4 atoms.button.floating Floating action button

Toggle example guides Toggle HTML markup

A circular button that lifts. It is used for page-wide actions.

Examples
.btn-default.btn-floating.waves-circle
Floating button
Markup
Source: 02-atoms/button/button.scss, line 141

3.2 atoms.form-controls Form controls

Form controls are all individual elements that can be used in forms. They built up to form-groups.

Common form controls

Shared size and type resets for form controls. Apply .form-control to any of the following form controls:

  • select
  • textarea
  • input[type="text"]
  • input[type="password"]
  • input[type="datetime"]
  • input[type="datetime-local"]
  • input[type="date"]
  • input[type="month"]
  • input[type="time"]
  • input[type="week"]
  • input[type="number"]
  • input[type="email"]
  • input[type="url"]
  • input[type="search"]
  • input[type="tel"]
  • input[type="color"]
Source: 02-atoms/form-controls/form-controls.scss, line 3

3.2.1 atoms.form-controls.input Input

Toggle example guides Toggle HTML markup

The <input> element is mostly used for text-based inputs that include the HTML5 types: text, search, tel, url, email, password, date, time, number, range, color, and file.

Styling

The border should light up simply and clearly indicating which field the user is currently editing.

Requirements

Element should have a .form-control class.

Examples
text
Type text
email
Type email
password
Type password
color
Type color
file
Type file
time
Type time
Markup
Source: 02-atoms/form-controls/_input.scss, line 7

3.2.2 atoms.form-controls.textarea Textarea

Toggle example guides Toggle HTML markup

Form control which supports multiple lines of text. Change rows attribute as necessary.

Styling

The border should light up simply and clearly indicating which field the user is currently editing.

Requirements

You should have put a .form-control class on each textarea.

Example
Markup
Source: 02-atoms/form-controls/_textarea.scss, line 1

3.2.2.1 atoms.form-controls.textarea.textarea-autogrow Textarea Autogrow

Toggle example guides Toggle HTML markup

If you want the textarea to autogrow while typing you need to add classes form-control--autogrow and js-textarea-autogrow to the element as well. Also you need to remove the rows attribute and replace it with a data-min-rows attribute. The value should be a number just like rows.

Example
Markup
Source: 02-atoms/form-controls/_textarea.scss, line 17

3.2.3 atoms.form-controls.select Select list

Toggle example guides Toggle HTML markup

The <select> element represents a form field for selecting amongst a set of options.

Styling

The border should light up simply and clearly indicating the user is selecting this form item.

Requirements

You should have put a <div> with the class .select-wrapper around the <select> element for cross-browser styling

Example
Markup
Source: 02-atoms/form-controls/_select.scss, line 1

3.2.4 atoms.form-controls.input-radio Input radio

Toggle example guides Toggle HTML markup

The input element should have a parent with class radio. The label always comes after the input. The visual part of the element is only the label. The user clicks on the label and the :before pseudo-element changes in style. The input itself stays hidden from the user as it iss not themable.

The for attribute is necessary to bind the our custom radio with the input. Add the input's id as the value of the for attribute of the label.

Example
Markup
Source: 02-atoms/form-controls/_radio-checkbox.scss, line 1

3.2.5 atoms.form-controls.input-checkbox Input checkbox

Toggle example guides Toggle HTML markup

The input element should have a parent with class checkbox. The label always comes after the input. The visual part of the element is only the label. The user clicks on the label and the :before pseudo-element changes in style. The input itself stays hidden from the user as it iss not themable.

The for attribute is necessary to bind the our custom checkbox with the input. Add the input's id as the value of the for attribute of the label.

Example
Markup
Source: 02-atoms/form-controls/_radio-checkbox.scss, line 18

3.2.6 atoms.form-controls.input-switch Input switch

Toggle example guides Toggle HTML markup

The switch is a based around the input type checkbox element. Wrap the checkbox in a <label> element and put a span with class lever next to the input element. Now you can put your labels at the beginning and end of the label.

Example
Markup

Source: 02-atoms/form-controls/_switch.scss, line 1

3.2.7 atoms.form-controls.input-range Input range

Toggle example guides Toggle HTML markup

The range input can be themed cross-browser very well. There is no extra markup needed, just update the scss variables in the variables forms file.

Example
Markup
Source: 02-atoms/form-controls/_range.scss, line 1

3.3 atoms.card Card

Toggle example guides Toggle HTML markup

The card is a very basic element that we see a lot in Open social. It is the most basic way of structuring content into sections. A card is elevated (through box-shadow property) one level from the canvas. It will also have a background-color and border-radius.

Card title

A card can have a title to display what the card is about. Add .card__title--underline for a border on the head. Add a child <div class="card__subtitle"> for a subtitle.

Card body

Add .card__body--fat to double the padding of the card.

.cardbody - Default body card .cardbody--fat - Fat body card

Card footer

The footer is reserved for actions the user can perform in the card. In most cases there will be buttons, but there can also be labels in here.

Examples
.card__body
Default body card

Card title optional subtitle

Body can contain element

.card__body--fat
Fat body card

Card title optional subtitle

Body can contain element

Markup

Card title optional subtitle

Body can contain element

Source: 02-atoms/cards/cards.scss, line 1