V4 BarkBox Styleguide

Click here for the V3 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.

Also keep in mind when building a page

Import the v4 stylesheet and a separate css for page specific overrides, if any. This way we can cache the v4 stylesheet on subsequent page loads.

A separate page specific file allows us to not fight other page specific css on the app.

The goal is to use as much of v4 as possible and very little, if any, page specific css.

Feel free to recommend to designers to use sizes, type, components that are predefined in the styleguide rather than new/slightly different specs. This means less code and more consistent look and feel.

Responsive Breakpoints

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

In our variables we have these grid sizes set, that are also used as breakpoints

  
  // grid breakpoints (also used for responsive breakpoints)
  $grid-xs: 37.5rem; // 600px
  $grid-sm: 48rem; // 768px
  $grid-md: 60.625rem; // 970px
  $grid-lg: 75rem; // 1200px
  $grid-xl: 100rem; // 1600px

We also have a mixin called `breakpoint` for writing media queries with these sizes

  
  @include breakpoint(md) {
    .green-on-tablet {
      color: green;
    }
  }

Tools/Vendors

SCSS
CSS reset via Eric Meyer's CSS Reset

Typography

Fonts

Apercu Light ($apercu-light)
Apercu Regular ($apercu-regular)
Apercu Medium ($apercu-medium)
Apercu Bold ($apercu-bold)

Colors

$blue-50
$blue-100

$blue-200
$blue-400
$blue-800
$blue-900

$gray-50
$gray-100
$gray-200
$gray-500
$gray-700
$gray-900

$green-50
$green-200
$green-300

$yellow-100
$yellow-500
$yellow-700

$red-50
$red-700
$red-900

Grid

We are using CSS grids for layout. This is something new and still a work in progress so check the grid.css for all helpers.

Overview

Our grid is based on these measurements:

Small

width: 339px
no gutter on outside
columns: 6
gutter width: 16px

Medium

width: 692px
gutter on outside
columns: 6
gutter width: 24px

Large

width: 1296px
no gutter on outside
columns: 12
gutter width: 32px

CSS Classes

Right now on small mobile sizes we have a helper for % width

      
.grid-item--50 {
  grid-column: span $cols-sm/2;
} // thinking we wouldnt split beyond 50/50 on mobile

On medium sizes and up, here are more helper classes to specify both spans and percentage widths

  
.grid-item--span-2
.grid-item--span-3 
.grid-item--span-5 
.grid-item--span-main 
.grid-item--50 
.grid-item--33 
.grid-item--25 
.grid-item--20

On medium sizes and up, we also have named columns and a bounded class to help span just the width on the main content


@media (min-width: $grid-md) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 2em;
    grid-row-gap: 2em;
    grid-template-areas: "left0 left1 main0 main1 main2 main3 main4 main5 main6 main7 right0 right1";
  }

  .grid-item--bounded {
    grid-column-start: main0;
    grid-column-end: span 8;
  }
  ...

Spacing

Utilize the following classes to implement margin and padding according to the indicated increments:

Margin

