Acceder al contenido principal

Blog

Volver a Blog

Desarrollando siguiendo el Atomic Design

31 Oct 019
atomic design
avatar_eduardo_valencia

Diseño , CSS , Desarrollo , Drupal ,

Hoy vamos a hablar sobre un tema básico y necesario para el desarrollo con layout builder o incluso para el desarrollo de bloques en Drupal, ya que ésto nos facilitará mucho la integración y el desarrollo.

Vamos a separar en pasos el proceso a seguir para conseguir un diseño atómico que nos permitirá trabajar algo más rápido y trabajar de manera más eficiente:

  1. Definir los layouts: debemos tener claros los diferentes layouts que formarán nuestro diseño, es decir, separar si en ciertas secciones hay dos columnas, tres o las que hagan falta, ya que sobre éstos layouts vamos a integrar nuestro componentes.

  2. Definir los componentes: debemos enfocar el desarrollo de componentes desde lo más pequeño a lo más grande que podamos crear, teniendo en cuenta que lo desarrollaremos por separado y finalmente los uniremos. Podemos pensar en ésto de la siguiente manera:atomic design 

    Una molécula es lo más pequeño que podemos desarrollar, éste caso sería un elemento del bloque drupal que crearemos posteriormente. Las moléculas son los bloques que crearemos de drupal, es decir, un conjunto de elementos. El organismo sería un conjunto de bloques, es decir, un bloque compuesto completo. Los templates son el conjunto de bloques ya insertados sobre el propio layout pero sin maquetar, teniendo la composición de cómo iría todo el template. Por último, tenemos las páginas que si que son el resultado final que queremos obtener. De ésta manera, lo que queremos conseguir es tener todo tan separado, que a la hora de tener que retocar o remaquetar algo, como hacerlo sobre el propio componente, ya lo tenemos hecho en todo el portal, puesto que es siempre el mismo componente el que se estará pintando.


  3. Nombrar correctamente los layouts y componentes: el naming es algo importante, por ello deberíamos seguir unas pautas:
    • KISS (keep it stupid simple): como dice propiamente, mantenlo los más simple que puedas.
    • Mantenlo lo más obvio posible, que cualquiera pueda suponer como se llama.
    • Mantenlo descriptivo, de manera que haga referencia a lo que representa.
    • Pensado para ser reusado.

  4. Mapear los componentes hasta el contenido: identificar todas las situaciones en que son mostrados los elementos, hacer un listado separando todo el diseño y viendo los puntos comunes en que se muestran o no los componentes.

Comentarios

Añadir nuevo comentario