Overview

Jquery

Shoestring runs off of the latest version of jQuery. Please visit jquery.com to download to include in project. Make sure to place jquery before shoestring in your header or end of body.

Normalize.css

To set everything at a state that renders all browsers the same Normalize.css is included. Normalize.css is created by Nicolas Gallagher.

Banner

Banner Default

Use the color classes green light-blue orange teal purple red to change the color of the banner. The default without a class is navy blue.

Also, if you have a specific centered width layout. Make sure to place the banner outside of that container as the banner needs to span the entire width of the page. This can be seen being used live at www.ucsf.edu.

<div id="ucsf-banner-nav" class="">
  <div class="top-header-container row">
      <ul class="menu">
        <li class="first"><a href="http://www.ucsf.edu">University of California San Francisco</a></li>
        <li><a href="http://www.ucsfhealth.org/">UCSF Medical Center</a></li>
        <li><a href="http://www.ucsf.edu/search" title="">Search UCSF</a></li>
        <li><a href="http://www.ucsf.edu/about">About UCSF</a></li>
      </ul>
  </div>
</div>

UCSF Brand Colors

Based on identity standards Shoestring's elements, components, classes and theme is based on the following palette

Grid System

Shoestring has a 12 column responsive mobile first grid system built right in!

With a grid system you can easily create page layouts that are responsive/mobile friendly

Information

• All columns must be placed inside a .row div container for the grid to work.
• Adding col1, col2, etc.. to your class name will make that column span how many columns.
• The columns must equal twelve to fit correctly inside the row.

<div class="row">
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
    <div class="col1">One Column</div>
  </div>

Mobile and Tablet Grids

Sometimes you don't want your columns to immediately stack on mobile or tablet. Just prefix the phone- with how many columns you want

Mobile Grid

Tablet Grid

Clearfix

If your columns don't clear correctly use the .clearfix class to clear the column.

Typography

Headings

You can use either <h1> through <h6>, or use .h1 through .h6 to display headings.

Shoestring comes with a bunch of UCSF centric font styles all the way from p to h1

Font Awesome

Shoestring brings Font Awesome to the table.

Font Awesome includes:

• Spinners

Buttons

Use the button classes on <a>, <button>, or <input> elements.

Sizes

Sometimes a default size button isn't enough so we provide classes for alternate sizes

States

Options

Forms

<form>
    <div class="form-group">
      <label for="exampleEmail">Email Address:</label>
      <input type="email" class="form-control" id="exampleEmail" placeholder="email">
    </div>
    <div class="form-group">
      <label for="exampleEmail">Password:</label>
      <input type="password" class="form-control" id="exampleEmail" placeholder="email">
    </div>
    <div class="form-group">
      <label for="exampleInputFile">File Input:</label>
      <input id="exampleInputFile" type="file"></input>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox">Yes</input>
      </label>
    </div>
    <button class="btn btn-default" type="submit">Submit</button>
  </form>