Skip to content

Latest commit

 

History

History
173 lines (159 loc) · 8.94 KB

u87-0.9.19-cheatsheet.md

File metadata and controls

173 lines (159 loc) · 8.94 KB

u87.css v0.9.19 grid cheatsheet

grid v0.9.7

breakpoint xs sm md lg xl xxl
screen width <576px >=576px >=768px >=992px >=1200px >=1400px
Containers:
.container-fluid 100% 100% 100% 100% 100% 100%
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
Hide:
.hide-on-mobile hide hide show show show show
.hide-on-desktop show show hide hide hide hide
.hide-xs hide show show show show show
.hide-sm show hide show show show show
.hide-md show show hide show show show
.hide-lg show show show hide show show
.hide-xl show show show show hide show
.hide-xxl show show show show show hide
.hide hide hide hide hide hide hide
Gap:
.gap (0.5rem) yes yes yes yes yes yes
.gap-row (0.5rem) yes yes yes yes yes yes
.gap-col (0.5rem) yes yes yes yes yes yes
.nogap (0) yes yes yes yes yes yes
.nogap-row (0) yes yes yes yes yes yes
.nogap-col (0) yes yes yes yes yes yes

flex grid v0.9.8

breakpoint xs sm md lg xl xxl
screen width <576px >=576px >=768px >=992px >=1200px >=1400px
Flex containers:
.flex-xs flex flex flex flex flex flex
.flex-sm block flex flex flex flex flex
.flex block block flex flex flex flex
.flex-md block block flex flex flex flex
.flex-lg block block block flex flex flex
.flex-xl block block block block flex flex
.flex-xxl block block block block block flex
.inline-flex-xs i-flex i-flex i-flex i-flex i-flex i-flex
.inline-flex-sm block i-flex i-flex i-flex i-flex i-flex
.inline-flex block block i-flex i-flex i-flex i-flex
.inline-flex-md block block i-flex i-flex i-flex i-flex
.inline-flex-lg block block block i-flex i-flex i-flex
.inline-flex-xl block block block block i-flex i-flex
.inline-flex-xxl block block block block block i-flex
Flex items:
.flex-f-XX (1-24) XX XX XX XX XX XX
.flex-w-XX (percent) XX XX XX XX XX XX
.flex-w-xs-XX (percent) XX XX XX XX XX XX
.flex-w-sm-XX (percent) 100% XX XX XX XX XX
.flex-w-md-XX (percent) 100% 100% XX XX XX XX
.flex-w-lg-XX (percent) 100% 100% 100% XX XX XX
.flex-w-xl-XX (percent) 100% 100% 100% 100% XX XX
.flex-w-xxl-XX (percent) 100% 100% 100% 100% 100% XX

Percent values: 5 - 1/20, 6 - 1/16, 8 - 1/12, 10 - 1/10, 12 - 1/8, 14 - 1/7, 15, 16 - 1/6, 20 - 1/5, 25 - 1/4, 30, 33 - 1/3, 35, 40 - 2/5, 45, 50 - 1/2, 55, 60 - 3/5, 65, 66 - 2/3, 70, 75 - 3/4, 80 - 4/5, 85, 90, 95, 100

breakpoint xs sm md lg xl xxl
screen width <576px >=576px >=768px >=992px >=1200px >=1400px
Utils:
.flexbox-row yes yes yes yes yes yes
.flexbox-row-reverse yes yes yes yes yes yes
.flexbox-col yes yes yes yes yes yes
.flexbox-col-reverse yes yes yes yes yes yes
.flexbox-nowrap yes yes yes yes yes yes
.flexbox-wrap yes yes yes yes yes yes
.flexbox-wrap-reverse yes yes yes yes yes yes
.align-self-XX (value) XX XX XX XX XX XX
.align-items-XX (value) XX XX XX XX XX XX
.align-content-XX _(value) XX XX XX XX XX XX
.justify-content-XX (value) XX XX XX XX XX XX
.order-XX (1-24, first, last) XX XX XX XX XX XX

css grid v0.9.1

Standard syntax:

  • Edge 16+ and 76+, FF 52+, Chrome 57+, Safari 10.1+
  • Android FF 68+, Android Chrome 78+, iOS Safari 10.3+, Samsung Internet 6.2+

IE11 - Edge 15: Please use the flex grid!

