knowledge/awesome-cheatsheets
1
1
Fork 0
mirror of https://github.com/namibia/awesome-cheatsheets.git synced 2024-12-20 01:03:14 +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
* ----------
* --------------------
* sm: min-width: 640px;
* md: min-width: 768px;
* lg: min-width: 1024px;
@ -18,7 +18,7 @@
/*
* Container
* ----------
* --------------------
* A component for fixing an element's width to the current breakpoint.
*/
@ -26,7 +26,7 @@
/*
* Box-sizing
* ----------
* --------------------
* Utilities for controlling how the browser should calculate an element's total size.
* By default, only responsive variants are generated for box-sizing utilities.
*/
@ -36,7 +36,7 @@
/*
* Display
* ----------
* --------------------
* Utilities for controlling the display box type of an element.
* By default, only responsive variants are generated for display utilities.
*/
@ -60,7 +60,7 @@
/*
* Floats
* ----------
* --------------------
* Utilities for controlling the wrapping of content around an element.
* By default, only responsive variants are generated for float utilities.
*/
@ -72,7 +72,7 @@
/*
* Clear
* ----------
* --------------------
* Utilities for controlling the wrapping of content around an element.
* By default, only responsive variants are generated for clear utilities.
*/
@ -83,7 +83,7 @@
/*
* Object Fit
* ----------
* --------------------
* Utilities for controlling how a replaced element's content should be resized.
* By default, only responsive variants are generated for object-fit utilities.
*/
@ -96,7 +96,7 @@
/*
* Object Position
* ----------
* --------------------
* 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.
*/
@ -113,7 +113,7 @@
/*
* Overflow
* ----------
* --------------------
* 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.
*/
@ -135,7 +135,7 @@
/*
* Position
* ----------
* --------------------
* Utilities for controlling how an element is positioned in the DOM.
* By default, only responsive variants are generated for position utilities.
*/
@ -148,7 +148,7 @@
/*
* Top / Right / Bottom / Left
* ----------
* --------------------
* Utilities for controlling the placement of positioned elements.
* By default, only responsive variants are generated for top, right, bottom, left, and inset utilities.
*/
@ -170,7 +170,7 @@
/*
* Visibility
* ----------
* --------------------
* Utilities for controlling the visibility of an element.
* By default, only responsive variants are generated for visibility utilities.
*/
@ -180,7 +180,7 @@
/*
* Z-Index
* ----------
* --------------------
* Utilities for controlling the stack order of an element.
* By default, only responsive variants are generated for z-index utilities.
*/
@ -197,9 +197,12 @@
* FLEXBOX
* ******************************************************************************************* */
.flex /* display: flex; */
.inline-flex /* display: inline-flex; */
/*
* Flex Direction
* ----------
* --------------------
* Utilities for controlling the direction of flex items.
* By default, only responsive variants are generated for flex-direction utilities.
*/
@ -211,7 +214,7 @@
/*
* Flex Wrap
* ----------
* --------------------
* Utilities for controlling how flex items wrap.
* By default, only responsive variants are generated for flex-wrap utilities.
*/
@ -222,7 +225,7 @@
/*
* Align Items
* ----------
* --------------------
* 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.
*/
@ -235,7 +238,7 @@
/*
* Align Content
* ----------
* --------------------
* Utilities for controlling how lines are positioned in multi-line flex containers.
* By default, only responsive variants are generated for align-content utilities.
*/
@ -248,7 +251,7 @@
/*
* Align Self
* ----------
* --------------------
* 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.
*/
@ -261,7 +264,7 @@
/*
* Justify Content
* ----------
* --------------------
* 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.
*/
@ -274,7 +277,7 @@
/*
* Flex
* ----------
* --------------------
* Utilities for controlling how flex items both grow and shrink.
* By default, only responsive variants are generated for flex utilities.
*/
@ -286,7 +289,7 @@
/*
* Flex Grow
* ----------
* --------------------
* Utilities for controlling how flex items grow.
* By default, only responsive variants are generated for flex grow utilities.
*/
@ -296,7 +299,7 @@
/*
* Flex Shrink
* ----------
* --------------------
* Utilities for controlling how flex items shrink.
* By default, only responsive variants are generated for flex shrink utilities.
*/
@ -306,7 +309,7 @@
/*
* Order
* ----------
* --------------------
* Utilities for controlling the order of flex items.
* By default, only responsive variants are generated for order utilities.
*/
@ -331,62 +334,215 @@
* GRID
* ******************************************************************************************* */
.grid /* display: grid; */
/*
* 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
* ----------
*
*
* --------------------
* 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
* ----------
*
*
* --------------------
* 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
* ----------
*
*
* --------------------
* 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
* ----------
*
*
* --------------------
* 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
* ----------
*
*
* --------------------
* 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
* ******************************************************************************************* */
/*
* Padding
* ----------
* --------------------
*
*
*/
/*
* Margin
* ----------
* --------------------
*
*
*/
@ -397,42 +553,42 @@
/*
* Width
* ----------
* --------------------
*
*
*/
/*
* Min-Width
* ----------
* --------------------
*
*
*/
/*
* Max-Width
* ----------
* --------------------
*
*
*/
/*
* Height
* ----------
* --------------------
*
*
*/
/*
* Min-Height
* ----------
* --------------------
*
*
*/
/*
* Max-Height
* ----------
* --------------------
*
*
*/
@ -443,77 +599,77 @@
/*
* Font Family
* ----------
* --------------------
*
*
*/
/*
* Font Size
* ----------
* --------------------
*
*
*/
/*
* Font Smoothing
* ----------
* --------------------
*
*
*/
/*
* Font Style
* ----------
* --------------------
*
*
*/
/*
* Font Weight
* ----------
* --------------------
*
*
*/
/*
* Letter Spacing
* ----------
* --------------------
*
*
*/
/*
* Line Height
* ----------
* --------------------
*
*
*/
/*
* List Style Type
* ----------
* --------------------
*
*
*/
/*
* List Style Position
* ----------
* --------------------
*
*
*/
/*
* Placeholder Color
* ----------
* --------------------
*
*
*/
/*
* Text Align
* ----------
* --------------------
*
*
*/
@ -521,35 +677,35 @@
/*
* Text Color
* ----------
* --------------------
*
*
*/
/*
* Text Decoration
* ----------
* --------------------
*
*
*/
/*
* Text Transform
* ----------
* --------------------
*
*
*/
/*
* Vertical Align
* ----------
* --------------------
*
*
*/
/*
* Whitespace
* ----------
* --------------------
*
*
*/
@ -557,7 +713,7 @@
/*
* Word Break
* ----------
* --------------------
*
*
*/
@ -568,35 +724,35 @@
/*
* BACKGROUND ATTACHMENT
* ----------
* --------------------
*
*
*/
/*
* BACKGROUND COLOR
* ----------
* --------------------
*
*
*/
/*
* BACKGROUND POSITION
* ----------
* --------------------
*
*
*/
/*
* BACKGROUND REPEAT
* ----------
* --------------------
*
*
*/
/*
* BACKGROUND SIZE
* ----------
* --------------------
*
*
*/
@ -607,28 +763,28 @@
/*
* BORDER COLOR
* ----------
* --------------------
*
*
*/
/*
* BORDER STYLE
* ----------
* --------------------
*
*
*/
/*
* BORDER WIDTH
* ----------
* --------------------
*
*
*/
/*
* BORDER RADIUS
* ----------
* --------------------
*
*
*/
@ -639,14 +795,14 @@
/*
* BORDER COLLAPSE
* ----------
* --------------------
*
*
*/
/*
* TABLE LAYOUT
* ----------
* --------------------
*
*
*/
@ -657,7 +813,7 @@
/*
* BOX SHADOW
* ----------
* --------------------
*
*
*/
@ -665,7 +821,7 @@
/*
* OPACITY
* ----------
* --------------------
*
*
*/
@ -676,21 +832,21 @@
/*
* TRANSITION PROPERTY
* ----------
* --------------------
*
*
*/
/*
* TRANSITION DURATION
* ----------
* --------------------
*
*
*/
/*
* TRANSITION TIMING FUNCTION
* ----------
* --------------------
*
*
*/
@ -701,35 +857,35 @@
/*
* SCALE
* ----------
* --------------------
*
*
*/
/*
* ROTATE
* ----------
* --------------------
*
*
*/
/*
* TRANSLATE
* ----------
* --------------------
*
*
*/
/*
* SKEW
* ----------
* --------------------
*
*
*/
/*
* TRANSFORM ORIGIN
* ----------
* --------------------
*
*
*/
@ -740,42 +896,42 @@
/*
* APPEARANCE
* ----------
* --------------------
*
*
*/
/*
* CURSOR
* ----------
* --------------------
*
*
*/
/*
* OUTLINE
* ----------
* --------------------
*
*
*/
/*
* POINTER EVENTS
* ----------
* --------------------
*
*
*/
/*
* RESIZE
* ----------
* --------------------
*
*
*/
/*
* USER SELECT
* ----------
* --------------------
*
*
*/
@ -786,21 +942,21 @@
/*
* FILL
* ----------
* --------------------
*
*
*/
/*
* STROKE
* ----------
* --------------------
*
*
*/
/*
* STROKE WIDTH
* ----------
* --------------------
*
*
*/
@ -811,7 +967,7 @@
/*
* SCREEN READERS
* ----------
* --------------------
*
*
*/