knowledge/awesome-cheatsheets
1
1
Fork 0
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-06-13 17:42:19 +00:00
Code Issues Releases Activity

docs(tailwind): grid classes

Browse Source
This commit is contained in:
Julien Le Coupanec 2020-03-29 15:22:43 +02:00
parent e592128bd3
commit 3f451ea5f4
1 changed files with 261 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

350
frontend/tailwind.css
View File

@ -5,7 +5,7 @@
/* /*
* Available breakpoints * Available breakpoints
* ---------- * --------------------
* sm: min-width: 640px; * sm: min-width: 640px;
* md: min-width: 768px; * md: min-width: 768px;
* lg: min-width: 1024px; * lg: min-width: 1024px;
@ -18,7 +18,7 @@
/* /*
* Container * Container
* ---------- * --------------------
* A component for fixing an element's width to the current breakpoint. * A component for fixing an element's width to the current breakpoint.
*/ */
@ -26,7 +26,7 @@
/* /*
* Box-sizing * Box-sizing
* ---------- * --------------------
* Utilities for controlling how the browser should calculate an element's total size. * Utilities for controlling how the browser should calculate an element's total size.
* By default, only responsive variants are generated for box-sizing utilities. * By default, only responsive variants are generated for box-sizing utilities.
*/ */
@ -36,7 +36,7 @@
/* /*
* Display * Display
* ---------- * --------------------
* Utilities for controlling the display box type of an element. * Utilities for controlling the display box type of an element.
* By default, only responsive variants are generated for display utilities. * By default, only responsive variants are generated for display utilities.
*/ */
@ -60,7 +60,7 @@
/* /*
* Floats * Floats
* ---------- * --------------------
* Utilities for controlling the wrapping of content around an element. * Utilities for controlling the wrapping of content around an element.
* By default, only responsive variants are generated for float utilities. * By default, only responsive variants are generated for float utilities.
*/ */
@ -72,7 +72,7 @@
/* /*
* Clear * Clear
* ---------- * --------------------
* Utilities for controlling the wrapping of content around an element. * Utilities for controlling the wrapping of content around an element.
* By default, only responsive variants are generated for clear utilities. * By default, only responsive variants are generated for clear utilities.
*/ */
@ -83,7 +83,7 @@
/* /*
* Object Fit * Object Fit
* ---------- * --------------------
* Utilities for controlling how a replaced element's content should be resized. * Utilities for controlling how a replaced element's content should be resized.
* By default, only responsive variants are generated for object-fit utilities. * By default, only responsive variants are generated for object-fit utilities.
*/ */
@ -96,7 +96,7 @@
/* /*
* Object Position * Object Position
* ---------- * --------------------
* Utilities for controlling how a replaced element's content should be positioned within its container. * Utilities for controlling how a replaced element's content should be positioned within its container.
* By default, only responsive variants are generated for object position utilities. * By default, only responsive variants are generated for object position utilities.
*/ */
@ -113,7 +113,7 @@
/* /*
* Overflow * Overflow
* ---------- * --------------------
* Utilities for controlling how an element handles content that is too large for the container. * Utilities for controlling how an element handles content that is too large for the container.
* By default, only responsive variants are generated for overflow utilities. * By default, only responsive variants are generated for overflow utilities.
*/ */
@ -135,7 +135,7 @@
/* /*
* Position * Position
* ---------- * --------------------
* Utilities for controlling how an element is positioned in the DOM. * Utilities for controlling how an element is positioned in the DOM.
* By default, only responsive variants are generated for position utilities. * By default, only responsive variants are generated for position utilities.
*/ */
@ -148,7 +148,7 @@
/* /*
* Top / Right / Bottom / Left * Top / Right / Bottom / Left
* ---------- * --------------------
* Utilities for controlling the placement of positioned elements. * Utilities for controlling the placement of positioned elements.
* By default, only responsive variants are generated for top, right, bottom, left, and inset utilities. * By default, only responsive variants are generated for top, right, bottom, left, and inset utilities.
*/ */
@ -170,7 +170,7 @@
/* /*
* Visibility * Visibility
* ---------- * --------------------
* Utilities for controlling the visibility of an element. * Utilities for controlling the visibility of an element.
* By default, only responsive variants are generated for visibility utilities. * By default, only responsive variants are generated for visibility utilities.
*/ */
@ -180,7 +180,7 @@
/* /*
* Z-Index * Z-Index
* ---------- * --------------------
* Utilities for controlling the stack order of an element. * Utilities for controlling the stack order of an element.
* By default, only responsive variants are generated for z-index utilities. * By default, only responsive variants are generated for z-index utilities.
*/ */
@ -197,9 +197,12 @@
* FLEXBOX * FLEXBOX
* ******************************************************************************************* */ * ******************************************************************************************* */
.flex /* display: flex; */
.inline-flex /* display: inline-flex; */
/* /*
* Flex Direction * Flex Direction
* ---------- * --------------------
* Utilities for controlling the direction of flex items. * Utilities for controlling the direction of flex items.
* By default, only responsive variants are generated for flex-direction utilities. * By default, only responsive variants are generated for flex-direction utilities.
*/ */
@ -211,7 +214,7 @@
/* /*
* Flex Wrap * Flex Wrap
* ---------- * --------------------
* Utilities for controlling how flex items wrap. * Utilities for controlling how flex items wrap.
* By default, only responsive variants are generated for flex-wrap utilities. * By default, only responsive variants are generated for flex-wrap utilities.
*/ */
@ -222,7 +225,7 @@
/* /*
* Align Items * Align Items
* ---------- * --------------------
* Utilities for controlling how flex items are positioned along a container's cross axis. * Utilities for controlling how flex items are positioned along a container's cross axis.
* By default, only responsive variants are generated for align-items utilities. * By default, only responsive variants are generated for align-items utilities.
*/ */
@ -235,7 +238,7 @@
/* /*
* Align Content * Align Content
* ---------- * --------------------
* Utilities for controlling how lines are positioned in multi-line flex containers. * Utilities for controlling how lines are positioned in multi-line flex containers.
* By default, only responsive variants are generated for align-content utilities. * By default, only responsive variants are generated for align-content utilities.
*/ */
@ -248,7 +251,7 @@
/* /*
* Align Self * Align Self
* ---------- * --------------------
* Utilities for controlling how an individual flex item is positioned along its container's cross axis. * Utilities for controlling how an individual flex item is positioned along its container's cross axis.
* By default, only responsive variants are generated for align-self utilities. * By default, only responsive variants are generated for align-self utilities.
*/ */
@ -261,7 +264,7 @@
/* /*
* Justify Content * Justify Content
* ---------- * --------------------
* Utilities for controlling how flex items are positioned along a container's main axis. * Utilities for controlling how flex items are positioned along a container's main axis.
* By default, only responsive variants are generated for justify-content utilities. * By default, only responsive variants are generated for justify-content utilities.
*/ */
@ -274,7 +277,7 @@
/* /*
* Flex * Flex
* ---------- * --------------------
* Utilities for controlling how flex items both grow and shrink. * Utilities for controlling how flex items both grow and shrink.
* By default, only responsive variants are generated for flex utilities. * By default, only responsive variants are generated for flex utilities.
*/ */
@ -286,7 +289,7 @@
/* /*
* Flex Grow * Flex Grow
* ---------- * --------------------
* Utilities for controlling how flex items grow. * Utilities for controlling how flex items grow.
* By default, only responsive variants are generated for flex grow utilities. * By default, only responsive variants are generated for flex grow utilities.
*/ */
@ -296,7 +299,7 @@
/* /*
* Flex Shrink * Flex Shrink
* ---------- * --------------------
* Utilities for controlling how flex items shrink. * Utilities for controlling how flex items shrink.
* By default, only responsive variants are generated for flex shrink utilities. * By default, only responsive variants are generated for flex shrink utilities.
*/ */
@ -306,7 +309,7 @@
/* /*
* Order * Order
* ---------- * --------------------
* Utilities for controlling the order of flex items. * Utilities for controlling the order of flex items.
* By default, only responsive variants are generated for order utilities. * By default, only responsive variants are generated for order utilities.
*/ */
@ -331,62 +334,215 @@
* GRID * GRID
* ******************************************************************************************* */ * ******************************************************************************************* */
.grid /* display: grid; */
/* /*
* Grid Template Columns * Grid Template Columns
* ---------- * --------------------
* * Utilities for specifying the columns in a grid layout.
* * By default, only responsive variants are generated for grid-template-columns utilities.
*/ */
.grid-cols-1 /* grid-template-columns: repeat(1, minmax(0, 1fr)); */
.grid-cols-2 /* grid-template-columns: repeat(2, minmax(0, 1fr)); */
.grid-cols-3 /* grid-template-columns: repeat(3, minmax(0, 1fr)); */
.grid-cols-4 /* grid-template-columns: repeat(4, minmax(0, 1fr)); */
.grid-cols-5 /* grid-template-columns: repeat(5, minmax(0, 1fr)); */
.grid-cols-6 /* grid-template-columns: repeat(6, minmax(0, 1fr)); */
.grid-cols-7 /* grid-template-columns: repeat(7, minmax(0, 1fr)); */
.grid-cols-8 /* grid-template-columns: repeat(8, minmax(0, 1fr)); */
.grid-cols-9 /* grid-template-columns: repeat(9, minmax(0, 1fr)); */
.grid-cols-10 /* grid-template-columns: repeat(10, minmax(0, 1fr)); */
.grid-cols-11 /* grid-template-columns: repeat(11, minmax(0, 1fr)); */
.grid-cols-12 /* grid-template-columns: repeat(12, minmax(0, 1fr)); */
.grid-cols-none /* grid-template-columns: none; */
/* /*
* Grid Column Start / End * Grid Column Start / End
* ---------- * --------------------
* * Utilities for controlling how elements are sized and placed across grid columns.
* * By default, only responsive variants are generated for grid-column utilities.
*/ */
.col-auto /* grid-column: auto; */
.col-span-1 /* grid-column: span 1 / span 1; */
.col-span-2 /* grid-column: span 2 / span 2; */
.col-span-3 /* grid-column: span 3 / span 3; */
.col-span-4 /* grid-column: span 4 / span 4; */
.col-span-5 /* grid-column: span 5 / span 5; */
.col-span-6 /* grid-column: span 6 / span 6; */
.col-span-7 /* grid-column: span 7 / span 7; */
.col-span-8 /* grid-column: span 8 / span 8; */
.col-span-9 /* grid-column: span 9 / span 9; */
.col-span-10 /* grid-column: span 10 / span 10; */
.col-span-11 /* grid-column: span 11 / span 11; */
.col-span-12 /* grid-column: span 12 / span 12; */
.col-start-1 /* grid-column-start: 1; */
.col-start-2 /* grid-column-start: 2; */
.col-start-3 /* grid-column-start: 3; */
.col-start-4 /* grid-column-start: 4; */
.col-start-5 /* grid-column-start: 5; */
.col-start-6 /* grid-column-start: 6; */
.col-start-7 /* grid-column-start: 7; */
.col-start-8 /* grid-column-start: 8; */
.col-start-9 /* grid-column-start: 9; */
.col-start-10 /* grid-column-start: 10; */
.col-start-11 /* grid-column-start: 11; */
.col-start-12 /* grid-column-start: 12; */
.col-start-13 /* grid-column-start: 13; */
.col-start-auto /* grid-column-start: auto; */
.col-end-1 /* grid-column-end: 1; */
.col-end-2 /* grid-column-end: 2; */
.col-end-3 /* grid-column-end: 3; */
.col-end-4 /* grid-column-end: 4; */
.col-end-5 /* grid-column-end: 5; */
.col-end-6 /* grid-column-end: 6; */
.col-end-7 /* grid-column-end: 7; */
.col-end-8 /* grid-column-end: 8; */
.col-end-9 /* grid-column-end: 9; */
.col-end-10 /* grid-column-end: 10; */
.col-end-11 /* grid-column-end: 11; */
.col-end-12 /* grid-column-end: 12; */
.col-end-13 /* grid-column-end: 13; */
.col-end-auto /* grid-column-end: auto; */
/* /*
* Grid Template Rows * Grid Template Rows
* ---------- * --------------------
* * Utilities for specifying the rows in a grid layout.
* * By default, only responsive variants are generated for grid-template-rows utilities.
*/ */
.grid-rows-1 /* grid-template-rows: repeat(1, minmax(0, 1fr)); */
.grid-rows-2 /* grid-template-rows: repeat(2, minmax(0, 1fr)); */
.grid-rows-3 /* grid-template-rows: repeat(3, minmax(0, 1fr)); */
.grid-rows-4 /* grid-template-rows: repeat(4, minmax(0, 1fr)); */
.grid-rows-5 /* grid-template-rows: repeat(5, minmax(0, 1fr)); */
.grid-rows-6 /* grid-template-rows: repeat(6, minmax(0, 1fr)); */
.grid-rows-none /* grid-template-rows: none; */
/* /*
* Grid Row Start / End * Grid Row Start / End
* ---------- * --------------------
* * Utilities for controlling how elements are sized and placed across grid rows.
* * By default, only responsive variants are generated for grid-row utilities.
*/ */
.row-auto /* grid-row: auto; */
.row-span-1 /* grid-row: span 1 / span 1; */
.row-span-2 /* grid-row: span 2 / span 2; */
.row-span-3 /* grid-row: span 3 / span 3; */
.row-span-4 /* grid-row: span 4 / span 4; */
.row-span-5 /* grid-row: span 5 / span 5; */
.row-span-6 /* grid-row: span 6 / span 6; */
.row-start-1 /* grid-row-start: 1; */
.row-start-2 /* grid-row-start: 2; */
.row-start-3 /* grid-row-start: 3; */
.row-start-4 /* grid-row-start: 4; */
.row-start-5 /* grid-row-start: 5; */
.row-start-6 /* grid-row-start: 6; */
.row-start-7 /* grid-row-start: 7; */
.row-start-auto /* grid-row-start: auto; */
.row-end-1 /* grid-row-end: 1; */
.row-end-2 /* grid-row-end: 2; */
.row-end-3 /* grid-row-end: 3; */
.row-end-4 /* grid-row-end: 4; */
.row-end-5 /* grid-row-end: 5; */
.row-end-6 /* grid-row-end: 6; */
.row-end-7 /* grid-row-end: 7; */
.row-end-auto /* grid-row-end: auto; */
/* /*
* Gap * Gap
* ---------- * --------------------
* * Utilities for controlling gutters between grid rows and columns.
* * By default, no responsive, hover, focus, active, or group-hover variants are generated for gap utilities.
*/ */
.gap-0 /* gap: 0; */
.gap-1 /* gap: 0.25rem; */
.gap-2 /* gap: 0.5rem; */
.gap-3 /* gap: 0.75rem; */
.gap-4 /* gap: 1rem; */
.gap-5 /* gap: 1.25rem; */
.gap-6 /* gap: 1.5rem; */
.gap-8 /* gap: 2rem; */
.gap-10 /* gap: 2.5rem; */
.gap-12 /* gap: 3rem; */
.gap-16 /* gap: 4rem; */
.gap-20 /* gap: 5rem; */
.gap-24 /* gap: 6rem; */
.gap-32 /* gap: 8rem; */
.gap-40 /* gap: 10rem; */
.gap-48 /* gap: 12rem; */
.gap-56 /* gap: 14rem; */
.gap-64 /* gap: 16rem; */
.gap-px /* gap: 1px; */
.row-gap-0 /* row-gap: 0; */
.row-gap-1 /* row-gap: 0.25rem; */
.row-gap-2 /* row-gap: 0.5rem; */
.row-gap-3 /* row-gap: 0.75rem; */
.row-gap-4 /* row-gap: 1rem; */
.row-gap-5 /* row-gap: 1.25rem; */
.row-gap-6 /* row-gap: 1.5rem; */
.row-gap-8 /* row-gap: 2rem; */
.row-gap-10 /* row-gap: 2.5rem; */
.row-gap-12 /* row-gap: 3rem; */
.row-gap-16 /* row-gap: 4rem; */
.row-gap-20 /* row-gap: 5rem; */
.row-gap-24 /* row-gap: 6rem; */
.row-gap-32 /* row-gap: 8rem; */
.row-gap-40 /* row-gap: 10rem; */
.row-gap-48 /* row-gap: 12rem; */
.row-gap-56 /* row-gap: 14rem; */
.row-gap-64 /* row-gap: 16rem; */
.row-gap-px /* row-gap: 1px; */
.col-gap-0 /* column-gap: 0; */
.col-gap-1 /* column-gap: 0.25rem; */
.col-gap-2 /* column-gap: 0.5rem; */
.col-gap-3 /* column-gap: 0.75rem; */
.col-gap-4 /* column-gap: 1rem; */
.col-gap-5 /* column-gap: 1.25rem; */
.col-gap-6 /* column-gap: 1.5rem; */
.col-gap-8 /* column-gap: 2rem; */
.col-gap-10 /* column-gap: 2.5rem; */
.col-gap-12 /* column-gap: 3rem; */
.col-gap-16 /* column-gap: 4rem; */
.col-gap-20 /* column-gap: 5rem; */
.col-gap-24 /* column-gap: 6rem; */
.col-gap-32 /* column-gap: 8rem; */
.col-gap-40 /* column-gap: 10rem; */
.col-gap-48 /* column-gap: 12rem; */
.col-gap-56 /* column-gap: 14rem; */
.col-gap-64 /* column-gap: 16rem; */
.col-gap-px /* column-gap: 1px; */
/* /*
* Grid Auto Flow * Grid Auto Flow
* ---------- * --------------------
* * Utilities for controlling how elements in a grid are auto-placed.
* * By default, only responsive variants are generated for grid-auto-flow utilities.
*/ */
.grid-flow-row /* grid-auto-flow: row; */
.grid-flow-col /* grid-auto-flow: column; */
.grid-flow-row-dense /* grid-auto-flow: row dense; */
.grid-flow-col-dense /* grid-auto-flow: column dense; */
/* ******************************************************************************************* /* *******************************************************************************************
* SPACING * SPACING
* ******************************************************************************************* */ * ******************************************************************************************* */
/* /*
* Padding * Padding
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Margin * Margin
* ---------- * --------------------
* *
* *
*/ */
@ -397,42 +553,42 @@
/* /*
* Width * Width
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Min-Width * Min-Width
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Max-Width * Max-Width
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Height * Height
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Min-Height * Min-Height
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Max-Height * Max-Height
* ---------- * --------------------
* *
* *
*/ */
@ -443,77 +599,77 @@
/* /*
* Font Family * Font Family
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Font Size * Font Size
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Font Smoothing * Font Smoothing
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Font Style * Font Style
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Font Weight * Font Weight
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Letter Spacing * Letter Spacing
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Line Height * Line Height
* ---------- * --------------------
* *
* *
*/ */
/* /*
* List Style Type * List Style Type
* ---------- * --------------------
* *
* *
*/ */
/* /*
* List Style Position * List Style Position
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Placeholder Color * Placeholder Color
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Text Align * Text Align
* ---------- * --------------------
* *
* *
*/ */
@ -521,35 +677,35 @@
/* /*
* Text Color * Text Color
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Text Decoration * Text Decoration
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Text Transform * Text Transform
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Vertical Align * Vertical Align
* ---------- * --------------------
* *
* *
*/ */
/* /*
* Whitespace * Whitespace
* ---------- * --------------------
* *
* *
*/ */
@ -557,7 +713,7 @@
/* /*
* Word Break * Word Break
* ---------- * --------------------
* *
* *
*/ */
@ -568,35 +724,35 @@
/* /*
* BACKGROUND ATTACHMENT * BACKGROUND ATTACHMENT
* ---------- * --------------------
* *
* *
*/ */
/* /*
* BACKGROUND COLOR * BACKGROUND COLOR
* ---------- * --------------------
* *
* *
*/ */
/* /*
* BACKGROUND POSITION * BACKGROUND POSITION
* ---------- * --------------------
* *
* *
*/ */
/* /*
* BACKGROUND REPEAT * BACKGROUND REPEAT
* ---------- * --------------------
* *
* *
*/ */
/* /*
* BACKGROUND SIZE * BACKGROUND SIZE
* ---------- * --------------------
* *
* *
*/ */
@ -607,28 +763,28 @@
/* /*
* BORDER COLOR * BORDER COLOR
* ---------- * --------------------
* *
* *
*/ */
/* /*
* BORDER STYLE * BORDER STYLE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* BORDER WIDTH * BORDER WIDTH
* ---------- * --------------------
* *
* *
*/ */
/* /*
* BORDER RADIUS * BORDER RADIUS
* ---------- * --------------------
* *
* *
*/ */
@ -639,14 +795,14 @@
/* /*
* BORDER COLLAPSE * BORDER COLLAPSE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* TABLE LAYOUT * TABLE LAYOUT
* ---------- * --------------------
* *
* *
*/ */
@ -657,7 +813,7 @@
/* /*
* BOX SHADOW * BOX SHADOW
* ---------- * --------------------
* *
* *
*/ */
@ -665,7 +821,7 @@
/* /*
* OPACITY * OPACITY
* ---------- * --------------------
* *
* *
*/ */
@ -676,21 +832,21 @@
/* /*
* TRANSITION PROPERTY * TRANSITION PROPERTY
* ---------- * --------------------
* *
* *
*/ */
/* /*
* TRANSITION DURATION * TRANSITION DURATION
* ---------- * --------------------
* *
* *
*/ */
/* /*
* TRANSITION TIMING FUNCTION * TRANSITION TIMING FUNCTION
* ---------- * --------------------
* *
* *
*/ */
@ -701,35 +857,35 @@
/* /*
* SCALE * SCALE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* ROTATE * ROTATE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* TRANSLATE * TRANSLATE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* SKEW * SKEW
* ---------- * --------------------
* *
* *
*/ */
/* /*
* TRANSFORM ORIGIN * TRANSFORM ORIGIN
* ---------- * --------------------
* *
* *
*/ */
@ -740,42 +896,42 @@
/* /*
* APPEARANCE * APPEARANCE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* CURSOR * CURSOR
* ---------- * --------------------
* *
* *
*/ */
/* /*
* OUTLINE * OUTLINE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* POINTER EVENTS * POINTER EVENTS
* ---------- * --------------------
* *
* *
*/ */
/* /*
* RESIZE * RESIZE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* USER SELECT * USER SELECT
* ---------- * --------------------
* *
* *
*/ */
@ -786,21 +942,21 @@
/* /*
* FILL * FILL
* ---------- * --------------------
* *
* *
*/ */
/* /*
* STROKE * STROKE
* ---------- * --------------------
* *
* *
*/ */
/* /*
* STROKE WIDTH * STROKE WIDTH
* ---------- * --------------------
* *
* *
*/ */
@ -811,7 +967,7 @@
/* /*
* SCREEN READERS * SCREEN READERS
* ---------- * --------------------
* *
* *
*/ */