Our web style

Framework

We recommend the Bootstrap v3 framework.

The Winshuttle style file described on this page does not include the Bootstrap framework, it must be added separately.

CSS

Before you begin, include the following CSS file into your project. Ensure it loads second to last. Your site’s CSS customizations should load last.

<link rel="stylesheet" href="https://www-static.winshuttle.com/css/base.min.css" type="text/css" media="all" />

DOM

For the Winshuttle CSS styles to apply to your content, the HTML DOM must contain these elements in this order.

HTML

<body>

  <div id="wshContainer">

    <header>...</header>

    <div id="wshContent">
      <p>All page body content goes here.</p>
    </div><!--/#wshContent-->

    <div id="wshFooter">...</div>

  </div><!--/#wshContainer-->

</body>

Visual

<body>
<div id="wshContainer">
<header>...</header>
<div id="wshContent">
  All page body content goes here.
</div>
<div id="wshFooter">...</div>
</div><!--/#wshContainer-->
</body>

Style scope

Here are the modifications that you can expect to happen after applying the Winshuttle CSS file.

body
Some global changes, like font family, size, and color are applied to the HTML body.
wshContainer
This outer wrapper is a target for hyperlink styles and anchor actions, H1-H5 sizes and colors, tables, and floated elements.
wshContent
Declarations for body-specific content, such as UL/OL/LI styles, are applied here. All page body content should be here.

Proper classing

Many reusable, focused adjustment classes are provided that alter content in simple, straightforward, consistent ways.
Rather than creating ad-hoc, abstract CSS classes for elements, we apply reusable adjustment classes that can be used on a wide variety of elements. It’s easy to see the changes being made to an element. It also reduces the possibility of duplicate declarations, which helps to ensure stylistic consistency across the property.

Do

HTML

<h2 class="white heavy">Lorem ipsum</p>
<p class="addMarginTop white heavy">Dolor amet</p>

Don’t

HTML

<div class="fancy">
  <h2>Lorem ipsum</p>
  <p>Dolor amet</p>
</div>

CSS

