Es un proyecto “boilerplate” o “starter” para usar como punto de partida para comenzar un proyecto de maquetación con desy-frontendhtml.

Qué podrás hacer

• Maquetar las páginas de tu proyecto y verlas en un servidor local.

• Compilar tus páginas en html estático + css minificado.

• Usar las clases del framework de css: Tailwind CSS configurado para nuestro sistema de diseño (ver tailwind.config.js de desy-frontendhtml).

• Usar los componentes de desy-frontendhtml en forma de macros del lenguaje de plantillas Nunjucks. Sólo tendrás que sólo copiar-pegar desde la documentación pública de los ejemplos de componentes de desy-frontend html y configurar con tus propios parámetros.

• Crear tus propios includes en Nunjucks para ser más eficiente en tu maquetación.

• Crear tus propios componentes de proyecto, importarlos y usarlos como macros de Nunjucks en tus páginas.

• Documentar tus páginas y componentes propios de proyecto en páginas de documentación (opcional).

Pasos a seguir

1. Descargar el proyecto del repositorio.

2. Cambiar el nombre del proyecto (desy-frontendhtml-starter) en los archivos: package.json, README.md y docssrc/index.html para que se llamen como tu proyecto concreto (mi-proyecto).

3. Crea tu primera página: duplica la página testpagina-templateprueba.html que está en /src/templates/pages, renómbrala como holamundo.html y úsala como punto de partida.

4. Ejecutar proyecto: npm install y npm run dev

5. Mira tu nueva página creada aquiaquí: http://localhost:3000/holamundo.html

Pasos a seguir para usar un template de página

En estos pasos se detalla cómo crear un proyecto nuevo a partir de desy-html-starter, configurarlo a medida y usar una plantilla en una página nueva dentro de ese proyecto.

• Podrás utilizar los templates que encontrarás en la ruta de desy-html-starter: src/templates/pages/ comienzan con: _template.*.njk también por _page.*.njk .

• Crea tu primera página usando uno de los templates de desy-html-starter.

  • Duplica la página src/pagina-prueba.html y renómbrala como mi-pagina.html

  • Cambia la línea {% extends "pages/_template.test.njk" %} por el template que desees, por ejemplo {% extends "pages/_template.logged-selector.njk" %}

• Enlaza tu nueva página en la documentación del proyecto.

  • Edita la página: src/index.html

  • Añade un item la lista que enlace a tu nueva página:

    Code Block
    <li class="mb-base"> <a class="c-link" href="mi-pagina.html">Mi página</a> </li>

     

• Ya puedes publicar tu nueva página: npm run dev

• Mira tu nueva página creada aquí: http://localhost:3000/templates/pages/mi-pagina.html