Overview
Typography
- Fonts
- Colors
- Icons
- Text
Modifiers
- Text Classes
- Misc Classes
Images
Grid System
- Wrappers
- Columns
- Gutters
- Groups
- Dividers
Alerts
Heroes
Forms
Buttons

V3 BarkBox Styleguide

Click here for the V4 Styleguide

Overview

Writing CSS

Be consistent with indentation, spaces before/after colons and curly braces, quotations, and line spacing. If in doubt, follow the formatting of the code around you.
```
.hero {
  width: 100%;
  height: 450px;
}

.smalltalk {
  background-image: url("smalltalk.png");
}
```
Use meaningful id and class names.
Prefer classes over ids and use ids sparingly.
Avoid unnecessary nesting, ideally nest no more than 3 levels deep.
Avoid hacks: if you're using !important, you're likely doing something wrong.
Consider browser support.

Responsive Breakpoints

Desktop + Tablet Landscape: >= 970px
Tablet Portrait: 768px - 969px
Mobile: <= 767px
Add additional breakpoints within reason.

Tools/Vendors

SCSS
CSS reset via Eric Meyer's CSS Reset
Mixin help via Bourbon
Icons added via Fontastic

Typography

Fonts

Burbank Small Bold ($burbank-small-bold)
Apercu Regular ($apercu-regular)
Apercu Medium ($apercu-medium)
Apercu Bold ($apercu-bold)
Coverly Regular ($coverly-regular)

Colors

$black
$light-black
$white

$darkest-grey
$darker-grey
$dark-grey
$light-grey
$lighter-grey
$lightest-grey

$darkest-blue
$darker-blue
$dark-blue
$blue

$dark-green
$green

$dark-red
$red
$dark-pink
$pink

Icons

Example:

<i class="icon-check"></i>

Text

<h1> tag
Example:
```
<h1>Woof Woof, Bark Bark</h1>
```
Woof Woof, Bark Bark
<h2> tag
Example:
```
<h2>Woof Woof, Bark Bark</h2>
```
Woof Woof, Bark Bark
<h3> tag
Example:
```
<h3>Woof Woof, Bark Bark</h3>
```
Woof Woof, Bark Bark
<h4> tag
Example:
```
<h4>Woof Woof, Bark Bark</h4>
```
Woof Woof, Bark Bark
<h5> tag
Example:
```
<h5>Woof Woof, Bark Bark</h5>
```
Woof Woof, Bark Bark
<h6> tag
Example:
```
<h6>Woof Woof, Bark Bark</h6>
```
Woof Woof, Bark Bark
<p> tag
Example:
```
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmodtempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore.</p>
```
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

<a> tag

Example:

<a href="https://barkbox.com/" target="_blank">Woof Woof, Bark Bark</a>

Woof Woof, Bark Bark

Modifiers

Text Classes

The following classes can only be applied to the <p> tag.

class="notice"

Example:

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

The following classes can be applied on all text.

class="right-text"

Example:

<p class="right-text">Woof Woof, Bark Bark</p>

Woof Woof, Bark Bark

class="center-text"

Example:

<p class="center-text">Woof Woof, Bark Bark</p>

Woof Woof, Bark Bark

class="uppercase"

Example:

<p class="uppercase">Woof Woof, Bark Bark</p>

Woof Woof, Bark Bark

class="emphasize"

Example:

<p class="emphasize">Woof Woof, Bark Bark</p>

Woof Woof, Bark Bark

class="italicize"

Example:

<p class="italicize">Woof Woof, Bark Bark</p>

Woof Woof, Bark Bark

class="coverly"

Example:

<p class="coverly">Woof Woof, Bark Bark</p>

Woof Woof, Bark Bark

class="truncate"

Example:

<div class="truncate-example">
  <p class="truncate">Woof Woof, Bark Bark, Yip Yap Yap</p>
</div>

.truncate-example {
  width: 250px;
}

Woof Woof, Bark Bark, Yip Yap Yap

Misc Classes

class="pull-left"

Example:

<img class="pull-left" src="images/fries.gif">

class="pull-right"

Example:

<img class="pull-right" src="images/fries.gif">

class="pull-center"

Example:

<img class="pull-center" src="images/fries.gif">

Images

See below for markup examples of the picture tag and srcset attribute, but consider using the bb_img component!

Retina Images

Use the srcset attribute to specify different paths for different screen resolutions.

Remember to add a fallback ng-src if you are using ng-srcset!

1x and 2x

Example:

<img class="pull-left"
     srcset="images/sheep-1x.jpg 1x, images/sheep-2x.jpg 2x"
     alt="Photo of sheep running in a field" />

<img class="pull-left"
     ng-srcset="images/-1x.jpg 1x, images/-2x.jpg 2x"
     ng-src="images/-1x.jpg"
     alt="Photo of sheep running in a field" />

