CSS Support

We need to add a CSS file to use all element in any HTML element's

@import "https://www.julyservices.com/jds/ui-patterns/scss/jds-app.css";

Also we can load or use indivisually elements one by one. If we want to use seperate elements css file, we should avoide loading "jds-app.css" file

Like: we can use only badge stle for my project. So we can add only "badge.css" file for my project

@import "https://www.julyservices.com/jds/ui-patterns/scss/1-base/badge.css";

Some CSS Support:

Height

Height by pixel

jds-min-height5 jds-min-height10, jds-min-height15, jds-min-height20, jds-min-height30, jds-min-height35, ... jds-min-height90, jds-min-height95, jds-min-height100

And jds-min-height5pr, jds-min-height10pr, jds-min-height15pr, jds-min-height20pr, jds-min-height25pr, jds-min-height30pr, jds-min-height35pr, ..., jds-min-height90pr, jds-min-height95pr, jds-min-height100pr

And jds-min-height150, jds-min-height200, jds-min-height250, jds-min-height300, jds-min-height400, jds-min-height500

Height by pixel Height

jds-max-height0 jds-max-height5, jds-max-height10, jds-max-height15, jds-max-height20, ... jds-max-height95, jds-max-height100,

and jds-max-height150 jds-max-height200, jds-max-height250, jds-max-height300, jds-max-height350, jds-max-height400, jds-max-height450, jds-max-height500,

and jds-max-height600, jds-max-height700, jds-max-height800, jds-max-height900, jds-max-height1000, jds-max-height1100

and jds-max-height0vh, jds-max-height10vh, jds-max-height15vh, jds-max-height20vh, ... jds-max-height95vh, jds-max-height100vh

and jds-min-height150vh, jds-min-height200vh, jds-min-height250vh, jds-min-height300vh, jds-min-height400vh, jds-min-height500vh

Height by Percentage (%)

jds-height-auto
jds-height10pr, jds-height20pr, jds-height30pr, jds-height40pr, jds-height50pr, ... jds-height80pr, jds-height90pr, jds-height100pr

And jds-max-height5pr, jds-max-height10pr, jds-max-height15pr, jds-max-height20pr, jds-max-height25pr, jds-max-height30pr, jds-max-height35pr, ..., jds-max-height90pr, jds-max-height95pr, jds-max-height100pr

And jds-min-height10pr, jds-min-height20pr, jds-min-height30pr, jds-min-height40pr, jds-min-height50pr, jds-min-height60pr, jds-min-height70pr, jds-min-height80pr, jds-min-height90pr, jds-min-height100pr

Width

Max width by Viewport width

jds-max-width10vw, jds-max-width20vw, jds-max-width30vw, jds-max-width40vw, jds-max-width50vw, ... jds-max-width90vw, jds-max-width100vw

Width by Percentage (%)

jds-width-auto
jds-width10pr, jds-width20pr, jds-width30pr, jds-width40pr, jds-width50pr, ... jds-width80pr, jds-width90pr, jds-width100pr

Width by pixel

jds-min-width5 jds-min-width10, jds-min-width15, jds-min-width20, jds-min-width30, jds-min-width35, ... jds-min-width90, jds-min-width95, jds-min-width100, jds-min-width110, jds-min-width120, jds-min-width130, jds-min-width140, jds-min-width150, jds-min-width160, jds-min-width170, jds-min-width180, jds-min-width90, jds-min-width200, jds-min-width250

Width by Viewport width

jds-min-width5vh jds-min-width10vh, jds-min-width15vh, jds-min-width20vh, jds-min-width25vh ... jds-min-width90vh jds-min-width95vh jds-min-width100vh

Max Width by Pixel

jds-max-width0, jds-max-width10, jds-max-width15, jds-max-width20, jds-max-width25, jds-max-width30, ... jds-max-width95, jds-max-width100 and jds-max-width150, jds-max-width200, jds-max-width250, jds-max-width300, jds-max-width400, jds-max-width500, ... jds-max-width1000, jds-max-width1100

Max Width by Viewport width

jds-max-width10vw, jds-max-width20vw, jds-max-width30vw, jds-max-width40vw, jds-max-width50vw, ... jds-max-width90vw, jds-max-width100vw

float CSS class

float-left, float-right, float-none
float-s-left, float-s-right, float-s-none
float-m-left, float-m-right, float-m-none
float-l-left, float-l-right, float-l-none
float-xl-left, float-xl-right, float-xl-none

Vertical Align CSS class

v-align-baseline, v-align-text-top, v-align-text-bottom, v-align-sub, v-align-super, v-align-top, v-align-middle, v-align-bottom, v-align-inherit, v-align-unset

Motion CSS class. Like:- transition: all .5s; transition-timing-function: ease-in;

ease, ease-in, ease-out, ease-in-out

Margine CSS

Margine all around

m5, m10, m15, m20, m25 ... m90, m95, and m100

Margine Left and Right

mlr5, mlr10, mlr15, mlr20, mlr25 ... mlr90, mlr95, and mlr100

Margine Top and Bottom

mtb5, mtb10, mtb15, mtb20, mtb25 ... mtb90, mtb95, and mtb100

Margine Right

mr5, mr10, mr15, mr20, mr25 ... mr90, mr95, and mr100

Margine Bottom

mb5, mb10, mb15, mb20, mb25 ... mb90, mb95, and mb100

Margine Left

ml5, ml10, ml15, ml20, ml25 ... ml90, ml95, and ml100

Margine Auto

mltop, mrbottom, mlauto, and mrauto

Overflow CSS class

overflow-hidden, overflow-auto, overflow-scroll, overflow-visible, overflow-unset
overflow-x-auto, overflow-y-auto

Motion or Ease CSS class

ease, ease-in, ease-out, ease-in-out

NAV CSS class

jds-nav, nav-link, nav-links, active, disable
nav-xxl, nav-xl, nav-l, nav-m, nav-xxl, nav-s, nav-xs, nav-xxs
nav-justify-right, nav-justify-center, nav-justify-left
navbar-responsive, nav-header, nav-toggle, click-checkbox

We can use TAG mark for hilight text or draw atansion in a text. Or add CSS class jds-mark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic et obcaecati soluta! Vero laborum, minima voluptatem, reiciendis nihil sequi rerum magni temporibus quod explicabo obcaecati placeat iusto quos voluptas sunt!

Backdrop Filter CSS

filter-blur4, filter-blur8, filter-blur12

Image

img-responsive