Naming Conventions

Recommended Naming Conventions

Titles & Text

Titles and text for in the CMS use the cms-type Text. This renders an input line for the user on the page editor. For blocks of text with line breaks, use the cms-type Textarea. Finally, use the HTML type for a more versatile option.

Titles & Text
Code Notes
h1 Hero Title
h2 Panel Title
h3 Panel Sub Title
h4 Heading 4
h5 Heading 5
h6 Heading 6
p Paragraph
.sub-title Sub Title
.branding specific to each theme
.color-overlay background tint
.sub-text Used for a paragraph of sub text
.sub-text-fw Used for a paragraph of sub text that is full width.

Structure

Structure
Code Notes
$imageheight css controls the height of the image and/or panel
.panel-left-half Left half of panel that spans the entire webpage
.panel-right-half Right half of panel that spans the entire webpage
.panel-left-third
.panel-middle-third
.panel-right-third
.divider Creates spacing between two elements

Header and Footer

Header and Footer

See bootstrap documentation

Code Notes
footer
nav
.navbar
.sticky

Buttons

Buttons

See bootstrap documentation for basic btn classes

Code Notes
.btn
.btn-custom
.btn-theme
.btn-inverse

Maps

Maps

Used with LocalSignal Maps

Code Notes
.map
#map

Icon Lists

Icon Lists
Code Notes
.list-icon-wrap
.circle-icons
.left-side-icon
.lists-text-right
.front-icon used with Font Awesome Icon
.icon-list

Other

Other
Code Notes
.slide-text Hero Slider Text
.flex-slider Flexslider
.accordian Accordian
.img-gal Image Gallery
.img-btn Image Button

Pricing

Pricing

See bootstrap documentation

Code Notes
.pricing-opt Pricing Panel Option
.opt-ann Annual Option
.opt-mon Monthly Option
.pricing-container
.price-box
.pricing-title
.price
.annual-price
.month-price
.info-p-ann
.info-p-mon
.pricing-footer

Team

Team

See bootstrap documentation

Code Notes
.team
.team-position
.team-desc
.social