Atoms

Autobutler logo

Our logo is (in most cases) made up of text and CSS. This makes it more scalable than an image, plus we don't have to worry about HiDPI devices etc.

We use two different versions of the logo based on what color background it will appear on. One blue, which is the default and one white, which is good on darker backgrounds.

We have two different sizes available per default, but besides that, changing the size of the logo is trivial by changing the font-size

autobutler.dk
autobutler.dk 
<!-- Regular blue and orange logo for light backgrounds -->
<div class="logo-container">
  <a href="/">
    <strong class="blue">auto</strong>butler.<%= current_country.real_domain %>
  </a>
</div>
<!-- White and orange logo for dark backgrounds -->
<div class="logo-container">
  <div class="text">
    <strong>auto</strong>butler.<%= current_country.real_domain %>
  </div>
</div>
<!-- Bigger logo using the .full-logo class -->
<div class="logo-container full-logo">
  <div class="text">
    <strong class="blue">auto</strong>butler.<%= current_country.real_domain %>
  </div>
</div>

Blocky headline

A variation of a default headline, which has a background colour that wraps the text fairly closely.

By default the background is dark with light text, but it can be changed, to whatever. Good for adding a little extra contrast between headline and background.

Blocky headline 

<h1 class="headline blocky-headline">
  Blocky headline
</h1>

Buttons

Buttons are a big part of our application. Any significant call-to-action should be represented by a button.

We have a few different types of buttons; mostly based on the Bootstrap defaults, but with a few additions and customisations.

The button classes can be applied to either a <button>, <a>, or <input>

Colours

These are the colour classes we use for our buttons to convey different intents and meanings. 

<!-- Standard button -->
<button class="btn btn-default">Default</button>

<!-- Meant for the primary CTA on any page or partial -->
<button class="btn btn-primary">Primary</button>

<!-- When the user has more than one option, this should be used for the secondary option -->
<button class="btn btn-secondary">Secondary</button>

<!-- Used for positive actions; often for saving stuff -->
<button class="btn btn-success">Success</button>

<!-- Used for negative actions; e.g. deleting  or declining something -->
<button class="btn btn-danger">Danger</button>

<!-- Looks like a link, but behaves like a button -->
<button class="btn btn-link">Link</button>

<div style="background-color: #6E808A; display: inline-block; padding: 10px;">
  <!-- Light glass button -->
  <button class="btn btn-glass-light">Link</button>
  <!-- Dark glass button -->
  <button class="btn btn-glass-dark">Link</button>
</div>

Sizes

Our buttons of course come in different sizes: regular size, .btn-xs, .btn-sm, and .btn-lg

They are (mostly) em-based, which means they will adapt to their surrounding text's size. 

<div class="margin-bottom-medium">
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</div>
<div class="margin-bottom-medium">
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</div>
<div class="margin-bottom-medium">
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</div>
<div class="margin-bottom-medium">
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</div>

We also have block-level buttons (.btn-block), which span the full width of their parent, so be careful putting them in containers that are too wide! 

<button type="button" class="btn btn-primary btn-block">Block-level button</button>
<button type="button" class="btn btn-default btn-block">Block-level button</button>

File upload button

This is a special type of button, which we use when we want to enable the user to upload files. It's actually a file input that's restyled to look like a button.

NOTE: For this button to actually work, it requires the inclusion of our jquery.fileupload library.

Upload file 
<form action="#">
  <div class="btn btn-default fileinput-button">
    <i class="fa fa-fw fa-plus-circle"></i>
    Upload file
    <!-- Spinner to show stuff is happening -->
    <i class="fa fa-fw fa fa-spinner fa-pulse hidden"></i>
  </div>
</form>

Disabled buttons

Disabled buttons also have special styling. Bootstrap's default styles differentiate between which type of button has been disabled, but we don't. A disabled button is a disabled button. You can apply the disabled styling either via the .disabled class or the disabled property. Be aware that a-elements don't have the disabled property, in which case you have to use the class.

Secondary disabled link 
<!-- Primary button element -->
<button type="button" class="btn btn-primary" disabled="disabled">Primary disabled button</button>

<!-- Default button element -->
<button type="button" class="btn btn-default" disabled>Default disabled button</button>

<!-- Secondary anchor element -->
<a href="#" class="btn btn-secondary disabled" role="button">Secondary disabled link</a>

Facebook button

It's a Facebook-blue button with a Facebook 'f'-icon in a blue box in there. No images, so it's HiDPI-friendly. 

<button type="button" class="btn btn-facebook">
  <i class="fa fa-facebook"></i>
  <%= t('general.share_facebook') %>