Responsive Images

Instead of using CSS to hide or show images based on screen size, use the media attribute to only load images when they will be displayed. Use the media attribute within a <source> tag, within a <picture> tag.

Separate images for desktop and mobile:

Example:

<picture>
  <source srcset="images/horses-1x.jpg"
          media="(min-width: 768px)" />
  <source srcset="images/horses-mobile.jpg"
          media="(min-width: 0px)" />
  <img class="pull-left"
       alt="Photo of horses running in a field" />
</picture>

Images on desktop only:

Example:

<picture>
  <source srcset="images/cow-1x.jpg"
          media="(min-width: 768px)" />
  <img class="default pull-left"
       alt="Photo of a hairy red cow standing on a beach" />
</picture>

Photo of a hairy red cow standing on a beach

Retina & Responsive Images Together

1x, 2x, and mobile

Example:

<picture>
  <source srcset="images/prairie-dogs-1x.jpg 1x, images/prairie-dogs-2x.jpg 2x"
          media="(min-width: 768px)" />
  <source srcset="images/prairie-dogs-mobile.jpg"
          media="(min-width: 0px)" />
  <img class="pull-left"
       alt="Photo of two prairie dogs in a hole" />
</picture>

Grid System

Wrappers

Content should be wrapped in <div class="wrapper"> unless it's meant to occupy the full window width (for ex: heroes).

From >= 970px, class="wrapper" provides a set width of 940px and centers content.
From <= 969px, class="wrapper" switches to a width of 100% and provides 15px of left and right padding.

Columns

Columns are intended to be containers for content and can be nested inside of other columns. They use percentage-based widths and are responsive.

Example:

<div class="col full">col + full</div>

<div class="col half">col + half</div>
<div class="col half">col + half</div>

<div class="col two-thirds">col + two-thirds</div>
<div class="col one-third">col + one-third</div>

<div class="col one-third">col + one-third</div>
<div class="col one-third">col + one-third</div>
<div class="col one-third">col + one-third</div>

<div class="col three-fourths">col + three-fourths</div>
<div class="col one-fourth">col + one-fourth</div>

<div class="col one-fourth">col + one-fourth</div>
<div class="col one-fourth">col + one-fourth</div>
<div class="col one-fourth">col + one-fourth</div>
<div class="col one-fourth">col + one-fourth</div>

<div class="col one-fifth">col + one-fifth</div>
<div class="col one-fifth">col + one-fifth</div>
<div class="col one-fifth">col + one-fifth</div>
<div class="col one-fifth">col + one-fifth</div>
<div class="col one-fifth">col + one-fifth</div>

<div class="col two-fifths">col + two-fifths</div>
<div class="col three-fifths">col + three-fifths</div>

col + full

col + half

col + two-thirds

col + one-third

col + three-fourths

col + one-fourth

col + one-fifth

col + two-fifths

col + three-fifths

Gutters

Gutters can be created between columns using modifier classes. Adding the suffix -mini to the end of the following classes will divide the added margin/padding in half.

class="top" will add a top margin of 30px
class="left" will add a right padding of 15px
class="right" will add a left padding of 15px
class="middle" will add a left and right padding of 15px

Example:

<div class="col full">col + full</div>

<div class="col one-third top left">col + one-third + top + left</div>
<div class="col one-third top middle">col + one-third + top + middle</div>
<div class="col one-third top right">col + one-third + top + right</div>

col + full

col + one-third + top + left

col + one-third + top + middle

col + one-third + top + right

Groups

Groups should be placed inside of columns and (for the most part) come in two variations:

White group on grey background:

Example:

<div class="col half">
  <div class="group rounded white">
    <div class="group-header border">
      <h2>Basic Info</h2>
    </div>

    <div class="group-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
    </div>
  </div>
</div>

Basic Info

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.

Grey group on white background:

Example:

<div class="col half">
  <div class="group rounded no-overflow grey-background">
    <div class="group-header blue">
      <h2>Basic Info</h2>
    </div>

    <div class="group-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore.</p>
    </div>
  </div>
</div>

Basic Info

Dividers

class="dashed-divider"
Example:
```
<div class="dashed-divider"></div>
```
class="dotted-divider"
Example:
```
<div class="dotted-divider"></div>
```
class="solid-divider"
Example:
```
<div class="solid-divider"></div>
```

Alerts

Alerts occupy the full window width and appear at below the header. They display success, warning, or error messages.

Example:

<div class="alert-bar success">
  <div class="wrapper">
    <div class="alert">
      <p>What a success!</p>
    </div>
  </div>
</div>

<div class="alert-bar warning">
  <div class="wrapper">
    <div class="alert">
      <p>This is a warning!</p>
    </div>
  </div>
</div>

<div class="alert-bar error">
  <div class="wrapper">
    <div class="alert">
      <p>What a big mistake!</p>
    </div>
  </div>
