Helper Classes

Home Elements Helper Classes

Cislunar has several useful classes for height, width, fonts, etc. You can also use Bootstrap utilities classes.

Colors

color-1, color-2, color-3, color-4, text-color, text-color-invert and many other are defined in main CSS file.

Class Description
.cl-bg-color-1 Sets the background color to color-1.
.cl-bg-color-2 Sets the background color to color-2.
.cl-bg-color-3 Sets the background color to color-3.
.cl-bg-color-4 Sets the background color to color-4.
.cl-bg-color-3-o7 Sets the background color to color-3 with 70% transparency.
.cl-bg-color-4-o4 Sets the background color to color-4 with 40% transparency.
.cl-dark Sets the background color to dark color (black with some transparency).
.cl-text-color-1 Sets the text color to color-1.
.cl-text-color-2 Sets the text color to color-2.
.cl-text-color-3 Sets the text color to color-3.
.cl-text-color-4 Sets the text color to color-4.
.cl-text-color Sets the text color to default text color.
.cl-text-color-invert Sets the text color to color which is opposite to default text color.
.cl-spinner-color-1 Sets the spinner color to color-1.
.cl-spinner-color-2 Sets the spinner color to color-2.
.cl-spinner-color-3 Sets the spinner color to color-3.
.cl-spinner-color-4 Sets the spinner color to color-4.
Horizontal Line
Class Description
.cl-hr-short Use it with hr tag to make short heading hr.
.cl-hr-short-half Same as .cl-hr-short except height is half.
Title
Class Description
.cl-title Use it with with heading tags like, h1, h2, etc to create section title
.cl-subtitle It is used to create section sub-title
Transition Duration
Class Description
.cl-transition-duration-300ms Sets the transition duration to 300ms
.cl-hover-transition-duration-300ms Sets the transition duration to 300ms only on when hover
.cl-transition-duration-500ms Sets the transition duration to 500ms
.cl-hover-transition-duration-500ms Sets the transition duration to 500ms only on when hover
.cl-transition-duration-1s Sets the transition duration to 1s
.cl-hover-transition-duration-1s Sets the transition duration to 1s only on when hover
Height
Class Description
.cl-min-h-150px Sets minimum height to 150px
.cl-min-h-350px Sets minimum height to 350px
.cl-h-50px Sets height to 50px
.cl-h-80px Sets height to 80px
.cl-h-100px Sets height to 100px
.cl-h-150px Sets height to 150px
.cl-h-300px Sets height to 300px
.cl-h-350px Sets height to 350px
.cl-h-450px Sets height to 450px
.cl-h-600px Sets height to 600px
.cl-fullscreen-height Sets height to full height of screen
Width
Class Description
.cl-max-w-500px Sets Maximum Width to 500px and Width to 100%
.cl-max-w-800px Sets Maximum Width to 800px and Width to 100%
.cl-w-50px Sets the width to 50px
.cl-w-80px Sets the width to 80px
.cl-w-100px Sets the width to 100px
.cl-w-150px Sets the width to 150px
.cl-w-200px Sets the width to 200px
.cl-w-85 Sets the width to 85%
Image Sizing
Class Description
.cl-img-50px Sets Image height and width to 50px
.cl-img-80px Sets Image height and width to 80px
.cl-img-100px Sets Image height and width to 100px
Font Sizing
Class Description
.cl-font-15 Sets font size to 15px
.cl-font-17 Sets font size to 17px
.cl-font-24 Sets font size to 24px
.cl-font-40 Sets font size to 40px
.cl-font-70 Sets font size to 70px
.cl-font-160 Sets font size to 160px
Others
Class Description
.cl-text-underline Underlines the text
.cl-transfom-big Scale the element by 1.07