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

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

<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

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">

  

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>

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>

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.

<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>

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

<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>

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

  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.

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>

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.

<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>

Inline Errors

<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

<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;
}