Maquetado por componentes

Maquetación por componentes: planificación en el kickoff, componentes, scss, testing

Escrito por~ Sutty

planificación / kickoff

Separar el diseño en componentes mínimos, a veces los componentes están compuestos de otros componentes, separar todo lo más que podamos (aunque se usen una sola vez). Por regla general cualquier cosa que no es parte de la grilla/wireframe es un componente
Abrir un issue por cada componente con recorte de pantalla, funcionamiento, etc

Los componentes van dentro de
```
_includes/
```
Si un componente tiene variantes, hacer un directorio
```
_includes/component/
```
y dentro poner todas las variantes
Empezar el archivo con un bloque de
```
{% comment %}
```
con la descripción y la documentación de los parámetros en este formato:
```
@param :NOMBRE [TIPO] DESCRIPCION
```
donde NOMBRE es el nombre del parámetro que se usa al llamarlo
```
{% include componente.html NOMBRE=VALOR %}
```
, TIPO es el tipo de VALOR (
```
String
```
,
```
Integer
```
,
```
Array
```
,
```
Hash
```
,
```
HTML
```
,
```
Boolean
```
--por lo general va a ser
```
String
```
o
```
HTML
```
) y DESCRIPCION una ayuda (esto sigue el formato de https://yardoc.org/)
Luego viene el componente en sí
Formato de nombres para parámetros
- Nombre del atributo al que aplican, por ejemplo
```
href
```
  para indicar que va a ir al
```
href
```
  de un
- Nombre del elemento + atributo, si acepta varios atributos del mismo nombre, por ejemplo
```
a_class
```
  y
```
img_class
```
  son clases para un y un dentro del mismo componente
Los componentes solo usan valores que se pasan como parámetros, no usan
```
{{ page }}
```
ni
```
{{ content }}
```
Se puede pasar HTML como parámetro usando un
```
{% capture %}
```

Las variables se definen en
```
_data/theme.yml
```
, acepta strings, booleans, números, hashes y arrays (no anidadas)
Pueden ser variables de bootstrap o variables que nos inventemos
Las variables se importan en
```
assets/css/styles.scss
```
no tenemos que hacer nada
La convención es snake case
```
nombre_de_variable
```
en yaml y luego en scss se llaman con kebab case
```
nombre-de-variable
```
esto es para que puedan ser llamadas en liquid

Para poder testear cada componente por separado, se crea un archivo del mismo nombre en
```
_includes/theme/COMPONENTE.html
```
En este archivo se cargan ejemplos de uso del componente con distintos valores hardcodeados, no es necesario traerlos de un post (que quizás no exista, es decir que no hay dependencia entre carga de contenido y componentes)
Este archivo también puede contener texto para documentar
Si estamos demostrando el uso de una utilidad definida en
```
_sass/helpers.scss
```
, podemos llamar a las variables de SCSS con
```
{{ site.data.theme.VARIABLE }}
```
Para poder importar esta prueba de componente hay que agregar el nombre del archivo sin .html en
```
_data/components.yml
```
. si el componente tiene que ocupar todo el ancho de la pantalla (como un menú o footer), puede ir en
```
_data/full_width_components.yml
```

Todos los componentes van a estar disponibles en

https://SITIO.testing.sutty.nl/theme/#componente