TL: DR
¿Construyes usando la luma nativa o el tema en blanco? O algo más ?
Esto depende de usted, declarar un tema principal es opcional. Si no declara un padre, seguirá recurriendo a los módulos (por ejemplo, Magento_Catalog) que proporcionan archivos XML y de plantilla pero sin estilo.
¿Utiliza alguna extensión para ayudarlo a desarrollar su tema?
Como prefiero trabajar con SCSS y GULP, ahora uso Frontools y el tema en blanco SCSS . Elimina mucho el estrés de lidiar con el flujo de trabajo predeterminado Grunt / LESS.
¿Qué pasos sigues al desarrollar un tema desde cero?
- Declara el tema
- Eliminar el tema principal CSS (si es necesario)
- Agregue su propio CSS / LESS / SCSS
Mi opinión personal es que es mejor crear su propio "tema en blanco" desde cero, ya que puede adaptarlo para que sea exactamente lo que necesita.
Así es como crearía un tema desde cero, he usado NewStore / default como mi proveedor y nombre del tema.
Ahora para la respuesta más detallada ...
Crear el tema (según documentos oficiales)
Crea el tema según los documentos oficiales
Opcionalmente declarar un padre
Dentro de app/design/frontend/NewStore/default/theme.xmlusted tiene la opción de declarar un tema principal o no, para este ejemplo, he dejado de lado la línea 3 ( <parent>Vendor/theme</parent>) para que no haya un tema principal . Esto significa que todas las plantillas / archivos de diseño provendrán de los módulos mismos y no de Blank o Luma, y no habrá estilo de tema ya que esto se agrega en el tema en blanco.
Mi theme.xml se ve así:
<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>NewStore default</title>
<media>
<preview_image>media/preview.jpg</preview_image>
</media>
</theme>
Elimine el estilo (si establece un tema principal) y agregue su propio CSS
Si establece en blanco o Luma como padre, deberá evitar que se carguen los archivos CSS. Para hacer esto, cree app/design/frontend/NewStore/default/Magento_Theme/layout/default_head_blocks.xmly agregue el siguiente XML:
<?xml version="1.0" ?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Remove blank/luma theme styling if you declared a parent -->
<remove src="css/styles-m.css" />
<remove src="css/styles-l.css" />
<remove src="css/print.css" />
<!-- Add your own CSS files -->
<css src="css/styles.css" />
</head>
</page>
Esto elimina styles-m.css, styles-l.cssy print.cssagregados por el tema en blanco. También agrega styles.css como base para su propio CSS.
Si no especificó un padre, puede eliminar las 3 <remove />etiquetas en el código anterior.
Agrega tu propio CSS
Ahora puede diseñar su tema como quiera, soy fanático de Sass en lugar de MENOS, así que agregué este archivo: app/design/frontend/NewStore/default/web/css/styles.scss
Cambié el color de fondo aquí solo para demostrar que esto funciona, idealmente solo usarías este archivo para importar otros archivos Sass / Less.
Resultado
El resultado de lo que acabo de hacer es un tema sin estilo (aparte de mi hermoso fondo verde) que le permite diseñar su tema sin trabajar con el estilo de Magento (a veces difícil de trabajar).
Consejos
Si prefiere trabajar con SCSS y no tiene tiempo para crear un tema desde cero, le recomiendo usar Frontools y el tema en blanco SCSS de Snowdog Apps .
Me parece que el aspecto más frustrante de trabajar con el código de front-end de Magento es cuán específico es su estilo, para ayudar a evitar esto, recomendaría usar la convención de nomenclatura BEM al escribir su propio estilo.
También son importantes los comentarios útiles, si un desarrollador acostumbrado a trabajar con Luma / Blank trabajó en un tema creado desde cero, probablemente encontraría que las cosas funcionan de manera muy diferente a lo que esperan.