</div>

What a success!

This is a warning!

What a big mistake!

Heroes

Heroes occupy the full window width and appear below the header. They are modified by the crooked and remove-crooked mixins.

Example:

<div class="hero-example"></div>

.hero-example {
  height: 450px;
  background: url("../images/school-portrait.png") no-repeat center center;
  background-size: cover;
  @include crooked(skewY(1deg), $white);
}

Forms

Fieldsets, Labels, Fields

Forms should placed inside of groups or columns. Fieldsets should be placed inside of forms. Labels and fields should be placed inside of fieldsets.

Fieldsets use percentage-based widths and are responsive. Fieldset modifier classes are very similar to column modifier classes.

class="top-mini" will add a top margin of 15px
class="left" will add a right padding of 7.5px
class="right" will add a left padding of 7.5px
class="middle" will add a left and right padding of 7.5px

Radio buttons and checkboxes require labels to have a "for" attribute with the id of the associated input. The id should be prefixed with "radio-" or "checkbox-" depending on the input type.

Radio button styling depends on the number of radio elements. The "radio-top" and "radio-bottom" classes provide rounded corners for the specified position. The "single-border" class removes the radio elements bottom border so the elements can easily stack.

Example:

<div class="col half left">
  <div class="group rounded grey-background">
    <div class="group-content">
      <h2>Recipient Info</h2>

      <form>
        <fieldset class="half top-mini left">
          <label>First Name</label>
          <input type="text">
        </fieldset>

        <fieldset class="half top-mini right">
          <label>Last Name</label>
          <input type="text">
        </fieldset>

        <fieldset class="full top-mini">
          <label>Dog Size</label>
          <select>
            <option value="">Dog size</option>
          </select>
        </fieldset>

        <fieldset class="full top-mini">
          <label>Gift Message</label>
          <textarea></textarea>
        </fieldset>

        <fieldset class="full top-mini">
          <label for="checkbox-email-gift">
            <input id="checkbox-email-gift" type="checkbox">
            <p>Check here if you'd like us to email the gift.</p>
          </label>
        </fieldset>
      </form>
    </div>
  </div>
</div>

<div class="col half right">
  <div class="group rounded grey-background">
    <div class="group-content">
      <h2>Billing Info</h2>

      <form>
        <fieldset class="radio radio-top single-border top-mini full">
          <label for="radio-credit-card">
            <input id="radio-credit-card" type="radio">
            <p>Use card ending in 1111</p>
          </label>
        </fieldset>

        <fieldset class="radio radio-bottom full">
          <label for="radio-new-credit-card">
            <input id="radio-new-credit-card" type="radio" checked="checked">
            <p>Use new credit card</p>
          </label>
        </fieldset>

        <fieldset class="two-thirds top-mini left">
          <label>Credit Card Number</label>
          <input type="text">
        </fieldset>

        <fieldset class="one-third top-mini right">
          <label>CVV</label>
          <input type="text">
        </fieldset>

        <fieldset class="two-thirds top-mini left">
          <label>Exp Date</label>

          <fieldset class="half left">
            <select>
              <option value="">Exp month</option>
            </select>
          </fieldset>

          <fieldset class="half right">
            <select>
              <option value="">Exp year</option>
            </select>
          </fieldset>
        </fieldset>

        <fieldset class="one-third top-mini right">
          <label>ZIP</label>
          <input type="text">
        </fieldset>
      </form>
    </div>
  </div>
</div>

Recipient Info

Billing Info

Use card ending in 1111

Use new credit card

Credit Card Number

CVV

Exp Date

ZIP

Inline Errors

Example:

<div class="col half left">
  <form>
    <fieldset class="full">
      <label>Email Address</label>
      <input class="grey-background error" type="text">

      <div class="inline-error">
        <p>Email address required.</p>
      </div>
    </fieldset>
  </form>
</div>

Tooltips

Example:

<div class="col half left">
  <form>
    <fieldset class="full">
      <div class="tooltip-wrapper">
        <label>Email Address</label>

        <i class="icon-info-circle tooltip-example">
          <div class="tooltip">
            <p>Email is great!</p>
          </div>
        </i>
      </div>

      <input type="text">
    </fieldset>
  </form>
</div>

.tooltip-example .tooltip {
  width: 220px;
  left: -18px;
}

.tooltip-example .tooltip:before, .tooltip-example .tooltip:after {
  left: 15px;
}

Buttons

Regular buttons:

Example:

<button class="white">Get Started</button>
<button class="blue-outline">Get Started</button>
<button class="dark-grey">Get Started</button>
<button class="blue">Get Started</button>
<button class="green">Get Started</button>
<button class="red">Get Started</button>

Disabled button:

Example:

<button class="disabled">Get Started</button>

Social buttons:

Example:

<button class="facebook">Facebook</button>
<button class="twitter">Twitter</button>