breakpoint xs sm md lg xl xxl
screen width <576px >=576px >=768px >=992px >=1200px >=1400px
Grid containers:
.grid-xs grid grid grid grid grid grid
.grid-sm block grid grid grid grid grid
.grid block block grid grid grid grid
.grid-md block block grid grid grid grid
.grid-lg block block block grid grid grid
.grid-xl block block block block grid grid
.grid-xxl block block block block block grid
.inline-grid-xs i-grid i-grid i-grid i-grid i-grid i-grid
.inline-grid-sm block i-grid i-grid i-grid i-grid i-grid
.inline-grid block block i-grid i-grid i-grid i-grid
.inline-grid-md block block i-grid i-grid i-grid i-grid
.inline-grid-lg block block block i-grid i-grid i-grid
.inline-grid-xl block block block block i-grid i-grid
.inline-grid-xxl block block block block block i-grid
Grid container sizes:
.grid-rows-XX (1-24) XX XX XX XX XX XX
.grid-rows-xs-XX (1-24) XX XX XX XX XX XX
.grid-rows-sm-XX (1-24) no XX XX XX XX XX
.grid-rows-md-XX (1-24) no no XX XX XX XX
.grid-rows-lg-XX (1-24) no no no XX XX XX
.grid-rows-xl-XX (1-24) no no no no XX XX
.grid-rows-xxl-XX (1-24) no no no no no XX
.grid-cols-XX (1-24) XX XX XX XX XX XX
.grid-cols-xs-XX (1-24) XX XX XX XX XX XX
.grid-cols-sm-XX (1-24) no XX XX XX XX XX
.grid-cols-md-XX (1-24) no no XX XX XX XX
.grid-cols-lg-XX (1-24) no no no XX XX XX
.grid-cols-xl-XX (1-24) no no no no XX XX
.grid-cols-xxl-XX (1-24) no no no no no XX
Cells:
.cell yes yes yes yes yes yes
.cell-rows-XX (1-24) XX XX XX XX XX XX
.cell-rows-xs-XX (1-24) XX XX XX XX XX XX
.cell-rows-sm-XX (1-24) no XX XX XX XX XX
.cell-rows-md-XX (1-24) no no XX XX XX XX
.cell-rows-lg-XX (1-24) no no no XX XX XX
.cell-rows-xl-XX (1-24) no no no no XX XX
.cell-rows-xxl-XX (1-24) no no no no no XX
.cell-cols-XX (1-24) XX XX XX XX XX XX
.cell-cols-xs-XX (1-24) XX XX XX XX XX XX
.cell-cols-sm-XX (1-24) no XX XX XX XX XX
.cell-cols-md-XX (1-24) no no XX XX XX XX
.cell-cols-lg-XX (1-24) no no no XX XX XX
.cell-cols-xl-XX (1-24) no no no no XX XX
.cell-cols-xxl-XX (1-24) no no no no no XX
Cell position:
.cell-start-row-XX (1-24) XX XX XX XX XX XX
.cell-start-col-XX (1-24) XX XX XX XX XX XX
.cell-end-row-XX (1-24) XX XX XX XX XX XX
.cell-end-col-XX (1-24) XX XX XX XX XX XX
Cell .ms-*-XX fixes:
.ms-cell-start-row-XX (1-24) XX XX XX XX XX XX
.ms-cell-start-col-XX (1-24) XX XX XX XX XX XX
.ms-cell-rows-XX (1-24) XX XX XX XX XX XX
.ms-cell-cols-XX (1-24) XX XX XX XX XX XX
Utils:
.grid-flow-row yes yes yes yes yes yes
.grid-flow-row-dense yes yes yes yes yes yes
.grid-flow-col yes yes yes yes yes yes
.grid-flow-col-dense yes yes yes yes yes yes
.grid-flow-dense yes yes yes yes yes yes
.grid-auto-rows-auto yes yes yes yes yes yes
.grid-auto-rows-min yes yes yes yes yes yes
.grid-auto-rows-max yes yes yes yes yes yes
.grid-auto-cols-auto yes yes yes yes yes yes
.grid-auto-cols-min yes yes yes yes yes yes
.grid-auto-cols-max yes yes yes yes yes yes
.justify-self-XX (value) XX XX XX XX XX XX
.justify-items-XX (value) XX XX XX XX XX XX
Utils from the flex grid:
.align-self-XX (value) XX XX XX XX XX XX
.align-items-XX (value) XX XX XX XX XX XX
.align-content-XX (value) XX XX XX XX XX XX
.justify-content-XX (value) XX XX XX XX XX XX
.order-XX (1-24, first, last) XX XX XX XX XX XX