Appearance - Helper Classes

Statistics Invoices Schedule
Helper classes
Besides basic typography classes, helper classes are an extra set of additional predefined classes, that can be applied to different content or layout elements and components. Helper classes are custom additions mostly, written especially for current layout, except common BS helpers. Below is a summarized table with all available classes, descriptions and content type.
Styling
.cursor-move Any element Changes cursor style to move. Mostly used in sortable components
.cursor-pointer Any element Changes cursor style to pointer. Useful for user interaction feedback
.cursor-default Any element Changes cursor style to default
.border-* Any element Adds 1px border to the element, if it doesn't have it already. Available in 4 positions: top, bottom, left, right
.border-lg Any element Changes border width to 2px
.border-*-lg Any element Does the same as .border-lg, but here you can specify border position: left, right, top and bottom
.border-xlg Any element Changes border width to 3px
.border-*-xlg Any element Does the same as .border-xlg, but here you can specify border position: left, right, top and bottom
.no-border-radius Any element Removes border radius from the element. Supports 4 sidebar separately, to use add .*-top (bottom, left, right) suffix
.text-highlight Text only Highlights inline element, background class is required
.heading-divided Headings only Adds bottom border to the heading with proper spacing
Transformations
.rotate-45 Any element Rotates element 45 degreees clockwise
.rotate-45-inverse Any element Rotates element 45 degreees counterclockwise
.rotate-90 Any element Rotates element 90 degreees clockwise
.rotate-90-inverse Any element Rotates element 90 degreees counterclockwise
.rotate-180 Any element Rotates element 180 degreees clockwise
.rotate-180-inverse Any element Rotates element 180 degreees counterclockwise
.spinner Any element Adds infinite clockwise rotation
.spinner-inverse Any element Adds infinite counterclockwise rotation
Positioning
.center-block Any element Set an element to display: block and center via margin
.position-relative Any element Changes element's positiion to relative
.position-static Any element Changes element's positiion to static
.pull-left Any element Float an element to the left with a class
.pull-right Any element Float an element to the right with a class
.pull-right-xs
*-sm, *-md, *-lg		 Any element Float an element to the right on specified screen sizes only
.valign-top
*-middle, *-bottom, *-baseline
*-text-top, *-text-bottom 		Any element Helper classes for vertical element alignment
.clearfix Any element Easily clear floats by adding .clearfix to the parent element
Images
.img-responsive Images only Applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element
.img-rounded Images only Adds rounded 3px border radius to the image
.img-circle Images only Makes image fully rounded
.img-thumbnail Images only Adds grey frame with white background color
.img-lg (*-sm, *-xs) Images only Optional custom sizing. Added specially for media lists
Appearance
.width-100
*-200, *-300 ... *-800		 Dropdown menus Sets a fixed width of the dropdown menu in pixels
.pre-scrollable Containers Sets a max-height of 350px and provide a y-axis scrollbar
.overflow-hidden Containers Clips content overflow, makes the rest of the content invisible
.overflow-visible Containers Shows content overflow, makes the rest of the content visible
.overflow-auto Containers Clips content overflow, makes the rest of the content scrollable
.display-block Any element Displays an element as a block element
.display-inline-block Any element Displays an element as an inline-level block container
.show Block element Force an element to be shown. Available for block level toggling only
.hidden Block element Force an element to be hidden. Available for block level toggling only
.invisible Any element Can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document
.text-hide Text only Helps replace an element's text content with a background image
.sr-only Any element Hides an element to all devices except screen readers
Spacing
.content-group
*-lg, *-sm		 Any element Wrap any component in .content-group to add 10px, 20px or 30px bottom margin
.position-left Inline elements Add extra right margin to the element
.position-right Inline elements Add extra left margin to the element
.no-edge-top
(*-bottom, *-left, *-right)		 Any element Removes the top edge of the elements, works with absolute, fixed and relative positioned elements
.m-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px margin to the element
.mt-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px top margin to the element
.mb-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px bottom margin to the element
.ml-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px left margin to the element
.mr-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px right margin to the element
.no-margin Any element Removes element's margin
.no-margin-top
(*-bottom, *-left, *-right)		 Any element Removes margin of the specified side
.p-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px padding to the element
.pt-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px top padding to the element
.pb-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px bottom padding to the element
.pl-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px left padding to the element
.pr-5
(*-10, *-15, *-20)		 Any element Add 5, 10, 15 and 20 px right padding to the element
.no-padding Any element Removes element's padding
.no-padding-top
(*-bottom, *-left, *-right)		 Any element Removes padding of the specified side
© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com