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.
<link rel="stylesheet" href="https://www-static.winshuttle.com/css/base.min.css" type="text/css" media="all" />
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"></body><header>...</header><div id="wshContent"> All page body content goes here. </div><div id="wshFooter">...</div></div><!--/#wshContainer-->
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.
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)
Heading One |
3.375em | Source Sans Pro Bold |
Heading Two |
2.5em | Source Sans Pro Light |
Heading Three |
1.4em | Source Sans Pro Bold |
Heading Four |
1.25em | Source Sans Pro Light |
Heading Five |
1.125em | Source Sans Pro Light |
Heading Six |
.75em | Source Sans Pro Regular |
Body Bold |
1em | Source Sans Pro Bold |
Body | 1em | Source Sans Pro Regular |
Text
- blue
- blue-light
- teal
- purple
- tangerine
- 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.
<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>
shadow-teal
shadow-purple
shadow-grey-dark
shadow-grey-light
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>