New York Skyline

Style Guide: CityPASS

View Source

Style Guide: CityPASS

Primary Colors

TODO update with Custom Colors

@brand-primary
.brand-primary
.bg-brand-primary
#TODO
rgb(TODO)
Used For:
TODO
@brand-success
.brand-success
.bg-brand-success
#TODO
rgb(TODO)
Used For:
TODO
@brand-info
.brand-info
.bg-brand-info
#TODO
rgb(TODO)
Used For:
TODO
@brand-warning
.brand-warning
.bg-brand-warning
#TODO
rgb(TODO)
Used For:
TODO
@brand-danger
.brand-danger
.bg-brand-danger
#TODO
rgb(TODO)
Used For:
TODO
@gray-base
.gray-base
.bg-gray-base
#TODO
rgb(TODO)
Used For:
TODO
@gray-darker
.gray-darker
.bg-gray-darker
#TODO
rgb(TODO)
Used For:
TODO
@gray-dark
.gray-dark
.bg-gray-dark
#TODO
rgb(TODO)
Used For:
TODO
@gray
.gray
.bg-gray
#TODO
rgb(TODO)
Used For:
TODO
@gray-light
.gray-light
.bg-gray-light
#TODO
rgb(TODO)
Used For:
TODO
@gray-lighter
.gray-lighter
.bg-gray-lighter
#TODO
rgb(TODO)
Used For:
TODO

Fonts

TODO: Font 1

font-weight: 400
@font-family-sans-serif

Used for:

TODO

TODO: Font 2

font-weight: 700
@font-family-sans-serif

Used for:

TODO

TODO: Font 3

font-weight: 400
@font-family-serif

Used for:

TODO

TODO: Font 4

font-weight: 700
@font-family-serif

Used for:

TODO

h1 Default Header

Liquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.

h2 Header

Liquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.

h3 Header

Liquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.

h4 Header

Liquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.

h5 Header

Liquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.

h6 Header

Liquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.

Paragraph Style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit dolor, convallis vel urna sed, molestie vehicula augue. Nulla tempus, sapien at vehicula dictum, eros mi suscipit quam, nec commodo nunc mi aliquam velit. Praesent eget mi eget est lobortis ullamcorper quis id arcu. In hac habitasse platea dictumst. In magna mi, In Page Text Link luctus gravida purus ut, porttitor porttitor purus. Sed vulputate euismod lobortis. Proin euismod et urna vel sagittis. Morbi gravida sed sem eu scelerisque. Etiam convallis tempor neque vel auctor. Suspendisse fermentum eget dolor quis mollis. Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.

blockquote: This is a blockquote In magna mi, luctus gravida purus ut, porttitor porttitor purus. Sed vulputate euismod lobortis. Proin euismod et urna vel sagittis. Morbi gravida sed sem eu scelerisque.

Cras tempus pharetra turpis, nec posuere purus rhoncus et. Aliquam ullamcorper neque in justo feugiat tempor nec sed ipsum. Quisque tristique arcu quis lectus consectetur, quis tincidunt arcu aliquam. Nam placerat porta velit non condimentum. Quisque suscipit enim vel porttitor ultrices. Pellentesque pharetra lectus in iaculis feugiat.

Default Link

@font-size-small: This can be used as a class or a var. 

@font-size-small / .font-size-small

@font-size-base: This can be used as a class or a var. 

@font-size-base / .font-size-base

@font-size-large: This can be used as a class or a var. 

@font-size-large / .font-size-large

Icons

Icon reference guide

Custom Interface Elements

.loading()

View Source

Can be used as a mixin or a class, sets a position relative on the element and a class of loading uses :after tag and position absolute for the animation

.loading and .loading-absolute (shown)

.loading(@size: 3em, @border: 5px, @color: #f1f1f1, @opacity: .8) {}

Separators

View Source

Forms

*Required

Horizontal Form

Form Column
View Source
input-related-link

Select a Checkbox

View Source

Select a Radio

Inline Form

Large Form Fields

Small Form Fields

Inline Form Using Grid Columns

Forms with Alerts

Please review your submission

Different Form Alert Styles

.alert (Unstyled)
.alert.alert-success
.alert.alert-info
.alert.alert-warning
.alert.alert-danger

Buttons

.btn.btn-lg

.btn

.btn.btn-sm

.btn.btn-xs

.btn.disabled or .btn[disabled]

.btn.btn-fixed

These buttons have a min-width, if text is larger they will grow

.btn.btn-full

Vertical Margins, Padding, Dividers

Applied to the bottom of an element attemp to just use the variable when possible.


.margin-small, .padding-small or @margin-small
		

.margin-base, .padding-base or @margin-base
		

.margin-large, .padding-large or @margin-large

Scaffolding & Grid

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-8
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-6
.col-sm-6
.col-sm-9 .col-sm-push-3
.col-sm-3 .col-sm-pull-9