From 3f451ea5f4672cd7bcbc254971695a83344aa80a Mon Sep 17 00:00:00 2001 From: Julien Le Coupanec Date: Sun, 29 Mar 2020 15:22:43 +0200 Subject: [PATCH] docs(tailwind): grid classes --- frontend/tailwind.css | 366 ++++++++++++++++++++++++++++++------------ 1 file changed, 261 insertions(+), 105 deletions(-) diff --git a/frontend/tailwind.css b/frontend/tailwind.css index 0ac9847..ffde911 100644 --- a/frontend/tailwind.css +++ b/frontend/tailwind.css @@ -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. */ @@ -196,10 +196,13 @@ /* ******************************************************************************************* * 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. */ @@ -330,63 +333,216 @@ /* ******************************************************************************************* * 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 - * ---------- + * -------------------- * * */