3 atoms Atoms

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

3.1 atoms.alert Alert

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Source: 02-atoms/alert/alert.scss, line 3

3.1.1 atoms.alert.dismissable Dismissible alerts

Build on any alert by adding an optional .alert-dismissible and close button. For fully functioning, dismissible alerts, you must use the alerts JavaScript plugin. This plugin is part of the alert library.

Just add data-dismiss="alert" to your close button to automatically give an alert close functionality. Closing an alert removes it from the DOM.

To have your alerts use animation when closing, make sure they have the .fade and .in classes already applied to them.

Source: 02-atoms/alert/alert.scss, line 10

3.1.2 atoms.alert.variant Alert variants

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Alerts don't have default classes, only base and modifier classes. A default gray alert doesn't make too much sense, so you're required to specify a type via contextual class. Choose from success, info, warning, or danger.

Examples
.alert-success
Success
.alert-info
Information
.alert-warning
Warning
.alert-danger
Danger
Markup: 02-atoms/alert/alert.twig
<div class="alert alert-dismissible fade in {{ modifier_class }}" role="alert">

  <button type="button" class="close" data-dismiss="alert" aria-label="{{ "Close"|t }}">
    <span aria-hidden="true">×</span>
  </button>

  <strong>{{ title }}</strong>
  {{ content }}

</div>
Source: 02-atoms/alert/alert.scss, line 3

3.2 atoms.badge Badge

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Small and adaptive tag for adding context to just about any content.

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example

Example heading New

Example heading Enrolled

Markup: 02-atoms/badge/badge.twig
<h2>Example heading <span class="badge badge-default">New</span></h2>
<h4>Example heading <span class="badge badge-secondary">Enrolled</span></h4>
Source: 02-atoms/badge/badge.scss, line 3

3.2.1 atoms.badge.variations Available variations

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Add any of the below mentioned modifier classes to change the appearance of a badge.

Examples
.badge-default
Default
Enrolled
.badge-primary
Primary
Enrolled
.badge-secondary
Secondary
Enrolled
.badge-accent
Accent
Enrolled
.badge-success
Success
Enrolled
.badge-info
Info
Enrolled
.badge-warning
Warning
Enrolled
.badge-danger
Danger
Enrolled
Markup: 02-atoms/badge/badge-variation.twig
<span class="badge {{ modifier_class }}">Enrolled</span>
Source: 02-atoms/badge/badge.scss, line 3

3.2.2 atoms.badge.pill Pill badges

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Use the .badge--pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).

Example
Primary pill badge
Markup: 02-atoms/badge/badge-pill.twig
<span class="badge badge--pill badge-primary">Primary pill badge</span>
Source: 02-atoms/badge/badge.scss, line 56

3.2.3 atoms.badge.size Badge size

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Use the .badge--large modifier class to make badges larger.

Example
Large primary pill badge
Markup: 02-atoms/badge/badge-size.twig
<span class="badge badge--pill badge--large badge-primary">Large primary pill badge</span>
Source: 02-atoms/badge/badge.scss, line 67

3.3 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.3.1 atoms.button.type Button types

Toggle full screen Open in new window 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: 02-atoms/button/button.twig
<button class="btn waves-effect {{modifier_class}}">Button</button>
Source: 02-atoms/button/button.scss, line 19

3.3.2 atoms.button.style Button styles

Toggle full screen Open in new window 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: 02-atoms/button/button.twig
<button class="btn waves-effect {{modifier_class}}">Button</button>
Source: 02-atoms/button/button.scss, line 3

3.3.3 atoms.button.sizes Button sizes

Toggle full screen Open in new window 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: 02-atoms/button/button.twig
<button class="btn waves-effect {{modifier_class}}">Button</button>
Source: 02-atoms/button/button.scss, line 44

3.3.4 atoms.button.floating Floating action button

Toggle full screen Open in new window 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: 02-atoms/button/button--floating.twig
<button class="btn waves-effect {{modifier_class}}">
  <svg class="icon-gray icon-medium" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</button>
Source: 02-atoms/button/button.scss, line 66

3.4 atoms.card Card

Toggle full screen Open in new window 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 block

The default way of structuring content in a card is by placing it in a .card__block.

Card body

Add .card__body to double the padding of the card. This is primarily used for articles.

Card actionbar

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

Examples
.card__block
Card block

Card title optional subtitle

Content can be anything

.card__body
Card body

Card title optional subtitle

Content can be anything

Markup: 02-atoms/cards/card.twig
<section class="card">
  <h2 class="card__title card__title--underline">
    Card title
    <span class="card__subtitle">
      optional subtitle
    </span>
  </h2>
  <div class="{{ modifier_class }}">
    <p>Content can be anything</p>
  </div>

  <footer class="card__actionbar">
    <a href="#" class="card__link"> Read more </a>
  </footer>

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

3.4.1 atoms.card.nest-section Card nested section

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

To display a distinguished section in a card, you can used a inner wrapper with .card__nested-section. This will undo the padding and there is a subtle gray background color added.

Example

Content can be anything

Nested section content

Markup: 02-atoms/cards/card-nested-section.twig
<section class="card">
  <div class="card__block">
    <p>Content can be anything</p>

    <div class="card__nested-section">
     <p>Nested section content</p>
    </div>
  </div>