</button>

Chips

Chips used to be called badges, but were renamed to avoid conflicts with existing Bootstrap badges.

They are actionable, label-like elements that we use to display multiple similar, but separate items; like city names or zip codes.

They are translucent by default, which works well on dark backgrounds, but also come in an opaque blue variant for ligth backgrounds.

Chip Blue Chip 
<span class="chip">Chip</span>
<span class="chip blue">Blue Chip</span>

Clickable thumbnail

A Thumbnail that has a selected state, which can be toggled programmatically. 

<div class="clickable-thumb">
  <img class="logo" src="http://placehold.it/200x200&text=Logo">
</div>
<div class="clickable-thumb selected">
  <img class="logo" src="http://placehold.it/200x200&text=Logo">
</div>

Expand/collapse link

A link which will collapse or expand a container.

The text inside can change based on whether the container is collapsed or not and the icon will animate while collapsing/expanding.

Expand

Countdown digit(s)

One or more styled digits to denote a countdown to something. Like when a job expires, for example.

1 2 
<span class="countdown-digit">1</span>
<span class="countdown-digit">2</span>

Divider

The divider atom is like a horisontal ruler on steroids, in that it lets you put any text on top of the line. It's good for separating copy where you're telling the user about one option OR another.

Just a heads up: if the background colour behind the divider is something other than white, the background colour behind the .text should be changed accordingly.

Divider 
<div class="divider">
  <hr>
  <span class="text">Divider</span>
</div>

Dropdown/Select

This is our custom-styled select or dropdown as they are sometimes referred to as.

Headline-y label

A label that's a bit bigger than the rest. 

<form action="#">
  <label class="headline-y" for="something">Headline-y label</label>
  <input type="text" class="form-control" placeholder="An input for comparison">
</form>

Icon in a circle

It's an icon. Inside a circle! 

<div class="dark-background">
  <span class="icon-circle">
    <i class="fa fa-fw fa-comments "></i>
  </span>

  <span class="icon-circle icon-circle-lg">
    <i class="fa fa-fw fa-repeat "></i>
  </span>
</div>

Mechanic logo

This is the way we should always present a mechanic logo.

We have a few different sizes that we can use, depending on the context. .extra-small, .small, .medium, default size, and large. 

<!-- 30x30 -->
<div class="mechanic-logo extra-small">
  <img src="http://placehold.it/128x128/ffffff/333333/&text=Logo" alt="Mechanic logo" class="logo">
</div>
<!-- 40x40 -->
<div class="mechanic-logo small">
  <img src="http://placehold.it/128x128/ffffff/333333/&text=Logo" alt="Mechanic logo" class="logo">
</div>
<!-- 80x80 -->
<div class="mechanic-logo medium">
  <img src="http://placehold.it/128x128/ffffff/333333/&text=Logo" alt="Mechanic logo" class="logo">
</div>
<!-- 100x100 -->
<div class="mechanic-logo">
  <img src="http://placehold.it/128x128/ffffff/333333/&text=Logo" alt="Mechanic logo" class="logo">
</div>
<!-- 128x128 -->
<div class="mechanic-logo large">
  <img src="http://placehold.it/128x128/ffffff/333333/&text=Logo" alt="Mechanic logo" class="logo">
</div>

<!-- We even have an empty variant, which acts like a placeholder when no logo is available. -->
<div class="mechanic-logo empty large">
  <img src="<%= external_asset_url('assets/logo/workshop_fallback.png') %>" alt="Mechanic logo" class="logo">
</div>

Pull-quote

An atom for displaying prominent pieces of text. Either snippets from a longer piece of text or one long quote that is still sufficiently short and digestible.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
<div class="pull-quote">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

Sticker

This is supposed to look like a sticker that's been attached to something on the page. It's meant to draw attention and should only contain one very short word.

Works best when placed on top of an image.

New!
Wow!
Whoa!
<div style="position: relative; height: 12em;">
  <div class="sticker">New!</div>
</div>
<div style="position: relative; height: 12em;">
  <div class="sticker sticker-blue">Wow!</div>
</div>
<div style="position: relative; height: 12em;">
  <div class="sticker sticker-orange">Whoa!</div>
</div>

Transparent input

This is an input, which is almost invisible until it gains focus.

Will only work on dark backgrounds. 

<form class="form" action="#" method="post" class="dark-background">
  <input
    type="text"
    class="form-control input-transparent"
    placeholder="Focus!"
    name="transparent_input"
    id="transparent_input"
  >
</form>