Skip to content

Commit

Permalink
Merge pull request #85 from dapize/feature/84/semantic-directives
Browse files Browse the repository at this point in the history 
Feature/84/semantic directives
  • Loading branch information
@dapize
dapize authored Jun 27, 2022
2 parents cff639a + c7a0450 commit 382bcbc
Show file tree
Hide file tree
Showing 57 changed files with 1,440 additions and 652 deletions.
117 changes: 88 additions & 29 deletions DOCS.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,40 @@

Los estilos creados por layouter se crean al vuelo **(on the fly)**, _[cuando el navegador termina de cargar la web]_. Podemos definir las columnas, los paddings, los margenes, el ancho y alto de un elemento y hasta determinar si el nodo tendrá display **'flex'** y sus derivados.

## 🔧 Instalación

Solo hay que llamar, en el HTML, al script **layouter.umd.js** que se encuentra dentro de la carpeta **'dist'** de este repositorio:

```html
<script src="layouter.umd.js"></script>
```

**también** puedes usar **uno** de estos CDNs:

```html
<script src="https://cdn.jsdelivr.net/npm/layouter.js/dist/layouter.umd.js" defer></script>
<script src="https://unpkg.com/layouter.js/dist/layouter.umd.js" defer></script>
```

o puedes instalarlo en tu proyecto con:

```properties
npm install layouter.js
// o
yarn add layouter.js
```

Si se requiere usarlo **en SSR debes pasar el objeto windows de 'jsdom'** y tu configuración, así:

```javascript
const { JSDOM } = require('jsdom');
const { window } = new JSDOM();

require('layouter.js')(window, {
// tu configuración aquí
});
```

## ⚙️ Configuración

Para una configuración personalizada debemos **crear una variable llamada 'layouterConfig'** en el objeto global 'window', la cual contendrá un objeto con las siguientes propiedades:
Expand Down Expand Up @@ -63,31 +97,31 @@ Ese alias definidos se usará para determinar el breakpoint en cada valor de las

## Directivas

