styled-proper

# styled-proper `styled-proper` es una biblioteca construida sobre `styled-components` que permite agregar estilos dinámicos a componentes mediante props. Ofrece soporte para media queries, manejo de pseudo-clases, pseudo-elementos y brinda la flexibilidad de extender componentes aprovechando las características robustas de `styled-components`. ## Instalación Instala la biblioteca a través de npm ejecutando el siguiente comando: ```bash npm install styled-proper ``` ## Uso básico `styled-proper` permite crear componentes estilizados utilizando props dinámicas. Aquí tienes un ejemplo simple: ```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; ``` En este ejemplo, se pueden definir multiples estilos en una sola prop, dependiendo si se quiere agregar pseudo-clases o media queries, solo necesitas separar los valores con una barra vertical `|`. ### Explicación de los estilos - `bg="white|:hover=black"`: Define un background blanco cuando y fondo negro cuando se hace hover. - `color="black|:hover=white"`: Define un color negro y blanco cuando se hace hover. - `fs="14px|@sm=18px|@md=22px"`: Establece el tamaño de fuente en 14px de forma predeterminada, ajustándolo a 18px en pantallas pequeñas `@sm` y a 22px en pantallas medianas `@md`. ## Formas de implementación `styled-proper` ofrece varias formas de importar y usar componentes estilizados, proporcionando flexibilidad según tus necesidades. - **Importando los componentes de styled-proper:** Puedes importar directamente los componentes estilizados que necesites de styled-proper. Esto es útil para mantener el código limpio y 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> ); } ``` - **Importando grupos de componentes de styled-proper:** Si prefieres organizar los componentes en categorías o grupos, puedes importar secciones completas como `Box`, `Text`, `Media`, etc. Esto ayuda a manejar grandes conjuntos de componentes. ```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> ); } ``` - **Creando un componente con la función `Proper`:** Puedes usar la función Proper para crear componentes personalizados y ajustarlos según tus necesidades. Esto es especialmente útil si necesitas un control total sobre los nombres y configuraciones de los componentes. ```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> ); } ``` - **Extendiendo componentes creados con `styled-components`:** Puedes extender componentes creados con `styled-components` y seguir utilizando el sistema de props dinámicos. ```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>; ``` ## Soporte para media queries styled-proper permite agregar estilos responsivos utilizando media queries de forma sencilla. Para definirlos, simplemente antepone el símbolo @ al alias de la media query deseada. **_Ejemplo de media queries:_** A continuación, se muestra un ejemplo donde se utilizan los alias @sm y @md para ajustar el tamaño de fuente según el ancho de la pantalla: ```jsx <Text.P fs="14px|@sm=18px|@md=22px">Hola</Text.P> ``` - `14px`: Tamaño de fuente por defecto. - `@sm=18px`: Cambia el tamaño de fuente a 18px cuando el ancho de la pantalla es mayor o igual a 640px. - `@md=22px`: Cambia el tamaño de fuente a 22px cuando el ancho de la pantalla es mayor o igual a 768px. **lista de media queries soportadas:** | **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)` | ## Soporte para Pseudo-clases Con `styled-proper`, puedes manejar pseudo-clases como `hover`, `focus`, `nth-child`, `active`, entre otras. Su sintaxis es intuitiva y similar a CSS: se antepone un `:` al nombre de la pseudo-clase, seguido del valor deseado, separado por un `=`. ### Nota importante: Para usar pseudo-clases, el nombre debe estar en formato camelCase. Ejemplos: - `hover` - `focus` - `active` - `nthChild` - `lastChild` ### Ejemplo con pseudo-clase `hover`: ```jsx <Button bg="black" color="white|hover:green"> click me </Button> ``` #### Descripción: - `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. ### Ejemplo con pseudo-clase `active`: ```jsx <Button bg="black" color="white" border="1px solid white|active:green"> click me </Button> ``` #### Descripción: - `border="1px solid white"`: Borde blanco por defecto. - `border="|:active=green"`: Cambia el borde a verde cuando el botón está en estado active. ### Ejemplo con pseudo-clase `nth-child`: ```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; ``` #### Descripción: - `bg="white"`: Fondo blanco por defecto. - `:nthChild(2n)=black`: Cambia el fondo a negro para todos los elementos que sean múltiplos de 2 (índices pares). ### **lista de pseudo-clases soportadas:** | **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` | ## Uso de pseudo-clases como prop En `styled-proper`, puedes usar pseudo-clases como props para agregar estilos dinámicos. Estas se deben escribir en formato camelCase (por ejemplo, `hover`, `focus`, `active`, `lastChild`, `nthChild`, etc.). Además, puedes combinar múltiples estilos dentro de una misma prop utilizando **arrays** y **media queries**. ### Ejemplo básico Puedes agregar pseudo-clases directamente en las props utilizando corchetes `[ ]` para agrupar estilos: ```jsx <Button bg="black" color="white" hover="[bg=white;color=black]"> click me </Button> ``` **Agregando pseudo-clases dentro de la misma prop:** ```jsx <Button bg="black" color="white" hover=":active=[bg=white;color=black]"> click me </Button> ``` **Agregando media queries dentro de la misma prop:** ```jsx <Button bg="black" color="white" hover="[bg=red;color=white]|@sm=[bg=blue;color=black]"> click me </Button> ``` **Agregando pseudo-clases y media queries dentro de la misma prop:** ```jsx <Button bg="black" color="white" hover=":active=[bg=red;color=white]|:active@sm=[bg=blue;color=black]"> click me </Button> ``` si la pseudo-clase tiene parámetros, se debe agregar el parámetros se define mediante un array, donde el primer elemento es el parámetro y el segundo elemento es el valor, por ejemplo: ```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; ``` **Lista de pseudo-clases mediante props soportadas:** | **Pseudo-clase original** | **Formato de la lista** | | ------------------------- | ----------------------- | | `: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` | ## Soporte para Pseudo-elementos También puedes manejar pseudo-elementos como `before`, `after`, `first-letter`, `first-line`, `selection`, `marker`, `placeholder`, `backdrop`, etc., su forma de uso es similar a la de css, se antepone con `::` y luego se escribe el nombre de la pseudo-elemento, luego se escribe el valor que se quiere aplicar, separado por `=`. Cabe mencionar que los pseudo-elementos para su uso se deben usar en convención camelCase, por ejemplo `before`, `after`, `firstLetter`, `firstLine`, `selection`, `marker`, `placeholder`, `backdrop`, etc. Ejemplo con pseudo-elemento `first-letter`: ```jsx <Text.P color="black|::firstLetter=red">Hola</Text.P> ``` Ejemplo con pseudo-elemento `before`: ```jsx <Text.P position="relative|::before=absolute" content="::before=hi" top="::before=0" left="::before=0"> Hola </Text.P> ``` Ejemplo con pseudo-elemento usando media queries: ```jsx <Text.P position="relative|::before=absolute" content="@md::before=hi" top="@md::before=0" left="@md::before=0"> Hola </Text.P> ``` **lista de pseudo-elementos soportados:** | **Pseudo-elemento original** | **Pseudo-elementos de styled-proper** | | ---------------------------- | ------------------------------------- | | `::before` | `::before` | | `::after` | `::after` | | `::first-letter` | `::firstLetter` | | `::first-line` | `::firstLine` | | `::selection` | `::selection` | | `::marker` | `::marker` | | `::placeholder` | `::placeholder` | | `::backdrop` | `::backdrop` | ## Uso de pseudo-elementos como prop También puedes usar pseudo-elementos como prop. Para su uso se deben usar en convención camelCase, por ejemplo `before`, `after`, `firstLetter`, `firstLine`, `selection`, `marker`, `placeholder`, `backdrop`, etc. para aplicar multiples estilos a la misma prop, se debe agregar las props dentro de dos corchetes `[]`, y separar cada par de prop y valor con `;`. Por ejemplo: ```xml <Button bg="black" color="white" position="relative" after="[position=absolute;content=hi;top=0;left=0]">click me</Button> ``` **Agregando media queries dentro de la misma 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> ``` **Lista de pseudo-elementos mediante props soportadas:** | **Pseudo-elemento original** | **Formato de uso** | | ---------------------------- | ------------------ | | `::before` | `before` | | `::after` | `after` | | `::first-letter` | `firstLetter` | | `::first-line` | `firstLine` | | `::selection` | `selection` | | `::marker` | `marker` | | `::placeholder` | `placeholder` | | `::backdrop` | `backdrop` | ## Soporte para Combinadores `styled-proper` soporta el uso de combinadores css como `>`, `+`, `~`, ` `. Para su uso se debe anteponer el símbolo `&` seguido del combinador correspondiente y luego el elemento al que se aplica el estilo, muy similar a CSS. Ejemplo usando el combinador de hijo directo `>` ```jsx <Box.Div color="&>div=red"> <div>1</div> <section> <div>2</div> </section> <div>3</div> </Box.Div> ``` Ejemplo usando el combinador hermano adyacente `+` ```jsx <div> <Box.Div color="&+div=red">1</Box.Div> <div>2</div> <div>3</div> </div> ``` Ejemplo usando el combinador de hermano general `~` ```jsx <div> <Box.Div color="&~div=red">1</Box.Div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> ``` Ejemplo usando el combinador de descendientes   ` ` ```jsx <Box.Div color="& p=red"> <div>1</div> <div> <p>2</p> </div> <div>3</div> </Box.Div> ``` **Lista de combinadores soportados:** | **Combinador** | **Descripción** | | -------------- | ---------------------------------------------------------------- | | `&>` | Selecciona los hijos directos del elemento actual. | | `&~` | Selecciona los elementos hermanos generales del elemento actual. | | `&+` | Selecciona el hermano inmediato del elemento actual. | | `& ` | Selecciona los descendientes del elemento actual. | ## uso de combinadores como prop El uso de combinadores mediante prop funciona recibiendo como parámetro un array, donde el primer elemento es el combinador y el segundo los estilos: Ejemplo usando el combinador de hijo directo `>` con la prop `directChild`: ```jsx <div> <Box.Div directChild={['div', '[color=red]']}> <div>1</div> <section> <div>2</div> </section> <div>3</div> </Box.Div> </div> ``` Ejemplo usando el combinador hermano adyacente `+` con la prop `adjacentSibling`: ```jsx <div> <Box.Div adjacentSibling={['div', '[color=red]']}>1</Box.Div> <div>2</div> <div>3</div> </div> ``` Ejemplo usando el combinador de hermano general `~` con la prop `generalSibling`: ```jsx <div> <Box.Div generalSibling={['div', '[color=red]']}>1</Box.Div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> ``` Ejemplo usando el combinador de descendientes ` ` con la prop `descendant`: ```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 ### **Lista de Componentes de `styled-proper`** | **Elemento HTML** | **Componente** | | ----------------- | -------------- | | `<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` | ### **Lista de Grupo de componentes de `styled-proper`** | **Grupo** | **Componentes** | | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **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` | ### **Lista de Props disponibles `styled-proper`** - ### Layout props | **Propiedad** | **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 | **Propiedad** | **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 | **Propiedad** | **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 | **Propiedad** | **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