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
<!-- 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>
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.
<h1 class="headline blocky-headline">
Blocky headline
</h1>
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>
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>
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>
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.
<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 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.
<!-- 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>
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 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>
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>
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<a href="#" class="expand show-more">
<span class="text">Expand</span>
<span class="text hidden">Collapse</span>
<i class="fa fa-fw fa-angle-down"></i>
</a>
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>
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.
<div class="divider">
<hr>
<span class="text">Divider</span>
</div>
This is our custom-styled select
or dropdown as they are sometimes
referred to as.
<form action="#">
<select class="ab-dropdown form-control" name="ab-dropdown" id="ab-dropdown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</form>
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>
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>
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>
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.
<div class="pull-quote">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
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.
<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>
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>