</section>
Source: 02-atoms/cards/cards.scss, line 37

3.5 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.5.1 atoms.form-controls.input Input

Toggle full screen Open in new window 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: 02-atoms/form-controls/form-input.twig
<div class="form-group">
  <input type="{{ modifier_class }}" class="form-control" placeholder="{{ modifier_class }}">
</div>
Source: 02-atoms/form-controls/_input.scss, line 7

3.5.2 atoms.form-controls.textarea Textarea

Toggle full screen Open in new window 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: 02-atoms/form-controls/form-textarea.twig
<textarea class="form-control" rows="5"> Default textarea </textarea>
Source: 02-atoms/form-controls/_textarea.scss, line 1

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

Toggle full screen Open in new window 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: 02-atoms/form-controls/form-textarea-autogrow.twig
<textarea class="form-control form-control--autogrow js-textarea-autogrow" data-min-rows="2">Textarea with autogrow behavior</textarea>
Source: 02-atoms/form-controls/_textarea.scss, line 17

3.5.3 atoms.form-controls.select Select list

Toggle full screen Open in new window 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: 02-atoms/form-controls/form-select.twig
<div class="form-group">
  <label for="selectDropdown">A standard select</label>
  <div class="select-wrapper">
    <select class="form-control" id="selectDropdown">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
      <optgroup label="More options">
        <option>Option 4</option>
        <option>Option 5</option>
      </optgroup>
    </select>
  </div>
</div>
Source: 02-atoms/form-controls/_select.scss, line 1

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

Toggle full screen Open in new window 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: 02-atoms/form-controls/form-input-radio.twig
<div class="form-group">
  <div class="radio">
    <input name="group1" type="radio" id="test1">
    <label for="test1">Red</label>
  </div>
  <div class="radio">
    <input name="group1" type="radio" id="test2">
    <label for="test2">Yellow</label>
  </div>
  <div class="radio">
    <input class="with-gap" name="group1" type="radio" id="test3">
    <label for="test3">Green</label>
  </div>
  <div class="radio">
    <input name="group1" type="radio" id="test4" disabled="disabled">
    <label for="test4">Brown</label>
  </div>
</div>
Source: 02-atoms/form-controls/_radio-checkbox.scss, line 1

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

Toggle full screen Open in new window 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: 02-atoms/form-controls/form-input-checkbox.twig
<div class="form-group">
  <div class="checkbox">
    <input type="checkbox" id="test5">
    <label for="test5">Red</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="test6" checked="">
    <label for="test6">Yellow</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="test7" checked="" disabled="disabled">
    <label for="test7">Green</label>
  </div>
  <div class="checkbox">
    <input type="checkbox" id="test8" disabled="disabled">
    <label for="test8">Brown</label>
  </div>
</div>
Source: 02-atoms/form-controls/_radio-checkbox.scss, line 18

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

Toggle full screen Open in new window 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: 02-atoms/form-controls/form-input-switch.twig
<!-- Switch -->
<div class="switch">
  <label>
    Off
    <input type="checkbox" checked>
    <span class="lever"></span>
    On
  </label>
</div>

<!-- Disabled Switch -->
<div class="switch">
  <label>
    Off
    <input disabled="" type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>
Source: 02-atoms/form-controls/_switch.scss, line 1

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

Toggle full screen Open in new window 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: 02-atoms/form-controls/form-input-range.twig
<div class="form-group">
  <input type="range" />
</div>
Source: 02-atoms/form-controls/_range.scss, line 1

3.6 atoms.list List

Lists present multiple line items in a vertical arrangement as a single continuous element.

We intentionally keep our list atom simple, because it is used sparsely in Open Social. Also it is good to know this atom replaces the original bootstrap list-group component.

It doesn't matter which HTML tag you use to create a list, it may be a <ul> or <ol>, but it is not required. All that is required is the .list-item class on the element. When you need to display elements in a row, like an avatar plus a user's name, or you want to present a list with labels and values use the examples below.

Source: 02-atoms/list/list.scss, line 3

3.6.1 atoms.list.avatar List with avatar

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Simple way for showing a list of users.

Example
Chris Hall
Michele Clark
Paul Harris
Markup: 02-atoms/list/list-avatar.twig
{% for key, name in users %}
  <div class="list-item">
    <span class="list-item__avatar">
      <img src="kss-assets/avatar-{{ key }}.jpg" alt="" class="img-responsive img-avatar"/>
    </span>

    <span class="list-item__text">
     {{ name }}
    </span>

  </div>

{% endfor %}
Source: 02-atoms/list/list.scss, line 17

3.6.2 atoms.list.label List with label

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Simple way for showing a list of labels and values.

Example
Name Chris Hall
Address Singel 542
1017 AZ Amsterdam
The Netherlands
Email paul_harris_example@opensocial.com
Function Marketing Consultant
Organisation Open Social
Markup: 02-atoms/list/list-label.twig
{% for label, value in data %}
  <div class="list-item">
    <span class="list-item__label">
      {{ label }}
    </span>

    <span class="list-item__text">
     {{ value }}
    </span>

  </div>

{% endfor %}
Source: 02-atoms/list/list.scss, line 25