.addMarginTop { margin-top: 2em; }
.white { color: #FFFFFF; }
.heavy { font-weight: 700; }

CSS

.fancy h2 {
  color: #FFFFFF;
  font-weight: 700;
}

.fancy p {
  margin-top: 2em;
  color: #FFFFFF;
  font-weight: 700;
}  
  • It’s clear what each of these classes do.
  • They can be applied to almost any element in the site.
  • Simple, non-nested CSS classes are quickly painted by the browser.
  • The adjustments made by this class are not obvious.
  • Common adjustments are at risk of being duplicated.
  • The complex CSS rules increased browser paint time.

Modifier classes

These CSS classes are available for your use. Apply them to your elements to style them as desired.

Spacing

  • Add margin or padding to an element using these classes.
  • Each of these classes can be modified from 2x (2em) to 6x (6em). For example, addMarginTop2x or addPaddingBottom6x.

Add margin

  • addMargin (all sides)
  • addMarginTop
  • addMarginRight
  • addMarginBottom
  • addMarginLeft

Add padding

  • addPadding (all sides)
  • addPaddingTop
  • addPaddingRight
  • addPaddingBottom
  • addPaddingLeft

Border removal

  • b0 (All sides)
  • bt0 (top border)
  • br0 (right border)
  • bb0 (bottom border)
  • bl0 (left border)

Remove margin

  • m0 (all sides)
  • mt0 (top margin)
  • mr0 (right margin)
  • mb0 (bottom margin)
  • ml0 (left margin)

Remove padding

  • p0 (all sides)
  • pt0 (top padding)
  • pr0 (right padding)
  • pb0 (bottom padding)
  • pl0 (left padding)

Font

Size

  • small2x (50%)
  • small (75%)
  • smallish (85%)
  • smallville (90%)
  • large (125%)
  • large2x (150%)
  • large3x (175%)
  • large4x (200%)

Weight

  • light (200)
  • regular (400)
  • semibold (600)
  • heavy (700)

Case

Don’t TYPE TEXT IN ALL CAPS, instead apply the “caps” class to make it show in all uppercase.

  • caps (Like this)
  • not-caps (un-does a prior caps declaration)

Line height

  • lineHeight75 (0.75 em)
  • lineHeight80 (0.80 em)
  • lineHeight90 (0.90 em)
  • lineHeight100 (1.00 em)
  • lineHeight125 (1.25 em)
  • lineHeight130 (1.30 em)
  • lineHeight150 (1.50 em)
  • lineHeight160 (1.60 em)
  • lineHeight170 (1.75 em)
  • lineHeight200 (2.00 em)

Colors

Apply these CSS classes to <p>, <li>, <div>, or <span>.

Text

  • blue
  • blue-light
  • teal
  • purple
  • tangerine
  • navy
  • grey-dark
  • grey-medium
  • grey-medium-light
  • grey
  • grey-light
  • white

Backgrounds

  • bg-blue
  • bg-blue-light
  • bg-teal
  • bg-purple
  • bg-tangerine
  • bg-navy
  • bg-grey-dark
  • bg-grey-medium
  • bg-grey-medium-light
  • bg-grey
  • bg-grey-light
  • bg-white

Borders

  • border-blue
  • border-blue-light
  • border-teal
  • border-purple
  • border-tangerine
  • border-navy
  • border-grey-dark
  • border-grey-medium
  • border-grey-medium-light
  • border-grey
  • border-grey-light
  • border-white

Example

<p>Here is some <span class="blue heavy">bold, blue text</span>.</p>

Here is some bold, blue text.

Background gradients

bgg-studio-v
bgg-foundation-v
bgg-left-foundation-right-grey
bgg-left-tealgradientdown-right-grey
bgg-left-tealgradientdown-right-navy
bgg-left-tealgradientdown-onethird-right-navy-twothirds
bgg-left-teal-right-grey
bgg-left-navy-right-teal

Background gradients

bgg-left-navy-threequarters-right-teal-onequarter
bgg-left-navy-twothirds-right-teal-onethird
bgg-purple-v
bgg-purple-h
bgg-purple-d
bgg-blue-v
bgg-blue-h
bgg-blue-d

Semitransparent backgrounds

Use these classes to make elements stand out on top of colored backgrounds.

bg-transparent-dark
bg-transparent-mid-dark
bg-transparent-mid
bg-transparent-mid-light
bg-transparent-light

Buttons

Class the <a> tag with “btn” and apply modifier classes as necessary.

<a class="btn white" href="https://www.winshuttle.com">Linked text</a>
<a class="btn btn-wide white" href="https://www.winshuttle.com">Linked text</a>
<a class="btn bg-tangerine white" href="https://www.winshuttle.com">Linked text</a>
<a class="btn btn-wide2x white" href="https://www.winshuttle.com">Linked text</a>
<a class="btn large white" href="https://www.winshuttle.com">Linked text</a>

Shadows

Apply shadows to block elements positioned over background gradients or images.

shadow-teal
shadow-purple
shadow-grey-dark
shadow-grey-light

Tables

Use tables only for presenting tabular data.

Horizontal

Heading A Heading B
111 222
333 444
111 222
333 444
<table class="table">
  <tbody>
    <tr>
      <th>Heading A</th>
      <th>Heading B</th>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>444</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>444</td>
    </tr>
  </tbody>
</table>

Horizontal striped

Heading A Heading B
111 222
333 444
111 222
333 444
<table class="table table-striped">
  <tbody>
    <tr>
      <th>Heading A</th>
      <th>Heading B</th>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>444</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>444</td>
    </tr>
  </tbody>
</table>

Borderless

Heading A Heading B
111 222
333 444
111 222
333 444
<table class="table noBorders">
  <tbody>
    <tr>
      <th>Heading A</th>
      <th>Heading B</th>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>444</td>
    </tr>
    <tr>
      <td>111</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>444</td>
    </tr>
  </tbody>
</table>

Vertical

Heading A 111 333
Heading B 222 444
<table class="table table-vertical">
  <tbody>
    <tr>
      <th>Heading A</th>
      <td>111</td>
      <td>333</td>
    </tr>
    <tr>
      <th>Heading B</th>
      <td>222</td>
      <td>444</td>
    </tr>
  </tbody>
</table>

More Winshuttle Brand resources