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>

Linked text

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

Linked text

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

Linked text

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

Linked text

<a class="btn large white" href="https://www.winshuttle.com">Linked text</a>

Linked text

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

Visual guidelines

Voice guidelines

Downloads

Email Winshuttle Marketing

Our web style

Framework

CSS

DOM

HTML

Visual

Style scope

Proper classing

Do

Don’t

Modifier classes

Spacing

Add margin

Add padding

Border removal

Remove margin

Remove padding

Font

Size

Weight

Case

Line height

Colors

Text

Backgrounds

Borders

Example

Background gradients

Background gradients

Semitransparent backgrounds

Buttons

Shadows

Tables

Horizontal

Horizontal striped

Borderless

Vertical

More Winshuttle Brand resources

Have questions about our web style?

Have questions about our web style?