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.
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.
div
. This element add margin bottom as content level.Source
Clear float
Use .clearfix
class to clear any float CSS.
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.
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-… |
|||||
.hidden-under-… |
(always visible) | ||||
.hidden-under-equal-… |
(always hidden) | ||||
.hidden-over-… |
(always hidden) | ||||
.hidden-over-equal-… |
(always hidden) | ||||
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.