Vertical


  .mv0 {
    margin-top: 0;
    margin-bottom: 0;
  }
  .mv4 {
    margin-top: 4px;
    margin-bottom: 4px;
  }
  .mv8 {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .mv12 {
    margin-top: 12px;
    margin-bottom: 12px;
  }
  .mv16 {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  .mv24 {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .mv32 {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .mv40 {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .mv64 {
    margin-top: 64px;
    margin-bottom: 64px;
  }
  .mv96 {
    margin-top: 96px;
    margin-bottom: 96px;
  }
  .mv128 {
    margin-top: 128px;
    margin-bottom: 128px;
  }

Top Only


  .mt0 {
    margin-top: 0;
  }
  .mt4 {
    margin-top: 4px;
  }
  .mt8 {
    margin-top: 8px;
  }
  .mt12 {
    margin-top: 12px;
  }
  .mt16 {
    margin-top: 16px;
  }
  .mt24 {
    margin-top: 24px;
  }
  .mt32 {
    margin-top: 32px;
  }
  .mt40 {
    margin-top: 40px;
  }
  .mt64 {
    margin-top: 64px;
  }
  .mt96 {
    margin-top: 96px;
  }
  .mt128 {
    margin-top: 128px;
  }

Bottom Only


  .mb0 {
    margin-bottom: 0;
  }
  .mb4 {
    margin-bottom: 4px;
  }
  .mb8 {
    margin-bottom: 8px;
  }
  .mb12 {
    margin-bottom: 12px;
  }
  .mb16 {
    margin-bottom: 16px;
  }
  .mb24 {
    margin-bottom: 24px;
  }
  .mb32 {
    margin-bottom: 32px;
  }
  .mb40 {
    margin-bottom: 40px;
  }
  .mb64 {
    margin-bottom: 64px;
  }
  .mb96 {
    margin-bottom: 96px;
  }
  .mb128 {
    margin-bottom: 128px;
  }

Horizontal


  .mh0 {
    margin-left: 0;
    margin-right: 0;
  }
  .mh4 {
    margin-left: 4px;
    margin-right: 4px;
  }
  .mh8 {
    margin-left: 8px;
    margin-right: 8px;
  }
  .mh12 {
    margin-left: 12px;
    margin-right: 12px;
  }
  .mh16 {
    margin-left: 16px;
    margin-right: 16px;
  }
  .mh24 {
    margin-left: 24px;
    margin-right: 24px;
  }
  .mh32 {
    margin-left: 32px;
    margin-right: 32px;
  }
  .mh40 {
    margin-left: 40px;
    margin-right: 40px;
  }
  .mh64 {
    margin-left: 64px;
    margin-right: 64px;
  }
  .mh96 {
    margin-left: 96px;
    margin-right: 96px;
  }
  .mh128 {
    margin-left: 128px;
    margin-right: 128px;
  }

Left Only


  .ml0 {
    margin-left: 0;
  }
  .ml4 {
    margin-left: 4px;
  }
  .ml8 {
    margin-left: 8px;
  }
  .ml12 {
    margin-left: 12px;
  }
  .ml16 {
    margin-left: 16px;
  }
  .ml24 {
    margin-left: 24px;
  }
  .ml32 {
    margin-left: 32px;
  }
  .ml40 {
    margin-left: 40px;
  }
  .ml64 {
    margin-left: 64px;
  }
  .ml96 {
    margin-left: 96px;
  }
  .ml128 {
    margin-left: 128px;
  }

Right Only


  .mr0 {
    margin-right: 0;
  }
  .mr4 {
    margin-right: 4px;
  }
  .mr8 {
    margin-right: 8px;
  }
  .mr12 {
    margin-right: 12px;
  }
  .mr16 {
    margin-right: 16px;
  }
  .mr24 {
    margin-right: 24px;
  }
  .mr32 {
    margin-right: 32px;
  }
  .mr40 {
    margin-right: 40px;
  }
  .mr64 {
    margin-right: 64px;
  }
  .mr96 {
    margin-right: 96px;
  }
  .mr128 {
    margin-right: 128px;
  }

Padding

Vertical


  .pv0 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .pv4 {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  .pv8 {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .pv12 {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .pv16 {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .pv24 {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  .pv32 {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .pv40 {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .pv64 {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .pv96 {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .pv128 {
    padding-top: 128px;
    padding-bottom: 128px;
  }

Top Only


  .pt0 {
    padding-top: 0;
  }
  .pt4 {
    padding-top: 4px;
  }
  .pt8 {
    padding-top: 8px;
  }
  .pt12 {
    padding-top: 12px;
  }
  .pt16 {
    padding-top: 16px;
  }
  .pt24 {
    padding-top: 24px;
  }
  .pt32 {
    padding-top: 32px;
  }
  .pt40 {
    padding-top: 40px;
  }
  .pt64 {
    padding-top: 64px;
  }
  .pt96 {
    padding-top: 96px;
  }
  .pt128 {
    padding-top: 128px;
  }

Bottom Only


  .pb0 {
    padding-bottom: 0;
  }
  .pb4 {
    padding-bottom: 4px;
  }
  .pb8 {
    padding-bottom: 8px;
  }
  .pb12 {
    padding-bottom: 12px;
  }
  .pb16 {
    padding-bottom: 16px;
  }
  .pb24 {
    padding-bottom: 24px;
  }
  .pb32 {
    padding-bottom: 32px;
  }
  .pb40 {
    padding-bottom: 40px;
  }
  .pb64 {
    padding-bottom: 64px;
  }
  .pb96 {
    padding-bottom: 96px;
  }
  .pb128 {
    padding-bottom: 128px;
  }

Horizontal


  .ph0 {
    padding-left: 0;
    padding-right: 0;
  }
  .ph4 {
    padding-left: 4px;
    padding-right: 4px;
  }
  .ph8 {
    padding-left: 8px;
    padding-right: 8px;
  }
  .ph12 {
    padding-left: 12px;
    padding-right: 12px;
  }
  .ph16 {
    padding-left: 16px;
    padding-right: 16px;
  }
  .ph24 {
    padding-left: 24px;
    padding-right: 24px;
  }
  .ph32 {
    padding-left: 32px;
    padding-right: 32px;
  }
  .ph40 {
    padding-left: 40px;
    padding-right: 40px;
  }
  .ph64 {
    padding-left: 64px;
    padding-right: 64px;
  }
  .ph96 {
    padding-left: 96px;
    padding-right: 96px;
  }
  .ph128 {
    padding-left: 128px;
    padding-right: 128px;
  }

Left Only


  .pl0 {
    padding-left: 0;
  }
  .pl4 {
    padding-left: 4px;
  }
  .pl8 {
    padding-left: 8px;
  }
  .pl12 {
    padding-left: 12px;
  }
  .pl16 {
    padding-left: 16px;
  }
  .pl24 {
    padding-left: 24px;
  }
  .pl32 {
    padding-left: 32px;
  }
  .pl40 {
    padding-left: 40px;
  }
  .pl64 {
    padding-left: 64px;
  }
  .pl96 {
    padding-left: 96px;
  }
  .pl128 {
    padding-left: 128px;
  }

Right Only


  .pr0 {
    padding-right: 0;
  }
  .pr4 {
    padding-right: 4px;
  }
  .pr8 {
    padding-right: 8px;
  }
  .pr12 {
    padding-right: 12px;
  }
  .pr16 {
    padding-right: 16px;
  }
  .pr24 {
    padding-right: 24px;
  }
  .pr32 {
    padding-right: 32px;
  }
  .pr40 {
    padding-right: 40px;
  }
  .pr64 {
    padding-right: 64px;
  }
  .pr96 {
    padding-right: 96px;
  }
  .pr128 {
    padding-right: 128px;
  }

Components

v4 components are patterns used by the design team across the site.

One-off components should go in their own page css until they become more common.

Always suggest using a reusable component than designing something new.

Card Component

A card is a material-design component that is a container for a group of content - text and images. See the account page in the app for examples.


  <div class="card">
    <div class="card-content">
      <p>A card is just a container for content.</p>
      <p>We used to use groups but now cards are the new groups.</p>
    </div>
  </div>

A card is just a container for content.

We used to use groups but now cards are the new groups.

Cards can come with a heading and an edit control. A common pattern is for the edit control to show a modal.


  <div class="card">
    <a class="card-heading">
      <h3 class="heading">Your favorite dog stars</h3>
      <div class="arrow-control"></div>  
      <span class="sr-only">edit and view full list</span>
    </a>
    <div class="card-content">
      <ul>
        <li>Scoopy</li>
        <li>Ren</li>
        <li>Barf</li>
      </ul>
    </div>
  </div>

Your favorite dog stars

Scooby
Ren
Barf

TODO: list of images example

Disclosure row

Note: could be renamed to table instead, however there is no table markup involved

A disclosure row is an item in a list of related content which shows some of the content either to the right or beneath the heading, depending on screensize. An arrow or link can be added to see more and edit.


  <ul>
    <li class="disclosure-row">
      <a href="#">
        <div class="disclosure-row-content">
          // content is left hand content and layout changes mobile to desktop
          <div class="content">  
            <h3 class="heading">Favorite color</h3>
            <div class="details">
              Aquamarine
            </div>
          </div>
          <div class="arrow"></div>
        </div>
      </a>
    </li>

V4 BarkBox Styleguide

Click here for the V3 Styleguide

Overview

Writing CSS

Also keep in mind when building a page

Responsive Breakpoints

Tools/Vendors

Typography

Fonts

Colors

Grid

Overview

Small

Medium

Large

CSS Classes

Spacing

Margin

Vertical

Top Only

Bottom Only

Horizontal

Left Only

Right Only

Padding

Vertical

Top Only

Bottom Only

Horizontal

Left Only

Right Only

Components

Card Component

Your favorite dog stars

Disclosure row

My profile details

Favorite color

Dislikes

Age