Display

v-0.0.0

How it works

Display classes are responsive and all use the breakpoint infixes

Variantes

Class	Value
d--none	display: none;
d--initial	display: initial;
d--inline	display: inline;
d--block	display: block;
d--flex	display: flex;
d--grid	display: grid;
d--inlineBlock	display: inline-block;
d--inlineFlex	display: inline-flex;
d--inlineGrid	display: inline-grid;

Examples

.d--none {
    display: none !important;
}

@media (min-width: 576px) {
    .d--md--none {
        display: none !important;
    }
}

Display: flex

Justify content

Justify content classes are responsive and all use the breakpoint infixes

Class	Value
justifyContent--initial	justify-content: initial;
justifyContent--normal	justify-content: normal;
justifyContent--baseline	justify-content: baseline;
justifyContent--start	justify-content: flex-start;
justifyContent--end	justify-content: flex-end;
justifyContent--center	justify-content: center;
justifyContent--around	justify-content: space-around;
justifyContent--between	justify-content: space-between;
justifyContent--stretch	justify-content: stretch;
justifyContent--evenly	justify-content: space-evenly;

Align items

Align items classes are responsive and all use the breakpoint infixes

Class	Value
alignItems--initial	align-items: initial;
alignItems--normal	align-items: normal;
alignItems--baseline	align-items: baseline;
alignItems--start	align-items: flex-start;
alignItems--end	align-items: flex-end;
alignItems--center	align-items: center;
alignItems--around	align-items: space-around;
alignItems--between	align-items: space-between;
alignItems--stretch	align-items: stretch;
alignItems--evenly	align-items: space-evenly;

Flex wrap

Flex wrap classes are responsive and all use the breakpoint infixes

Class	Value
flexWrap--initial	flex-wrap: initial;
flexWrap--inherit	flex-wrap: inherit;
flexWrap--nowrap	flex-wrap: nowrap;
flexWrap--wrap	flex-wrap: flex-wrap;
flexWrap--wrap-reverse	flex-wrap: flex-wrap-reverse;
flexWrap--revert	flex-wrap: revert;
flexWrap--revert-layer	flex-wrap: revert-layer;
flexWrap--unset	flex-wrap: unset;