styled-proper

# styled-proper `styled-proper` is a library that uses `styled-components` internally to enable adding dynamic styles to components via props. It supports media queries, pseudo-classes, pseudo-elements, and provides the flexibility to extend components while leveraging the powerful features of `styled-components`. ## Installation Install the library via npm by running the following command: ```bash npm install styled-proper ``` ## Basic Usage `styled-proper` allows you to create styled components using dynamic props. Here's a simple example: ```jsx import { Button } from 'styled-proper'; function Component() { return ( <Button bg="white|:hover=black" color="black|:hover=white" fs="14px|@sm=18px|@md=22px"> I am a button </Button> ); } export default Component; ``` In this example, you can define multiple styles in a single prop. Whether you want to add pseudo-classes or media queries, you only need to separate the values using a vertical bar `|`. ### Style Breakdown - `bg="white|:hover=black"`: Sets a white background by default and changes to black on hover. - `color="black|:hover=white"`: Sets a black text color by default and changes to white on hover. - `fs="14px|@sm=18px|@md=22px"`: Sets the font size to 14px by default, adjusts to 18px on small screens `@sm`, and 22px on medium screens `@md`. ## Implementation Options `styled-proper` offers multiple ways to import and use styled components, providing flexibility to suit your needs. - **Importing Components from styled-proper:** You can directly import the styled components you need from `styled-proper`. This approach is useful for keeping your code clean and modular. ```jsx import { Header, Nav, Main, Footer, ..., Button } from 'styled-proper'; function Component() { return ( <Main p="1rem"> <Header w="100%" p="1rem" flexXY="justify,center" bg="white"> <Nav w="100%" p="1rem"> <Button bg="black" color="white">Click me!</Button> </Nav> </Header> </Main> ); } ``` - **Importing Groups of Components:** If you prefer to organize components into categories or groups, you can import entire sections such as `Box`, `Text`, `Media`, etc. This approach is helpful for managing large sets of components. ```jsx import { Box, Text, Media, FormElement, TableElement, MetaElement, Misc } from 'styled-proper'; function Component() { return ( <Box.Main p="1rem"> <Box.Header w="100%" p="1rem" flexXY="justify,center" bg="white"> <Box.Nav w="100%" p="1rem"> <FormElement.Button bg="black" color="white"> Click me! </FormElement.Button> </Box.Nav> </Box.Header> </Box.Main> ); } ``` - **Creating Custom Components with the `Proper` Function:** You can use the Proper function to create custom components and tailor them to your needs. This is especially useful if you need full control over component names and configurations. ```jsx import Proper from 'styled-proper'; const Button = Proper('button'); const Header = Proper('header'); const Nav = Proper('nav'); const Main = Proper('main'); function Component() { return ( <Main p="1rem"> <Header w="100%" p="1rem" flexXY="justify,center" bg="white"> <Nav w="100%" p="1rem"> <Button bg="black" color="white"> Click me! </Button> </Nav> </Header> </Main> ); } ``` - **Extending Components Created with `styled-components`:** You can extend components created with `styled-components` while still using the dynamic prop system provided by `styled-proper`. ```jsx import styled from 'styled-components'; import Proper from 'styled-proper'; const ButtonWithStyledComponents = styled.button` padding: 10px; `; const ExtendedButton = Proper(ButtonWithStyledComponents); <ExtendedButton p="1rem">Click me!</ExtendedButton>; ``` ## Media Query Support `styled-proper` makes it easy to add responsive styles using media queries. To define them, simply prepend the @ symbol to the alias of the desired media query. **Media Query Example:** Below is an example where the aliases `@sm` and `@md` are used to adjust the font size based on the screen width: ```jsx <Text.P fs="14px|@sm=18px|@md=22px">Hola</Text.P> ``` - `14px`: Default font size. - `@sm=18px`: Changes the font size to 18px when the screen width is greater than or equal to 640px. - `@md=22px`: Changes the font size to 22px when the screen width is greater than or equal to 768px. **Supported Media Queries:** | **Alias** | **Media Query (CSS)** | | --------- | ---------------------------- | | `@sm` | `@media (min-width: 640px)` | | `@md` | `@media (min-width: 768px)` | | `@lg` | `@media (min-width: 1024px)` | | `@xl` | `@media (min-width: 1280px)` | | `@2xl` | `@media (min-width: 1536px)` | ## Pseudo-Class Support With `styled-proper`, you can handle pseudo-classes like `hover`, `focus`, `nth-child`, `active`, and more. The syntax is intuitive and similar to CSS: prepend a `:` to the pseudo-class name, followed by the desired value separated by `=`. ### Important Note: Pseudo-class names must be in camelCase format. Examples include: - `hover` - `focus` - `active` - `nthChild` - `lastChild` ### Example with `hover` Pseudo-Class: ```jsx <Button bg="black" color="white|hover:green"> click me </Button> ``` #### Description: - `bg="black"`: Fondo negro por defecto. - `color="white|:hover=green"`: El color del texto cambia a verde cuando el botón está en estado hover. ### Example with `active` Pseudo-Class: ```jsx <Button bg="black" color="white" border="1px solid white|active:green"> click me </Button> ``` #### Description: - `border="1px solid white"`: Default border is white. - `border="|:active=green"`: Border changes to green when the button is active. ### Example with `nth-child` Pseudo-Class: ```jsx import { Box } from 'styled-proper'; const Item = ({ children }) => <Box.Div bg="white|:nthChild(2n)=black">{children}</Box.Div>; function Component() { return ( <div> {Array.from({ length: 10 }).map((_, i) => ( <Item key={i}>{i}</Item> ))} </div> ); } export default Component; ``` #### Description: - `bg="white"`: Default background is white. - `:nthChild(2n)=black`: Background changes to black for all even-indexed elements. ### **List of Supported Pseudo-Classes:** | **Pseudo-clase original** | **Pseudo-clase de styled-proper** | | ------------------------- | --------------------------------- | | `:hover` | `:hover` | | `:focus` | `:focus` | | `:active` | `:active` | | `:last-child` | `:lastChild` | | `:first-child` | `:firstChild` | | `:nth-child(param)` | `:nthChild(param)` | | `:nth-of-type(param)` | `:nthOfType(param)` | | `:last-of-type` | `:lastOfType` | | `:first-of-type` | `:firstOfType` | | `:not(param)` | `:not(param)` | | `:empty` | `:empty` | | `:checked` | `:checked` | | `:disabled` | `:disabled` | | `:enabled` | `:enabled` | | `:visited` | `:visited` | | `:link` | `:link` | | `:target` | `:target` | | `:focus-within` | `:focusWithin` | | `:focus-visible` | `:focusVisible` | | `:only-child` | `:onlyChild` | | `:only-of-type` | `:onlyOfType` | | `:read-only` | `:readOnly` | | `:read-write` | `:readWrite` | | `:placeholder-shown` | `:placeholderShown` | ## Using Pseudo-Classes as Props In `styled-proper`, you can use pseudo-classes as props to add dynamic styles. These must be written in camelCase (e.g., `hover`, `focus`, `active`, `lastChild`, `nthChild`, etc.). Additionally, you can combine multiple styles within a single prop using **arrays** and **media queries**. ### Basic Example You can directly add pseudo-classes in props by using square brackets `[ ]` to group styles: ```jsx <Button bg="black" color="white" hover="[bg=white;color=black]"> click me </Button> ``` **Combining Pseudo-Classes Within the Same Prop:** ```jsx <Button bg="black" color="white" hover=":active=[bg=white;color=black]"> click me </Button> ``` **Adding Media Queries Within the Same Prop:** ```jsx <Button bg="black" color="white" hover="[bg=red;color=white]|@sm=[bg=blue;color=black]"> click me </Button> ``` **Combining Pseudo-Classes and Media Queries Within the Same Prop:** ```jsx <Button bg="black" color="white" hover=":active=[bg=red;color=white]|:active@sm=[bg=blue;color=black]"> click me </Button> ``` If the pseudo-class requires parameters, they should be passed as an array, where the first element is the parameter, and the second element is the value: ```jsx import { Button } from 'styled-proper'; function Component() { return <Button nthChild={['2n', '[bg=black;color=white]|@sm=[bg=white;color=black]']}>click me</Button>; } export default Component; ``` **List of Supported Pseudo-Classes as Props:** | **Pseudo-clase original** | **List Format** | | ------------------------- | ------------------ | | `:hover` | `hover` | | `:focus` | `focus` | | `:active` | `active` | | `:last-child` | `lastChild` | | `:first-child` | `firstChild` | | `:nth-child(param)` | `nthChild` | | `:nth-of-type(param)` | `nthOfType` | | `:last-of-type` | `lastOfType` | | `:first-of-type` | `firstOfType` | | `:not(param)` | `not` | | `:empty` | `empty` | | `:checked` | `checked` | | `:disabled` | `disabled` | | `:enabled` | `enabled` | | `:visited` | `visited` | | `:link` | `link` | | `:target` | `target` | | `:focus-within` | `focusWithin` | | `:focus-visible` | `focusVisible` | | `:only-child` | `onlyChild` | | `:only-of-type` | `onlyOfType` | | `:read-only` | `readOnly` | | `:read-write` | `readWrite` | | `:placeholder-shown` | `placeholderShown` | ## Support for Pseudo-Elements You can also manage pseudo-elements like `before`, `after`, `first-letter`, `first-line`, `selection`, `marker`, `placeholder`, `backdrop`, and more. Their usage is similar to CSS: prepend `::` followed by the pseudo-element name, then specify the desired value separated by `=`. Pseudo-elements should be written in camelCase convention, such as `before`, `after`, `firstLetter`, `firstLine`, `selection`, `marker`, `placeholder`, `backdrop`, etc. Example with the `first-letter` Pseudo-Element: ```jsx <Text.P color="black|::firstLetter=red">Hola</Text.P> ``` Example with the `before` Pseudo-Element ```jsx <Text.P position="relative|::before=absolute" content="::before=hi" top="::before=0" left="::before=0"> Hola </Text.P> ``` Example with Media Queries and Pseudo-Elements ```jsx <Text.P position="relative|::before=absolute" content="@md::before=hi" top="@md::before=0" left="@md::before=0"> Hola </Text.P> ``` **List of Supported Pseudo-Elements:** | **Original Pseudo-Element** | **styled-proper Pseudo-Elements** | | --------------------------- | --------------------------------- | | `::before` | `::before` | | `::after` | `::after` | | `::first-letter` | `::firstLetter` | | `::first-line` | `::firstLine` | | `::selection` | `::selection` | | `::marker` | `::marker` | | `::placeholder` | `::placeholder` | | `::backdrop` | `::backdrop` | ## Using Pseudo-Elements as Props You can also use pseudo-elements as props. Pseudo-elements must follow camelCase convention, such as `before`, `after`, `firstLetter`, `firstLine`, `selection`, `marker`, `placeholder`, `backdrop`, etc. To apply multiple styles to the same pseudo-element, wrap the styles in square brackets `[]` and separate each property-value pair with a semicolon `;`. Example:: ```xml <Button bg="black" color="white" position="relative" after="[position=absolute;content=hi;top=0;left=0]">click me</Button> ``` **Adding Media Queries to the Same Prop:** ```jsx <Button bg="black" color="white" position="relative" after="@sm=[position=absolute;content=hi;bg=red;right=0;left=0;top=100%]"> click me </Button> ``` **List of Supported Pseudo-Elements as Props:** | **Original Pseudo-Element** | **Usage Format** | | --------------------------- | ---------------- | | `::before` | `before` | | `::after` | `after` | | `::first-letter` | `firstLetter` | | `::first-line` | `firstLine` | | `::selection` | `selection` | | `::marker` | `marker` | | `::placeholder` | `placeholder` | | `::backdrop` | `backdrop` | ## Support for Combinators `styled-proper` supports the use of CSS combinators like `>`, `+`, `~`, and ` `. To use them, prepend the symbol `&` followed by the corresponding combinator and then the element to which the style is applied, very similar to CSS. Example using the direct child combinator `>` ```jsx <Box.Div color="&>div=red"> <div>1</div> <section> <div>2</div> </section> <div>3</div> </Box.Div> ``` Example using the adjacent sibling combinator `+` ```jsx <div> <Box.Div color="&+div=red">1</Box.Div> <div>2</div> <div>3</div> </div> ``` Example using the general sibling combinator `~` ```jsx <div> <Box.Div color="&~div=red">1</Box.Div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> ``` Example using the descendant combinator   ` ` ```jsx <Box.Div color="& p=red"> <div>1</div> <div> <p>2</p> </div> <div>3</div> </Box.Div> ``` **List of Supported Combinators:** | **Combinator** | **Description** | | -------------- | ------------------------------------------------------------- | | `&>` | Selects direct children of the current element. | | `&~` | Selects all general sibling elements of the current element. | | `&+` | Selects the immediate sibling element of the current element. | | `& ` | Selects all descendants of the current element. | ## Using Combinators as Props The use of combinators through props works by receiving an array as a parameter, where the first element is the combinator and the second is the styles: Example using the direct child combinator `>` with the `directChild` prop: ```jsx <div> <Box.Div directChild={['div', '[color=red]']}> <div>1</div> <section> <div>2</div> </section> <div>3</div> </Box.Div> </div> ``` Example using the adjacent sibling combinator `+` with the `adjacentSibling` prop: ```jsx <div> <Box.Div adjacentSibling={['div', '[color=red]']}>1</Box.Div> <div>2</div> <div>3</div> </div> ``` Example using the general sibling combinator `~` with the `generalSibling` prop: ```jsx <div> <Box.Div generalSibling={['div', '[color=red]']}>1</Box.Div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> ``` Example using the descendant combinator ` ` with the `descendant` prop: ```jsx <Box.Div descendant={['p', '[color=red]']}> <div>1</div> <div> <p>2</p> </div> <div>3</div> </Box.Div> ``` | **Prop Name** | **Syntax Explanation** | | --------------------- | ------------------------------------------------------------------------------------------------------------------ | | **`descendant`** | `descendant={['p', '[color=red]']}`: Targets all `<p>` elements nested within the current element. | | **`directChild`** | `directChild={['div', '[color=blue]']}`: Targets all direct `<div>` children of the current element. | | **`adjacentSibling`** | `adjacentSibling={['span', '[color=green]']}`: Targets the next immediate `<span>` sibling of the current element. | | **`generalSibling`** | `generalSibling={['h1', '[color=yellow]']}`: Targets all subsequent `<h1>` siblings of the current element. | # API Reference ### **List of Components in `styled-proper`** | **HTML Element** | **Component** | | ---------------- | ------------- | | `<header>` | `Header` | | `<nav>` | `Nav` | | `<main>` | `Main` | | `<section>` | `Section` | | `<article>` | `Article` | | `<aside>` | `Aside` | | `<footer>` | `Footer` | | `<div>` | `Div` | | `<span>` | `Span` | | `<body>` | `Body` | | `<h1>` | `H1` | | `<h2>` | `H2` | | `<h3>` | `H3` | | `<h4>` | `H4` | | `<h5>` | `H5` | | `<h6>` | `H6` | | `<p>` | `P` | | `<a>` | `A` | | `<abbr>` | `Abbr` | | `<address>` | `Addr` | | `<b>` | `B` | | `<bdi>` | `Bdi` | | `<bdo>` | `Bdo` | | `<blockquote>` | `Blockquote` | | `<cite>` | `Cite` | | `<code>` | `Code` | | `<del>` | `Del` | | `<dfn>` | `Dfn` | | `<em>` | `Em` | | `<i>` | `I` | | `<ins>` | `Ins` | | `<kbd>` | `Kbd` | | `<mark>` | `Mark` | | `<s>` | `S` | | `<samp>` | `Samp` | | `<small>` | `Small` | | `<strong>` | `Strong` | | `<sub>` | `Sub` | | `<sup>` | `Sup` | | `<time>` | `Time` | | `<u>` | `U` | | `<var>` | `Var` | | `<big>` | `Big` | | `<hgroup>` | `Hgroup` | | `<audio>` | `Audio` | | `<img>` | `Img` | | `<video>` | `Video` | | `<picture>` | `Picture` | | `<track>` | `Track` | | `<source>` | `Source` | | `<embed>` | `Embed` | | `<iframe>` | `Iframe` | | `<object>` | `Obj` | | `<canvas>` | `Canvas` | | `<form>` | `Form` | | `<input>` | `Input` | | `<button>` | `Button` | | `<textarea>` | `Textarea` | | `<label>` | `Label` | | `<fieldset>` | `Fieldset` | | `<legend>` | `Legend` | | `<select>` | `Select` | | `<optgroup>` | `OptGroup` | | `<option>` | `Option` | | `<datalist>` | `Datalist` | | `<output>` | `Output` | | `<progress>` | `Progress` | | `<meter>` | `Meter` | | `<table>` | `Table` | | `<caption>` | `Caption` | | `<colgroup>` | `ColGroup` | | `<col>` | `Col` | | `<thead>` | `THead` | | `<tbody>` | `TBody` | | `<tfoot>` | `TFoot` | | `<tr>` | `Tr` | | `<th>` | `Th` | | `<td>` | `Td` | | `<head>` | `Head` | | `<title>` | `Title` | | `<base>` | `Base` | | `<link>` | `Link` | | `<meta>` | `Meta` | | `<style>` | `Style` | | `<script>` | `Script` | | `<html>` | `Html` | | `<br>` | `Br` | | `<hr>` | `Hr` | | `<wbr>` | `Wbr` | | `<area>` | `Area` | | `<map>` | `MapElement` | | `<param>` | `Param` | | `<menu>` | `Menu` | | `<menuitem>` | `MenuItem` | | `<noscript>` | `Noscript` | | `<dialog>` | `Dialog` | | `<data>` | `Data` | | `<details>` | `Details` | | `<summary>` | `Summary` | | `<figure>` | `Figure` | | `<figcaption>` | `Figcaption` | | `<g>` | `G` | ### **List of Component Groups in `styled-proper`** | **Group** | **Component** | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Box** | `Header`, `Nav`, `Main`, `Section`, `Article`, `Aside`, `Footer`, `Div`, `Span`, `Body`, `Ul`, `Ol`, `Li` | | **Text** | `H1`, `H2`, `H3`, `H4`, `H5`, `H6`, `P`, `A`, `Abbr`, `Addr`, `B`, `Bdi`, `Bdo`, `Blockquote`, `Cite`, `Code`, `Del`, `Dfn`, `Em`, `I`, `Ins`, `Kbd`, `Mark`, `S`, `Samp`, `Small`, `Strong`, `Sub`, `Sup`, `Time`, `U`, `Var`, `Big`, `Hgroup`, `Dl`, `Dt`, `Dd`, `Pre`, `Q`, `Rp`, `Rt`, `Ruby` | | **Media** | `Audio`, `Img`, `Video`, `Picture`, `Track`, `Source`, `Embed`, `Iframe`, `Object`, `Canvas`, `Svg`, `Circle`, `ClipPath`, `Defs`, `Ellipse`, `ForeignObj`, `Image`, `Line`, `LinearGrad`, `Marker`, `Mask`, `Path`, `Pattern`, `Polygon`, `Polyline`, `RadialGrad`, `Rect`, `Stop`, `Text`, `Tspan`, `Use` | | **FormElement** | `Form`, `Input`, `Button`, `Textarea`, `Label`, `Fieldset`, `Legend`, `Select`, `OptGroup`, `Option`, `Datalist`, `Output`, `Progress`, `Meter`, `Keygen` | | **TableElement** | `Table`, `Caption`, `ColGroup`, `Col`, `THead`, `TBody`, `TFoot`, `Tr`, `Th`, `Td` | | **MetaElement** | `Head`, `Title`, `Base`, `Link`, `Meta`, `Style`, `Script`, `Html` | | **Misc** | `Br`, `Hr`, `Wbr`, `Area`, `Map`, `Param`, `Menu`, `MenuItem`, `Noscript`, `Dialog`, `Data`, `Details`, `Summary`, `Figure`, `Figcaption`, `G` | ### **List of Available Props in `styled-proper`** - ### Layout props | **Prop** | **Options** | | --------------------- | --------------------------------------- | | `aspect` | `auto` : 1 / 1 | | | `square` : 1 / 1 | | | `widescreen` : 16 / 9 | | | `standard` : 4 / 3 | | | `photo` : 3 / 2 | | | `cinema` : 2.39 / 1 | | | `ultrawide` : 21 / 9 | | | `vertical` : 9 / 16 | | `columns` | | | `columnCount` | | | `columnFill` | | | `columnsGap` | | | `columnRule` | | | `columnRuleColor` | | | `columnRuleStyle` | | | `columnRuleWidth` | | | `columnSpan` | | | `columnWidth` | | | `breakAfter` | `auto` : auto | | | `avoid` : avoid | | | `all` : all | | | `avoidPage` : avoid-page | | | `page` : page | | | `left` : left | | | `right` : right | | | `column` : column | | `breakBefore` | `auto` : auto | | | `avoid` : avoid | | | `all` : all | | | `avoidPage` : avoid-page | | | `page` : page | | | `left` : left | | | `right` : right | | `breakInside` | `auto` : auto | | | `avoid` : avoid | | | `avoidPage` : avoid-page | | | `avoidColumn` : avoid-column | | `boxDecorationBreak` | `slice` : slice | | | `clone` : clone | | `boxSizing` | `border` : border-box | | | `content` : content-box | | `display` | `hidden` : none | | | `block` : block | | | `inline` : inline | | | `flex` : flex | | | `grid` : grid | | | `table` : table | | | `inlineBlock` : inline-block | | | `inlineFlex` : inline-flex | | | `inlineGrid` : inline-grid | | | `inlineTable` : inline-table | | | `tableCaption` : table-caption | | | `tableCell` : table-cell | | | `tableColumn` : table-column | | | `tableRowGroup` : table-row-group | | | `tableRow` : table-row | | | `flowRoot` : flow-root | | | `contents` : contents | | | `listItem` : list-item | | | `tableColumnGroup` : table-column-group | | | `tableFooterGroup` : table-footer-group | | | `tableHeaderGroup` : table-header-group | | `float` | `start` : inline-start | | | `end` : inline-end | | | `left` : left | | | `right` : right | | | `none` : none | | `clear` | `none` : none | | | `start` : inline-start | | | `end` : inline-end | | | `left` : left | | | `right` : right | | | `both` : both | | `isolation` | `auto` : auto | | | `isolate` : isolate | | `objectFit` | `contain` : contain | | | `cover` : cover | | | `fill` : fill | | | `none` : none | | | `scaleDown` : scale-down | | `objectPosition` | `bottom` : bottom | | | `center` : center | | | `left` : left | | | `leftBottom` : left bottom | | | `leftTop` : left top | | | `right` : right | | | `rightBottom` : right bottom | | | `rightTop` : right top | | | `top` : top | | `overflow` | `auto` : auto | | | `hidden` : hidden | | | `clip` : clip | | | `visible` : visible | | | `scroll` : scroll | | `overflowX` | `auto` : auto | | | `hidden` : hidden | | | `clip` : clip | | | `visible` : visible | | | `scroll` : scroll | | `overflowY` | `auto` : auto | | | `hidden` : hidden | | | `clip` : clip | | | `visible` : visible | | | `scroll` : scroll | | `overflowWrap` | `normal` : normal | | | `breakWord` : break-word | | | `anywhere` : anywhere | | `overscrollBehavior` | `auto` : auto | | | `contain` : contain | | | `none` : none | | `overscrollBehaviorX` | `auto` : auto | | | `contain` : contain | | | `none` : none | | `overscrollBehaviorY` | `auto` : auto | | | `contain` : contain | | | `none` : none | | `position` | `static` : static | | | `relative` : relative | | | `absolute` : absolute | | | `fixed` : fixed | | | `sticky` : sticky | | `top` | | | `right` | | | `bottom` | | | `left` | | | `inset` | | | `visibility` | `visible` : visible | | | `hidden` : hidden | | | `collapse` : collapse | | `zIndex` | | - ### Flex and Grid props | **Prop** | **Options** | | ---------------- | ------------------------------------- | | `basis` | `auto` : auto | | | [REM_OPTIONS](#rem-options) | | | [FRACTION_OPTIONS](#fraction-options) | | `flexDirection` | `row` : row | | | `rowReverse` : row-reverse | | | `column` : column | | | `columnReverse` : column-reverse | | `flexWrap` | `nowrap` : nowrap | | | `wrap` : wrap | | | `wrapReverse` : wrap-reverse | | `flex` | `1` : 1 1 0% | | | `auto` : 1 1 auto | | | `initial` : 0 1 auto | | | `none` : none | | `flexGrow` | | | `flexShrink` | | | `order` | `first` : -9999 | | | `last` : 9999 | | `cols` | `none` : none | | | `subgrid` : subgrid | | | `1` : repeat(1, minmax(0, 1fr)) | | | `2` : repeat(2, minmax(0, 1fr)) | | | `3` : repeat(3, minmax(0, 1fr)) | | | `4` : repeat(4, minmax(0, 1fr)) | | | `5` : repeat(5, minmax(0, 1fr)) | | | `6` : repeat(6, minmax(0, 1fr)) | | | `7` : repeat(7, minmax(0, 1fr)) | | | `8` : repeat(8, minmax(0, 1fr)) | | | `9` : repeat(9, minmax(0, 1fr)) | | | `10` : repeat(10, minmax(0, 1fr)) | | | `11` : repeat(11, minmax(0, 1fr)) | | | `12` : repeat(12, minmax(0, 1fr)) | | `colStart` | `auto` : auto | | `colEnd` | `auto` : auto | | `col` | `auto` : auto | | | `span1` : span 1 / span 1 | | | `span2` : span 2 / span 2 | | | `span3` : span 3 / span 3 | | | `span4` : span 4 / span 4 | | | `span5` : span 5 / span 5 | | | `span6` : span 6 / span 6 | | | `span7` : span 7 / span 7 | | | `span8` : span 8 / span 8 | | | `span9` : span 9 / span 9 | | | `span10` : span 10 / span 10 | | | `span11` : span 11 / span 11 | | | `span12` : span 12 / span 12 | | | `spanFull` : span 1 / -1 | | `rows` | `none` : none | | | `subgrid` : subgrid | | | `1` : repeat(1, minmax(0, 1fr)) | | | `2` : repeat(2, minmax(0, 1fr)) | | | `3` : repeat(3, minmax(0, 1fr)) | | | `4` : repeat(4, minmax(0, 1fr)) | | | `5` : repeat(5, minmax(0, 1fr)) | | | `6` : repeat(6, minmax(0, 1fr)) | | | `7` : repeat(7, minmax(0, 1fr)) | | | `8` : repeat(8, minmax(0, 1fr)) | | | `9` : repeat(9, minmax(0, 1fr)) | | | `10` : repeat(10, minmax(0, 1fr)) | | | `11` : repeat(11, minmax(0, 1fr)) | | | `12` : repeat(12, minmax(0, 1fr)) | | `rowStart` | `auto` : auto | | `rowEnd` | `auto` : auto | | `row` | `auto` : auto | | | `span1` : span 1 / span 1 | | | `span2` : span 2 / span 2 | | | `span3` : span 3 / span 3 | | | `span4` : span 4 / span 4 | | | `span5` : span 5 / span 5 | | | `span6` : span 6 / span 6 | | | `span7` : span 7 / span 7 | | | `span8` : span 8 / span 8 | | | `span9` : span 9 / span 9 | | | `span10` : span 10 / span 10 | | | `span11` : span 11 / span 11 | | | `span12` : span 12 / span 12 | | | `spanFull` : span 1 / -1 | | `autoFlow` | `row` : row | | | `column` : column | | | `rowDense` : row dense | | | `columnDense` : column dense | | `autoCols` | `auto` : auto | | | `minContent` : min-content | | | `maxContent` : max-content | | | `fr` : minmax(0, 1fr) | | `autoRows` | `auto` : auto | | | `minContent` : min-content | | | `maxContent` : max-content | | | `fr` : minmax(0, 1fr) | | `gap` | [REM_OPTIONS](#rem-options) | | `gapX` | [REM_OPTIONS](#rem-options) | | `gapY` | [REM_OPTIONS](#rem-options) | | `justifyContent` | `normal` : normal | | | `start` : start | | | `end` : end | | | `flexStart` : flex-start | | | `flexEnd` : flex-end | | | `center` : center | | | `between` : space-between | | | `around` : space-around | | | `evenly` : space-evenly | | | `stretch` : stretch | | `justifyItems` | `start` : start | | | `end` : end | | | `center` : center | | | `stretch` : stretch | | | `flexStart` : flex-start | | | `flexEnd` : flex-end | | `justifySelf` | `auto` : auto | | | `start` : start | | | `end` : end | | | `center` : center | | | `stretch` : stretch | | | `flexStart` : flex-start | | | `flexEnd` : flex-end | | `alignContent` | `normal` : normal | | | `center` : center | | | `start` : start | | | `end` : end | | | `flexStart` : flex-start | | | `flexEnd` : flex-end | | | `between` : space-between | | | `around` : space-around | | | `evenly` : space-evenly | | | `stretch` : stretch | | | `baseline` : baseline | | `alignItems` | `flexStart` : flex-start | | | `flexEnd` : flex-end | | | `start` : start | | | `end` : end | | | `center` : center | | | `baseline` : baseline | | | `stretch` : stretch | | | | | `alignSelf` | `auto` : auto | | | `flexStart` : flex-start | | | `flexEnd` : flex-end | | | `start` : start | | | `end` : end | | | `center` : center | | | `baseline` : baseline | | | `stretch` : stretch | | `placeContent` | | | `placeItems` | | | `placeSelf` | | | `flexXY` | | | `flexRow` | | | `flexRowReverse` | | | `flexCol` | | | `flexColReverse` | | - ### Spacing props | **Prop** | **Options** | | -------- | ------------------------------------- | | `p` | [REM_OPTIONS](#rem-options) | | `pt` | [REM_OPTIONS](#rem-options) | | `pr` | [REM_OPTIONS](#rem-options) | | `pb` | [REM_OPTIONS](#rem-options) | | `pl` | [REM_OPTIONS](#rem-options) | | `py` | [REM_OPTIONS](#rem-options) | | `px` | [REM_OPTIONS](#rem-options) | | `m` | [REM_OPTIONS](#rem-options) | | `mt` | [REM_OPTIONS](#rem-options) | | `mr` | [REM_OPTIONS](#rem-options) | | `mb` | [REM_OPTIONS](#rem-options) | | `ml` | [REM_OPTIONS](#rem-options) | | `my` | [REM_OPTIONS](#rem-options) | | `mx` | [REM_OPTIONS](#rem-options) | | `w` | [REM_OPTIONS](#rem-options) | | | [FRACTION_OPTIONS](#fraction-options) | | | `auto` : auto | | | `full` : 100% | | | `screen` : 100vw | | | `min` : min-content | | | `max` : max-content | | | `fit` : fit-content | | `minW` | [REM_OPTIONS](#rem-options) | | | [FRACTION_OPTIONS](#fraction-options) | | | `px` : 1px | | | `min` : min-content | | | `max` : max-content | | | `full` : 100% | | | `fit` : fit-content | | `maxW` | [REM_OPTIONS](#rem-options) | | | [FRACTION_OPTIONS](#fraction-options) | | | `px` : 1px | | | `min` : min-content | | | `max` : max-content | | | `full` : 100% | | | `fit` : fit-content | | `h` | [REM_OPTIONS](#rem-options) | | | [FRACTION_OPTIONS](#fraction-options) | | | `auto` : auto | | | `full` : 100% | | | `screen` : 100vh | | | `min` : min-content | | | `max` : max-content | | | `fit` : fit-content | | `minH` | [REM_OPTIONS](#rem-options) | | | [FRACTION_OPTIONS](#fraction-options) | | | `px` : 1px | | | `min` : min-content | | | `max` : max-content | | | `full` : 100% | | | `fit` : fit-content | | `maxH` | [REM_OPTIONS](#rem-options) | | | [FRACTION_OPTIONS](#fraction-options) | | | `px` : 1px | | | `min` : min-content | | | `max` : max-content | | | `full` : 100% | | | `fit` : fit-content | | `size` | [REM_OPTIONS](#rem-options) | | | [FRACTION_OPTIONS](#fraction-options) | | | `auto` : auto | | | `full` : 100% | | | `screen` : 100vw | | | `min` : min-content | | | `max` : max-content | | | `fit` : fit-content | - ### Typography props | **Prop** | **Options** | | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | `family` | `sans` : ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif | | | `serif` : ui-serif, Georgia, Cambria, "Times New Roman", Times, serif | | | `mono` : ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace | | `fs` | `xs` : 0.625rem | | | `sm` : 0.75rem | | | `base` : 1rem | | | `lg` : 1.125rem | | | `xl` : 1.25rem | | | `2xl` : 1.5rem | | | `3xl` : 1.875rem | | | `4xl` : 2.25rem | | | `5xl` : 3rem