Options

#Options

##Modules

• _options.scss

##Available styles

• .page-wrap

Sets an element to a standard maximum width for a page view, and centers it

######Usage

<div class="page-wrap"><img ... /></div>

• .img-contain

Fits a contained image to be limited in width and height to the element with this class.

######Usage

<div class="img-contain"><img ... /></div>

• .img-cover

Fits a contained image to be limited in width to the element with this class.

######Usage

<div class="img-cover">...</div>

• .margin-center

Centers an element if it's display is block

######Usage

<div class="margin-center">...</div>

• .left-justify, .center-justify, .right-justify

Aligns text and certain elements to the specified position

######Usage

<div class="left-justify">...</div>

• .align-top, .align-middle, .align-bottom

Vertically aligns elements to the specified position

######Usage

<div class="left-justify">...</div>

• .bold

Sets the font weight of the contained text to bold

######Usage

<div class="bold">...</div>

• .block

Sets the display of a given element to block

######Usage

<div class="block">...</div>

• .block-force

Forces a given element's display to block

######Usage

<div class="block-force">...</div>

• .inline-block

Sets a given element's display to inline-block

######Usage

<div class="inline-block">...</div>

• .inline-block-force

Forces a given element's display to inline-block

######Usage

<div class="inline-block-force">...</div>

• .hidden

Sets a given element's display to none

######Usage

<div class="hidden">...</div>

• .hidden-force

Forces a given element's display to none;

######Usage

<div class="hidden-force">...</div>

• .invisible

Sets a given element's visibility to hidden

######Usage

<div class="invisible">...</div>

• .invisible-force

Forces a given element's visibility to hidden

######Usage

<div class="invisible-force">...</div>

• .unset

Sets a given element's padding and margin to 0

######Usage

<div class="unset">...</div>

• .unset-force

Forces a given element's padding and margin to 0

######Usage

<div class="unset-force">...</div>

• .fillout

Sets a given element's width and height to 100% of their parent element width and height

######Usage

<div class="fillout">...</div>

• .full-width

Sets a given element's width to 100% of their parent element width

######Usage

<div class="full-width">...</div>

• .full-height

Sets a given element's height to 100% of their parent element height

######Usage

<div class="">...</div>

• .underline

Sets a given element's text content with the text decoration of underline

######Usage

<div class="underline">...</div>

• .no-underline

Sets a given element's text content with the text decoration of none

######Usage

<div class="no-underline">...</div>

• .no-list-style

Sets a given list item or list item elements contained to have no list style

######Usage

<div class="no-list-style">...</div>

• .border-box

Sets a given element and it's content's box sizing to border box

######Usage

<div class="border-box">...</div>

• .clear-whitespace (depreciated)

Sets a given element with a display of inline or inline-block to not have white space

######Usage

<div class="clear-whitespace">...</div>

This option is depreciated but available. Here are better alternatives to clearing/avoiding whitespace

<div>
...
</div><div>
...
</div>

<div>
...
</div><!--
--><div>
...
</div>

See CSS Tricks for more tricks to clearing/avoiding whitespace

• .fixed-nav

Sets a given element as a nav bar fixed to the top of the view

######Usage

<nav class="fixed-nav">...</nav>

• .fixed-footer

Sets a given element as a footer fixed to the bottom of the view

######Usage

<footer class="fixed-footer">...</footer>

• .opacity-0_x

Sets a given element with an opacity of x.x

Goes up to 1.0

######Usage

<footer class="opacity-0_5">...</footer>

• .z-index-x

Sets a given element's z-index to x

######Usage

<div class="z-index-0">...</div>

• .overflow-hidden

Sets a given element's overflow to hidden

######Usage

<div class="overflow-hidden">...</div>

• .overflow-x-hidden

Sets a given element's overflow to hidden on the x axis

######Usage

<div class="overflow-hidden-x">...</div>

• .overflow-y-hidden

Sets a given element's overflow to hidden on the y axis

######Usage

<div class="overflow-hidden-y">...</div>

• .overflow-auto

Sets a given element's overflow to auto

######Usage

<div class="overflow-auto">...</div>

• .overflow-x-auto

Sets a given element's overflow to auto on the x axis

######Usage

<div class="overflow-auto-x">...</div>

• .overflow-y-auto

Sets a given element's overflow to auto on the y axis

######Usage

<div class="overflow-auto-y">...</div>

• .overflow-scroll

Sets a given element's overflow to scroll

######Usage

<div class="overflow-scroll">...</div>

• .overflow-x-scroll

Sets a given element's overflow to scroll on the x axis

######Usage

<div class="overflow-scroll-x">...</div>

• .overflow-y-scroll

Sets a given element's overflow to scroll on the y axis

######Usage

<div class="overflow-scroll-y">...</div>

• .cursor-pointer

Sets a given element to turn the cursor into a pointer

######Usage

<div class="cursor-pointer">...</div>