| Nombre | Ejemplo | Descripción |
| ---------------------------------- | -------------------------- | ------------------------------------------------------------------------------------------------------------ |
| [Cols](#cols) | `cols="13/15"` | Determinará las columnas, osea **el width** (de manera porcentual). |
| [Mart](#mart) | `mart="10"` | Determina el **margen** superior de un nodo. |
| [Marr](#marr-marb-marl) | `marr="2/15"` | Determinar el **margen** derecho de un nodo. |
| [Marb](#marr-marb-marl) | `marb="30"` | Determinar el **margen** inferior de un nodo. |
| [Marl](#marr-marb-marl) | `marl="3/15"` | Determinar el **margen** izquierdo de un nodo. |
| [Mar](#mar) | `mar="20-2/15-30-3/15"` | Es un shorthand de las directivas: [mart](DOCS.md#mart), [marr, marb, y marl](DOCS.md#marr-marb-marl). |
| [Padt](#padt) | `padt="10"` | Determina el **padding** superior de un nodo. |
| [Padr](#padr-padb-padl) | `padr="2/15"` | Determinar el **padding** derecho de un nodo. |
| [Padb](#padr-padb-padl) | `padb="30"` | Determinar el **padding** inferior de un nodo. |
| [Padl](#padr-padb-padl) | `padl="3/15"` | Determinar el **padding** izquierdo de un nodo. |
| [Pad](#pad) | `pad="20-2/15-30-3/15"` | Es un shorthand de las directivas: [padt](DOCS.md#padt), [padr, padb, y padl](DOCS.md#padr-padb-padl). |
| [Flex](#flex) | `flex="jc:ce ai:fs fd:co"` | Determina el **display flex** del nodo, y sus derivados. |
| [Wdh](#width) | `wdh="100"` | Determina el **ancho** del nodo en pixeles u otra [unidad de medida](#unidades-de-medida-definidas). |
| [Hgt](#height) | `hgt="100"` | Determina el **alto** del nodo en pixeles u otra [unidad de medida](#unidades-de-medida-definidas). |
| [Mxw](#maxwidth) | `mxw="200"` | Determina el **máximo ancho** del nodo en píxeles u otra [unidad de medida](#unidades-de-medida-definidas). |
| [Mxh](#maxheight) | `mxh="100 150@sm"` | Determina el **máximo alto** del nodo en píxeles u otra [unidad de medida](#unidades-de-medida-definidas). |
| [Miw](#minwidth-minheight) | `miw="200"` | Determina el **mínimo ancho** del nodo en píxeles u otra [unidad de medida](#unidades-de-medida-definidas). |
| [Mih](#minwidth-minheight) | `mih="100 150@sm"` | Determina el **mínimo alto** del nodo en píxeles u otra [unidad de medida](#unidades-de-medida-definidas). |
| [Pos](DOCS.md#position) | `pos="re"` | Determina la **posición** del nodo. |
| [T](DOCS.md#top-right-bottom-left) | `t="10"` | Determina el **top** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [R](DOCS.md#top-right-bottom-left) | `r="10"` | Determina el **right** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [B](DOCS.md#top-right-bottom-left) | `b="10"` | Determina el **bottom** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [L](DOCS.md#top-right-bottom-left) | `l="10"` | Determina el **left** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| Nombre | Alias | Ejemplos | Descripción |
| ---------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| [Cols](DOCS.md#cols) | `c` | `cols="13/15"`, `c="5/10"` | Determinará las columnas, osea el 'width' de manera porcentual. |
| [Mart](DOCS.md#mart) | `mt`, `margin-top` | `mart="10"`, `mt="20"`, `margin-top="12"` | Determina el **margen** superior de un nodo. |
| [Marr](DOCS.md#marr-marb-marl) | `mr`, `margin-right` | `marr="2/15"`, `mr="5/10"`, `margin-right="3/5"` | Determinar el **margen** derecho de un nodo. |
| [Marb](DOCS.md#marr-marb-marl) | `mb`, `margin-bottom` | `marb="30"`, `mb="50"`, `margin-bottom="25"` | Determinar el **margen** inferior de un nodo. |
| [Marl](DOCS.md#marr-marb-marl) | `ml`, `margin-left` | `marl="3/15"`, `ml="5/10"`, `margin-left="3/5"` | Determinar el **margen** izquierdo de un nodo. |
| [Mar](DOCS.md#mar) | `m`, `margin` | `mar="20-2/15-30-3/15"`, `m="20-2/15-30-3/15"`, `margin="20-2/15-30-3/15"` | Es un shorthand de las directivas: [mart](DOCS.md#mart), [marr, marb, y marl](DOCS.md#marr-marb-marl). |
| [Padt](DOCS.md#padt) | `pt`, `padding-top` | `padt="10"`, `pt="20"`, `padding-top="30"` | Determina el **padding** superior de un nodo. |
| [Padr](DOCS.md#padr-padb-padl) | `pr`, `padding-right` | `padr="2/15"`, `pr="3/16"`, `padding-right="4/17"` | Determinar el **padding** derecho de un nodo. |
| [Padb](DOCS.md#padr-padb-padl) | `pb`, `padding-bottom` | `padb="30"`, `pb="40"`, `padding-bottom="50"` | Determinar el **padding** inferior de un nodo. |
| [Padl](DOCS.md#padr-padb-padl) | `pl`, `padding-left` | `padl="3/15"`, `pl="4/16"`, `padding-left="5/17"` | Determinar el **padding** izquierdo de un nodo. |
| [Pad](DOCS.md#pad) | `p`, `padding` | `pad="20-2/15-30-3/15"`, `p="20-2/15-30-3/15"`, `padding="20-2/15-30-3/15"` | Es un shorthand de las directivas: [padt](DOCS.md#padt), [padr, padb, y padl](DOCS.md#padr-padb-padl). |
| [Flex](DOCS.md#flex) | `fx` | `flex="jc:ce ai:fs fd:co"`, `flex="jc:fe ai:fs`, `fx="align-items:center flex-wrap:wrap"` | Determina el **display flex** del nodo y sus derivados. |
| [Wdh](DOCS.md#width) | `w`, `width` | `wdh="100"`, `w="200"`, `width="300"` | Determina el **ancho** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [Hgt](DOCS.md#height) | `h`, `height` | `hgt="100"`, `h="200"`, `height="300"` | Determina el **alto** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [Mxw](DOCS.md#maxwidth) | `max-width` | `mxw="200"`, `max-width="300"` | Determina el **máximo ancho** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [Mxh](DOCS.md#maxheight) | `max-height` | `mxh="200"`, `max-height="300"` | Determina el **máximo alto** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [Miw](DOCS.md#minwidth) | `min-width` | `miw="300"`, `min-width="400"` | Determina el **mínimo ancho** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [Mih](DOCS.md#minheight) | `min-height` | `mih="300"`, `min-height="400"` | Determina el **mínimo alto** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [Pos](DOCS.md#position) | `position` | `pos="re"`, `position="relative"` | Determina la **posición** del nodo. |
| [T](DOCS.md#top-right-bottom-left) | `top` | `t="10"`, `top="20"` | Determina el **top** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [R](DOCS.md#top-right-bottom-left) | `right` | `r="10"`, `right="20"` | Determina el **right** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [B](DOCS.md#top-right-bottom-left) | `bottom` | `b="10"`, `bottom="20"` | Determina el **bottom** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |
| [L](DOCS.md#top-right-bottom-left) | `left` | `l="10"`, `left="20"` | Determina el **left** del nodo en píxeles u otra [unidad de medida](DOCS.md#unidades-de-medida-definidas). |

## Métodos

Expand Down Expand Up @@ -687,9 +721,9 @@ Sirven para determinar los paddings derechos, inferiores e izquierdos respectiva

### Flex

Esta es la directiva más interesante, porque es el que determina el **'display'** del elemento. El valor de la directiva **'flex'** se separa entre dos puntos, y no convencionalmente con guión como se hace en **'cols', 'mar' y 'pad'.**
Esta es la directiva más interesante, porque es el que determina el **'display:flex'** al elemento de forma automática. El valor de la directiva **'flex'** se separa entre dos puntos, y no convencionalmente con guión como se hace en **'cols', 'mar' y 'pad'.**

#### Equivalencias de abreviaciones:
#### Abreviaciones de valores:

- **jc:** justify-content
- **ai:** align-items
Expand Down Expand Up @@ -723,6 +757,16 @@ Esta es la directiva más interesante, porque es el que determina el **'display'
<div flex="jc:ce jc:fs@sm ai:fs@sm jc:fe@md">...</div>
```

o de forma más semántica

```html
<div
flex="justify-content:center justify-content:flex-start@sm align-items:flex-start@sm justify-content:flex-end@md"
>
...
</div>
```

> **OJO**: Es posible determinar más de un estilo en el mismo breakpoint, en el caso del ejemplo de arriba, se determinó el `justify-content: flex-start y align-items: flex-start` para el breakpoint 'sm' osea (tablet)

...luego de auto procesarce obtendríamos este resultado:
Expand Down Expand Up @@ -978,7 +1022,7 @@ Sirven para determinar el mínimo ancho y mínimo alto en pixeles respectivament

Sirve para determinar el posicionamiento de un elemento.

#### Equivalencias a sus valores
#### Abreviaciones de valores

- **st**: static
- **ab**: absolute
Expand All @@ -994,6 +1038,12 @@ Sirve para determinar el posicionamiento de un elemento.
<div pos="re ab@sm fi@md st@lg">...</div>
```

o de forma más semántica

```html
<div position="relative absolute@sm fixed@md static@lg">...</div>
```

...luego de auto procesarce obtendríamos este resultado:

```html
Expand Down Expand Up @@ -1044,6 +1094,15 @@ Sirven para determinar el **top**, **right**, **bottom** y **left** de un elemen
<div l="100 200@sm 300@md">...</div>
```

o de forma más semántica

```html
<div top="10 20@sm 30@md">...</div>
<div right="40 50@sm 60@md">...</div>
<div bottom="70 80@sm 90@md">...</div>
<div left="100 200@sm 300@md">...</div>
```

...luego de auto procesarce obtendríamos este resultado:

```html
Expand Down Expand Up @@ -1396,7 +1455,7 @@ layouter.styles = {
"cols-15\\/27@md": "@media screen and (min-width: 900px){.cols-15\\/27\\@md{width:55.556%}}"
"flex-jc\\:c": ".flex-jc\\:c{justify-content:center;display: flex}",
}
layouter.version = '1.3.0'
layouter.version = '1.4.0'
```

[&uarr; Volver Arriba](#utils)
Loading

0 comments on commit 382bcbc

Please sign in to comment.