Helper Classes

Useful Classes Updated

A useful set of classes for altering content on smaller devices.


Floating Elements

Easily float elements by applying the .pull-left or .pull-right class to an element.

Example
								
									
Content...

Clearing Floats

Clear floats by applying the .clearfix class to the wrapper of floated elements which will force it to exapand and push any floated elements below it. Alternatively, use the more old fashioned way for clearing floats by using the .clear class and applying to an element at the end of the floated elements.

.pull-left
.pull-left
.pull-left
Example
								
									
Content...
Content...
Content...

Clearing Floats on Mobile New

Apply the .clear-float-on-mobile class to clear an elements float for screen widths ≤ 768px.

Example
								
									
Content...

Remove Padding New

Remove the padding of a section block or element by applying one or a combination of the following classes:

  • .no-padding-top
  • .no-padding-right
  • .no-padding-bottom
  • .no-padding-left
  • .no-padding
  • .no-padding-on-mobile (removes all padding for screen widths ≤ 768px.)
The outer box will have its padding removed on mobile.
Example
								
									
Content...

Text Alignment

Change text alignment of a section or element by applying one of the following classes ( Note: the last three classes change alignment for screen widths ≤ 768px. This is useful when content flows from top to bottom on smaller screens ):

  • .left
  • .center
  • .right
  • .left-on-mobile
  • .center-on-mobile
  • .right-on-mobile

This text will remain centered on desktop and mobile

This text will left align on mobile

Example
								
									
Content...
Content...

Vertical Alignment

Vertical alignment classes are useful for rollovers or captions in particular but can be used for any element that employs the use of "table" and "table-cell" for display. Timber rollovers and captions are by default set to vertical align middle. Use one of the following classes to change vertical alignment ( Note: the last two classes are used to change vertical alignment for screen widths ≤ 768px. This is useful when images become smaller and the caption needs to be repositioned ):

  • .v-aign-top
  • .v-align-bottom
  • .v-align-top-on-mobile
  • .v-align-bottom-on-mobile

This captions is vertically aligned bottom on desktop but top on mobile.

Example
								
									

Caption


Hiding/Showing

Force hide/show any element by applying the .hide or .show class to an element. Use .hide-on-mobile or .show-on-mobile to change an elements display for screen widths ≤ 768px.

This box shows on desktop but is hidden on mobile. Resize your browser!
This box is hidden on desktop but shows on mobile
Example
								
									
Content...
Content...

Margins

Remove an elements margins by appling theone of the following classes:

  • .no-margins
  • .no-margin-top
  • .no-margin-right
  • .no-margin-bottom
  • .no-margin-left
Example
								
									
Content...

Remove Transition

Apply the class .no-transitions to remove an elements transition. Use .no-transition-on-mobile class to prevent an elements transition at screen widths ≤ 768px.

Example

Overflow New

Force overflow visible on elements that have an overflow hidden applied to them by using the class .overflow-visible.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

Example
								
									
Content...

Scroll New

Remove scrollbars of a scrollable section by adding the class .no-scroll to the element.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

Example
								
									
Content...

Clear Height New

Remove a fixed height of an element and allow it to take its natural height by applying the .clear-height class to the element.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

Example
								
									
Content...
Theme Mountain

Current Version