TextExpander Web Style Guide

Colors

var(−−white) #FFFFFF

var(−−text) #475264

var(−−primary-light) #FFA750

var(−−primary) #F79927

var(−−primary-dark) #F68009

var(−−secondary-light) #56CFCF

var(−−secondary) #46BFBF

var(−−secondary-dark) #349898

var(−−secondary-darker) #248888

var(−−lighter) #F8F9FB

var(−−light) #E7EBF1

var(−−medium-light) #C7CBD3

var(−−medium) #8F98A9

var(−−medium-dark) #677284

var(−−dark) #475264

var(−−darker) #283342

var(−−success) #67B78A

var(−−danger) #E65355

Text Styles

Display 1

class="display-1"

Display 2

class="display-2"

Display 3

class="display-3"

Display 4

class="display-4"

Heading 1

class="h1" or <h1>

Heading 2

class="h2" or <h2>

Heading 3

class="h3" or <h3>

Heading 4

class="h5" or <h5>

Default Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nibh augue, feugiat eu libero eget, varius feugiat quam. Nam egestas vel lectus sed elementum. Nam molestie in tortor ut pharetra. Sed quis massa consequat, tempor leo eu, euismod eros. Cras non augue ex. Cras nec urna in libero pharetra venenatis.

Lead Paragraph: Nam egestas vel lectus sed elementum. Nam molestie in tortor ut pharetra. Sed quis massa consequat, tempor leo eu, euismod eros. Cras non augue ex. Cras nec urna in libero pharetra venenatis.

<p class="lead"></p>

Text Colors

Default Text Color

Primary Text Color class="text-primary"

Secondary Text Color class="text-secondary"

White Text class="text-white"

Lists

Default List

Item 1
Item 2
Item 3

Color List <ul class="list-color"</a>

Item 1
Item 2
Item 3

Unstyled List <ul class="list-unstyled"</a>

Item 1
Item 2
Item 3

Inline text elements

You can use the mark tag to highlight text. <mark>

~~This line of text is meant to be treated as deleted text.~~ <del>

This line of text is meant to be treated as an addition to the document. <ins>

This line of text will render as underlined <u>

This line of text is meant to be treated as fine print. <small>

This line rendered as bold text. <strong>

This line rendered as italicized text. <em>

Text Alignment

Left aligned text. <class="text-left">

Right aligned text. <class="text-right">

Center aligned text. <class="text-center">

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

Note: blockquotes are made up of the quote using the <p> tag, and a <footer class="blockquote-footer"> for the source. These are all contained within the <blockquote class="blockquote"> HTML container.

Buttons

Sizes

Normal

class="btn"

Small

class="btn btn-sm"

Large

class="btn btn-lg"

Rounded

Normal

class="btn"

Rounded

class="btn rounded-pill"

Light Styles

Primary

class="btn btn-primary"

Secondary

class="btn btn-secondary"

Dark

class="btn btn-dark"

Light

class="btn btn-light"

Outline Primary

class="btn btn-outline-primary"

Outline Secondary

class="btn btn-outline-secondary"

Outline Dark

class="btn btn-outline-dark"

Outline Light

class="btn btn-outline-light"

Link

class="btn btn-link"

Dark Background Styles

Inverted Primary

class="btn btn-inverted-primary"

Inverted Secondary

class="btn btn-inverted-secondary"

Inverted Dark

class="btn btn-inverted-dark"

Outline Inverted

class="btn btn-outline-inverted"

Tables

Default Table

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Striped Table

<table class="table table-striped">

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry	the Bird	@twitter

Bordered Table

<table class="table table-bordered">

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Borderless Table

<table class="table table-borderless">

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Small Table

<table class="table table-sm">

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

Images

Image Thumbnails

<img class="img-thumbnail">

Responsive images

<img class="img-fluid">

Alerts

Primary Alert

Primary: A simple primary alert with an example link.

<div class="alert alert-primary" role="alert">

Secondary Alert

Secondary: A simple secondary alert with an example link.

<div class="alert alert-secondary" role="alert">

Success Alert

Success: A simple success alert with an example link.

<div class="alert alert-success" role="alert">

Danger Alert

Danger: A simple danger alert with an example link.

<div class="alert alert-danger" role="alert">

Light Alert

Light: A simple light alert with an example link.

<div class="alert alert-light" role="alert">

Multi-line Alert

Well done!

You successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Note: Multi-line alerts can contain <p>, <hr> and heading tags. Used the alert-heading class for heading text.

Cards

<div class="card">
		    <img src="..." class="card-img-top" alt="...">
		    <div class="card-body">
		        <h5 class="card-title">Title</h5>
		        <p class="card-text">Content</p>
		        <a href="#" class="btn btn-primary">Link</a>
		    </div>
		</div>

Note: Card image height should be cropped to match other images in row. To organize cards use grid. More information about cards can be found in bootstrap’s documentation.

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Grids

Basic Structure

Note: Grid system is setup to be 12 columns wide. More information about the grid system can be found in bootstrap’s documentation.

<div class="container">
		    <div class="row">
		        <div class="col-4">Column</div>
		        <div class="col-4">Column</div>
		        <div class="col-4">Column</div>
		    </div>
		</div>

col-4

Offset

<div class="container">
		    <div class="row">
		        <div class="col-6 offset-3">Column</div>
		    </div>
		</div>

col-6

Mobile Grids

<div class="container">
		    <div class="row">
		        <div class="col-lg-3 col-md-6 col-sm-12">Column</div>
		    </div>
		</div>

Note: The grid exists at five “break points”. The addition of a prefix (outlined below) allows for controlling the sizing on those devices. Adjust your browser viewport to see the break points in action. These same prefixes can be applied to offsets: class="offset-md-1". This class will add an offset to md, lg, xl and break points. On sm and lower there will be no offset. You can additionally apply offset-md-0 to remove any offsets on a particular break size.

Prefixes apply to the defined break size and larger. For example, applying col-md-5 will apply a 5-column width to that container for medium, large and extra large sizes. The smallest size and small and will default to 12 columns.

Size	Max container width	Class prefix
`.col-`	Extra small <576px	None (auto)
`.col-sm-`	Small ≥576px	540px
`.col-md-`	Medium ≥768px	720px
`.col-lg-`	Large ≥992px	960px
`.col-xl-`	Extra large ≥1200px	1140px

col-xl-2 col-lg-4 col-md-6 col-sm-12

Spacing

Provided are shorthand classes for margin and padding. The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Where property is one of:

m – for classes that set margin
p – for classes that set padding

Where sides is one of:

t – for classes that set margin-top or padding-top
b – for classes that set margin-bottom or padding-bottom
l – for classes that set margin-left or padding-left
r – for classes that set margin-right or padding-right
x – for classes that set both *-left and *-right
y – for classes that set both *-top and *-bottom
blank – for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 – for classes that eliminate the margin or padding by setting it to 0
1 – (by default) for classes that set the margin or padding to 4px
2 – (by default) for classes that set the margin or padding to 8px
3 – (by default) for classes that set the margin or padding to 16px
4 – (by default) for classes that set the margin or padding to 24px
5 – (by default) for classes that set the margin or padding to 48px

Display

As such, the classes are named using the format:

.d-{value} for xs
.d-{breakpoint}-{value} for sm, md, lg, and xl.

Where value is one of:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

The display values can be altered by changing the $displays variable and recompiling the SCSS.

The media queries effect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.