Admin Dashboard

Sidebar menus

Helpers

CSS helper classes.


Examples

Margin bottom for block level

To keep the same bottom space of block level element or layout, use .rd-block-level-margin-bottom class.

block without margin bottom
block with margin bottom
block with margin bottom

So, you can put this class into any element you want the same bottom space as block level element.

Source


                    

Margin bottom for content level

To keep same bottom space of content level element or paragraph, use .rd-content-level-margin-bottom class.

The above line is paragraph, it is already has margin bottom but this line is div. This element add margin bottom as content level.

Source



                    

Clear float

Use .clearfix class to clear any float CSS.

Float item
Float item
After float but cleared the float.

Source



                    

Screen reader only

Use .screen-reader-only class to show for screen reader only.

This is normal text. This is "for screen reader only" which does not appears on screen.

Source



                    

Fade in/out

Begins with element that contain .rd-animation, .fade classes.
To fade out add the .fade-out class, to fade in just remove the .fade-out class.

Fade content box
Fade content box

Source



                    

Responsive visibility

This text ->was hidden<- hidden in all screen sizes using .rd-hidden class.

The text below will be hidden and visible in different screen size. Try to resize the browser to see it in action.

Class Extra small <= Small - Medium - Large - Extra large >=
Hidden
.hidden-only-…
xs
sm
md
lg
xl
.hidden-under-…
xs
(always visible)
sm
md
lg
xl
.hidden-under-equal-…
xs
sm
md
lg
xl
(always hidden)
.hidden-over-…
xs
sm
md
lg
xl
(always hidden)
.hidden-over-equal-…
xs
(always hidden)
sm
md
lg
xl
Visible
.visible-only-…
xs
sm
md
lg
xl
.visible-under-…
xs
(always hidden)
sm
md
lg
xl
.visible-under-equal-…
xs
sm
md
lg
xl
(always visible)
.visible-over-…
xs
sm
md
lg
xl
(always hidden)
.visible-over-equal-…
xs
(always visible)
sm
md
lg
xl
Class Extra small <= Small - Medium - Large - Extra large >=

I'm extra small small medium large extra large screen size.