Helpers are 'authoring aids' that function as object-oriented classes for projects that need only minor composition formatting.
Text Alignment Helpers
.text-left.text-center.text-right.text-justify
Layout Helpers
.twc-left - Aligns Element Left
- Example:
- This div is aligned to the left
.twc-right - Aligns Element Right
- Example:
- This div is aligned to the right
.clear - Clears a Pre-Existing Floated Element
- Example:
- This div is full-width because the float has been 'cleared'
Display Helpers
- .hidden - Removes Element from Browser View
- .invisible - Removes Element from Browser View but Maintains its Occupied Space
- .desktop-hidden - Removes Element from Browser View in Desktop Only
- Example:
- This box shouldn't show on desktop, but should show on tablet and mobile.
- .tablet-hidden - Removes Element from Browser View in Tablet AND Mobile
- Example:
- This box shouldn't show on tablet or mobile, but should show on desktop.
- .mobile-hidden - Removes Element from Browser View in Mobile Only
- Example:
- This box shouldn't show on mobile, but should show on desktop and tablet.
- Desktop and Mobile Only - Removes Element from Browser View in Tablet Only
- Example:
- This box shouldn't show on tablet, but should show on desktop and mobile.
Box below should not display on desktop
Box below should not display on tablet or mobile
Box below should not display on mobile
Box below should not display on tablet
Images Helpers
.image-left - Left Aligns Image Relative to Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, eligendi, dignissimos, molestias quidem architecto unde illo maxime officia maiores amet hic nam rerum vel! Architecto, temporibus, delectus sint voluptate adipisci laboriosam nulla recusandae dolore facilis ullam suscipit vitae voluptas amet iure vero vel commodi. Rerum, et, ad, reprehenderit eos consequuntur sequi temporibus exercitationem eligendi possimus cupiditate enim eveniet quaerat doloremque nam ratione assumenda magni. Veritatis, ratione, recusandae explicabo natus voluptatem odio omnis vitae ipsum iure harum. Amet, ab porro quidem magni perferendis quasi nemo sequi aliquid alias dignissimos illum ad! Culpa, enim, dignissimos ullam non earum sint cumque molestias porro.
.image-right - Right Aligns Image Relative to Text
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, eligendi, dignissimos, molestias quidem architecto unde illo maxime officia maiores amet hic nam rerum vel! Architecto, temporibus, delectus sint voluptate adipisci laboriosam nulla recusandae dolore facilis ullam suscipit vitae voluptas amet iure vero vel commodi. Rerum, et, ad, reprehenderit eos consequuntur sequi temporibus exercitationem eligendi possimus cupiditate enim eveniet quaerat doloremque nam ratione assumenda magni. Veritatis, ratione, recusandae explicabo natus voluptatem odio omnis vitae ipsum iure harum. Amet, ab porro quidem magni perferendis quasi nemo sequi aliquid alias dignissimos illum ad! Culpa, enim, dignissimos ullam non earum sint cumque molestias porro.
Border Helpers
.border-radius
- Example:
- This box has a border radius of 3px. (Base Default)
.bordered-solid
- Example:
- This box has a bordered-solid class applied to it.
.bordered-dotted
- Example:
- This box has a bordered-dotted class applied to it.