Theme Development

FILES INFORMATION

In each directory you can read information about it and its files. Let's talk about some files in our theme root directory!

README.md → Breve introducción al Theme, requerimientos, instalación y uso.

JSON FILES

package.json → Npm dependencies, for 'npm install'. If you want a new dependency for your project 'npm install your-dependency --save' will save your dependency in this file.

composer.json → File to install Da Vinci with composer

da_vinci.icons.json → File with icon information. This file is use for import and export into Icomoon.

package-lock.json → fichero generado tras el npm install, bloquea las versiones usadas paraa que no haya incompatibilidad si otro compañero trabaja.

GULP FILE

gulpfile.js → Here we have all our tasks that we can do with Gulp. Write 'gulp' in your terminal and read some help about our tasks.

YML/PHP FILES

da_vinci.breakpoints.yml → Define Da Vinci breakpoints (Important for responsive).

da_vinci.info.yml → The main file of our theme. We define name, version, base theme... Also we define our regions, and call to our css/js libraries.

da_vinci.libraries.yml → To define our css and js libraries.

da_vinci.theme → See Preprocess and suggestions for more info .

PREPROCESS: You can affect the output of certain HTML via preprocess functions. For example, if you wanted to add a class to a menu and preferred to do this at the PHP level you can.
The main role of the preprocessors is to set up variables to be placed within the template. If you need to preprocess theme variables for templates, you only need to implement hooks for the chosen template in da_vinci.theme file.
Create a function such as da_vinci_preprocess_HOOK where HOOK refers to the item you wish to affect.
Write your changes and save.
Rebuild the cache so your changes are available.

theme-settings.php → Config and Da Vinci settings that you can admin in admin/appearance/settings/da_vinci

IMG FILES

logo.svg & logo.png → Logo en ambas versiones, por defecto Drupal pilla el svg. en el caso que se quiera el png hay que hacer esto ….., y siempre está la opción  de poder subirlo desde aqui.
Default logo, you can override or add your own in the Da Vinci settings.

favicon.ico & favicon.png → Favicon en ambas versiones. por defecto Drupal pilla .ico el png es una issue abierta en el core, y siempre existe la opción de subirlo desde interfaz. 
https://www.drupal.org/project/drupal/issues/3037922 y podemos instalar módulo responsive_favicon
Default Favicon, you can override or add your own in the Da Vinci settings.

screenshot.png → Screenshot que aparecerá en Apariencias, se recomienda poner un pantallazo del diseño de la home.
The main image of the theme that you see in Appearance, you can override for add your own.

FOLDER'S INFORMATION

ASSETS

Tendremos la carpeta font, sass e images. 

Carpeta font junto a la carpeta sass para poder usar una carga limpia como lo hacemos con las imágenes ../fonts. 

Carpeta images será donde meteremos nuestras imágenes y estas se optimizarán y serán enviadas a la carpeta images. *** Puede que haya algún error por subcarpetas o por extensión de fichero, en ese caso recomendamos usar https://tinypng.com/ y añadirla a la carpeta images. Verificar que la borra o que no pasa nada raro. 

CONFIG

Tendremos dos carpetas, install y scheme. la que nos importa es la de install que básicamente es donde se definen que bloques se muestran en que región en la primera instalación.

CSS

Tendremos los ficheros css compilados. esta carpeta como indica su readme no debe ser tocada

IMAGES

Tendremos los recursos. leer README.md. Esta será tu carpeta images a usar tanto en rutas como en tu css. “../images”. tus imágenes optimizadas se mandarán aqui. Recuerda añadirlas a la carpeta assets/images para que el gulp las minimize, optimice y las mande a esta carpeta.

JS

Tendremos ficheros

TEMPLATES

Tendremos los templates modificados por mejoras de accesibilidad y apariencia.

OVERRIDING TEMPLATES: Da Vinci is using Classy as base theme so an override is as simple as copying one of Classy's templates into your templates directory.
More info in templates directory (README.md file)

README.md
block
layout

bem y accesibilidad. 
comentar el diff de las 4 plantillas o 5 en caso de añadir el search o alguna más. Respecto a Classy del core.

SASS FOLDER

IMPORTANT: Remember don't edit the main.css files, because your changes will be removed when Gulp compiles.
For more info, check README in /assets/sass directory.

Readme.md → merece la pena leerlo, de todas formas 

Once you have your 'gulp watch' launched, everytime you write in a sass file
and then save, Gulp will save your changes into main.css, so main.css will be
overriden. Or if you have new changes and run 'gulp styles:dev' (for
development enviroment) or 'gulp styles:pro' (production enviroment)
you will be in the same situation.

Sass files are classified into different categories:

• Base → skinr file (which contains elements and typography styles)· 
• Components → styles for component elements such as breadcrumbs, pager, buttons... and other elements you can be used anywhere on the website.
• Layout → styles for layout elements such as header, footer, sidebar...
• Pages → styles for specific kind of pages
• Utils → functions, helpers, mixins and variables.

Feel free to add your own sass files :)

For more info, check main.sass (located in da_vinci/assets/sass)

Podemos empezar a trabajar con nuestro Theme usando  'gulp watch' y empezar a customizarlo a nuestro gusto e ir viendo los resultados.

Para ello vamos a realizar un pequeño check al fichero main.sass y luego iremos a las carpetas comentadas anteriormente (Base, Components, Layout, Pages & Utils).