Display
Display controls how an element is displayed, including its alignment, spacing and size.
| Class | Scss Definition | Compiled CSS |
|---|---|---|
u-block
|
display: block!important;
|
Stays the same |
u-inline
|
display: inline!important;
|
Stays the same |
u-grid
|
display: grid!important;
|
Stays the same |
u-flex
|
display: flex!important;
|
Stays the same |
u-inline-flex
|
display: inline-flex!important;
|
Stays the same |
u-contents
|
display: contents!important;
|
Stays the same |
u-contents-mobile
|
@media #{$break1} { {display: contents!important;} }
|
@media (max-width:767.99px) { display: contents!important; }
|
u-box-sizing-content
|
box-sizing: content-box!important;
|
Stays the same |
u-sep-inline-start
|
border-inline-start: solid pxToRem(1) hsl(var(--color-border))!important;
|
border-inline-start: solid 0.0625rem hsl(var(--color-border))!important;
|
u-sep-block-start
|
border-block-start: solid pxToRem(1) hsl(var(--color-border))!important;
|
border-block-start: solid 0.0625rem hsl(var(--color-border))!important;
|
u-sep-block-end
|
border-block-end: solid pxToRem(1) hsl(var(--color-border))!important;
|
border-block-end: solid 0.0625rem hsl(var(--color-border))!important;
|
u-gap-2
|
gap: pxToRem(2)!important;
|
gap: 0.125rem!important;
|
u-gap-4
|
gap: pxToRem(4)!important;
|
gap: 0.25rem!important;
|
u-gap-8
|
gap: pxToRem(8)!important;
|
gap: 0.5rem!important;
|
u-gap-12
|
gap: pxToRem(12)!important;
|
gap: 0.75rem!important;
|
u-gap-16
|
gap: pxToRem(16)!important;
|
gap: 1rem!important;
|
u-gap-24
|
gap: pxToRem(24)!important;
|
gap: 1.5rem!important;
|
u-gap-32
|
gap: pxToRem(32)!important;
|
gap: 2eem!important;
|
u-column-gap-2
|
column-gap: pxToRem(2)!important;
|
column-gap: 0.125rem!important;
|
u-column-gap-4
|
column-gap: pxToRem(4)!important;
|
column-gap: 0.25rem!important;
|
u-column-gap-8
|
column-gap: pxToRem(8)!important;
|
column-gap: 0.5rem!important;
|
u-column-gap-12
|
column-gap: pxToRem(12)!important;
|
column-gap: 0.75rem!important;
|
u-column-gap-16
|
column-gap: pxToRem(16)!important;
|
column-gap: 1rem!important;
|
u-column-gap-24
|
column-gap: pxToRem(24)!important;
|
column-gap: 1.5rem!important;
|
u-column-gap-32
|
column-gap: pxToRem(32)!important;
|
column-gap: 2rem!important;
|
u-row-gap-2
|
row-gap: pxToRem(2)!important;
|
row-gap: 0.125rem!important;
|
u-row-gap-4
|
row-gap: pxToRem(4)!important;
|
row-gap: 0.25rem!important;
|
u-row-gap-8
|
row-gap: pxToRem(8)!important;
|
row-gap: 0.5rem!important;
|
u-row-gap-12
|
row-gap: pxToRem(12)!important;
|
row-gap: 0.75rem!important;
|
u-row-gap-16
|
row-gap: pxToRem(16)!important;
|
row-gap: 1rem!important;
|
u-row-gap-24
|
row-gap: pxToRem(24)!important;
|
row-gap: 1.5rem!important;
|
u-row-gap-32
|
row-gap: pxToRem(32)!important;
|
row-gap: 2rem!important;
|
u-flex-vertical
|
display:flex!important; flex-direction:column!important;
|
Stays the same |
u-flex-vertical-mobile
|
@media #{$break1} { flex-direction:column!important; }
|
@media (max-width:767.99px) { flex-direction:column!important; }
|
u-flex-wrap
|
flex-wrap: wrap!important;
|
Stays the same |
u-stretch
|
flex: 1!important;
|
Stays the same |
u-flex-basis-140
|
flex-basis: pxToRem(140)!important;
|
flex-basis: 8.75rem!important;
|
u-flex-basis-250
|
flex-basis: pxToRem(250)!important;
|
flex-basis: 15.625rem!important;
|
u-flex-basis-500
|
flex-basis: pxToRem(500)!important;
|
flex-basis: 31.25rem!important;
|
u-flex-basis-50-percent
|
flex-basis: 50%!important;
|
Stays the same |
u-flex-basis-100-percent
|
flex-basis: 100%!important;
|
Stays the same |
u-flex-shrink-0
|
flex-shrink: 0!important;
|
Stays the same |
u-flex-basis-auto
|
flex-basis: auto!important;
|
Stays the same |
u-grid-columns-auto-1fr
|
grid-template-columns: auto 1fr!important;
|
Stays the same |
u-width-fit-content
|
inline-size:fit-content!important;
|
Stays the same |
u-width-full-line
|
inline-size: 100%!important;
|
Stays the same |
u-width-140
|
inline-size: pxToRem(140)!important;
|
inline-size: 8.75rem!important;
|
u-width-150
|
inline-size: pxToRem(150)!important;
|
inline-size: 9.375rem!important;
|
u-width-200
|
inline-size: pxToRem(200)!important;
|
inline-size: 12.5rem;!important
|
u-width-250
|
inline-size: pxToRem(250)!important;
|
inline-size: 15.625rem!important;
|
u-width-600
|
inline-size: pxToRem(600)!important;
|
inline-size: 37.5rem!important;
|
u-width-280-desktop
|
@media #{$break3open} { inline-size: pxToRem(280)!important; }
|
@media (min-width:1199px) { inline-size: 17.25rem!important; }
|
u-min-width-0
|
min-inline-size: 0!important; /_use to solve flexbox un-shrink problem;_/
|
Stays the same |
u-min-width-200
|
min-inline-size: pxToRem(200)!important;
|
min-inline-size: 25rem!important;
|
u-min-width-100-percent
|
min-inline-size: 100%!important;
|
Stays the same |
u-max-width-250
|
max-inline-size: pxToRem(250)!important;
|
max-inline-size: 15.625rem!important;
|
u-max-width-300
|
max-inline-size: pxToRem(300)!important;
|
max-inline-size: 18.75rem!important;
|
u-max-width-350
|
max-inline-size: pxToRem(350)!important;
|
max-inline-size: 21.875rem!important;
|
u-max-width-400
|
max-inline-size: pxToRem(400)!important;
|
max-inline-size: 25rem!important;
|
u-max-width-450
|
max-inline-size: pxToRem(450)!important;
|
max-inline-size: 28.125rem!important;
|
u-max-width-500
|
max-inline-size: pxToRem(500)!important;
|
max-inline-size: 31.25rem!important;
|
u-max-width-600
|
max-inline-size: pxToRem(600)!important;
|
max-inline-size: 37.5rem!important;
|
u-max-width-650
|
max-inline-size: pxToRem(650)!important;
|
max-inline-size: 40.625rem!important;
|
u-max-width-700
|
max-inline-size: pxToRem(700)!important;
|
max-inline-size: 43.75rem!important;
|
u-max-width-100-percent
|
max-inline-size: 100%!important;
|
Stays the same |
u-height-100-percent
|
block-size: 100%!important;
|
Stays the same |
u-height-auto
|
block-size: auto!important;
|
Stays the same |
u-full-screen-height
|
block-size: 100vh!important; block-size: 100lvh!important;
|
Stays the same |
u-min-height-100
|
min-block-size: pxToRem(100)!important;
|
min-block-size: 6.25rem!important;
|
u-min-height-184
|
min-block-size: pxToRem(184)!important;
|
min-block-size: 11.5rem!important;
|
u-min-height-100-percent
|
min-block-size:100%!important;
|
Stays the same |
u-max-height-200
|
max-block-size: pxToRem(200)!important;
|
max-block-size: 12.5rem!important;
|
Alignments
In the Appwrite console we control alignments by using:
| Class | CSS |
|---|---|
u-main-center
|
justify-content: center!important;
|
u-main-space-between
|
justify-content: space-between!important;
|
u-main-end
|
justify-content: end!important;
|
u-cross-start
|
align-items: start!important;
|
u-cross-baseline
|
align-items: baseline!important;
|
u-cross-center
|
align-items: center!important;
|
u-cross-end
|
align-items: end!important;
|
u-cross-child-start
|
align-self: start!important;
|
u-cross-child-center
|
align-self: center!important;
|
u-cross-child-end
|
align-self: end!important;
|
1
2
3
<div class="u-flex u-main-space-between u-min-width-100-percent card">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>