Boilerplate Frontend basado en Componentes

• Inicio
• Para comenzar
• Estructura de Boilerplate
• Scripts NPM
• Componentes Disponibles

Boilerplate para el desarrollo de proyectos Frontend basado en Componentes Web con metalenguajes (Pug y Sass) y automatización y optimización de tareas con Scripts NPM desarrollado por @jonmircha.

Después de HTML5, los componentes web son el siguiente gran salto en el paradigma del desarrollo web frontend, pero aun no están listos, sin embargo con herramientas como Node, Scripts NPM, Sass, PostCSS, UnCSS, Pug, Babel, Browserify, entre algunos otros, podemos desarrollar proyectos con la filosofía de reutilización y componetización que proponen los componentes web, sin necesidad de usar frameworks y librerías robustas como Angular, React, Vue.js o Polymer.

Además este Boilerplate tiene la filosofía de generar un sólo archivo CSS gracias a los imports de Sass y un sólo archivo JavaScript gracias a Browserify, adicionalmente con Babel puedes utilizar todas las características del estándar EcmaScript como los módulos (import y export).

↖️ regresar al índice

Para comenzar:

Sólo ejecuta los siguientes comandos:

• npm install Para instalar todas las dependencias.
• npm start Para comenzar a trabajar.
• npm run build Para publicar el proyecto.

↖️ regresar al índice

Estructura del Boilerplate:

Carpetas:

📁 src:

Es el directorio donde tendremos los archivos del proyecto en fase de desarrollo, y se estructura de la siguiente manera:

• 📁 img: Contendrá las imágenes del proyecto sin optimizar.
• 📁 js: Contendrá los archivos JS que serán compilados con Babel y unificados con Browserify.
  • 📁 components: Contendrá los archivos de la programación JS de los componentes.
  • 📄 index.js: Es el archivo principal JS del proyecto, en el que se podrá importar los componentes que se requieran de la carpeta components o de las dependencias que se tenga en node_modules.
• 📁 pug: Contendrá los archivos .pug que compilarán a archivos HTML.
  • 📁 includes: Contendrá los archivos .pug que serán incluidos en algún otro archivo y que por tal, no serán compílados a HTML.
    • 📁 components: Contendrá los archivos de la estructura y contenido Pug de los componentes.
    • 📄 layout.pug: Contiene la estructura básica de un documento HTML5.
    • 📄 metatags_webapp.pug: Contiene los metatags mínimos y necesarios para convertir el proyecto en una WebApp.
  • 📁 pages: Contendrá los archivos .pug que serán compilados a HTML.
• 📁 scss: Contendrá los archivos .scss que compilarán a archivos CSS.
  • 📁 components: Contendrá los archivos partials de la presentación SCSS o CSS de los componentes.
  • 📁 pages: Contendrá los archivos partials .scss o .css de los estilos de cada una de las secciones del proyecto.
  • 📁 vendors: Contendrá los archivos partials .scss o .css de librerías de terceros que el proyecto ocupe.
  • 📄 style.scss: Es el archivo principal SCSS del proyecto que compilara a CSS, en el que se podrá importar partials de las carpetas components, pages, vendors o de las dependencias que se tenga en node_modules.
• 📁 statics: Contendrá todos los archivos estáticos del proyecto que no necesiten optimizarse o transformarse como videos, audios, .ico, .pdf, .xml, .txt, etc.

📁 public:

Es el directorio donde tendremos la versión para publicar del proyecto con todos los archivos HTML generados, lás imágenes optimizadas y archivos estáticos requeridos, así como un sólo archivo CSS llamado style.css y un sólo archivo JS llamado script.js que contendrán toda la presentación y programación respectivamente.

Archivos:

• 📄 package.json: Contiene la configuración del proyecto, en el podrás ver todas las dependencias y los scripts NPM programados del Boilerplate.
• 📄 .gitignore: Indica que archivos y directorios ignorará Git al momento de sincronizar el proyecto, la configuración que se propone ha sido generada en el sitio gitignore.io y es esta: osx,node,macos,linux,windows,visualstudiocode siéntete libre de modificarla a tus necesidades.
• 📄 .editorconfig: Contiene la definición de la configuración para mantener la codificación estándar entre diferentes editores e IDEs, considera que en algunos editores tendrás que instalar un plugin adicional para que funcione, consulta el sitio editorconfig.org para saber si tu editor o ide lo soporta nativamente o requiere algún plugin.
• 📄 .babelrc: Contiene la configuración de Babel.
• 📄 statics.js: Contiene la programación necesaria para mover los archivos estáticos de la carpeta src a la carpeta public.
• 📄 uncss.json: Contiene la configuración del plugin uncss que puede ser modificada en base a las necesidades del proyecto.
• 📄 README.md: Contiene la documentación de éste Boilerplate.

↖️ regresar al índice

Scripts NPM:

Éste boilerplate tiene disponible los siguientes comandos para optimizar y automatizar proyectos frontend, siéntete libre de modificarlos a tus necesidades.

Recuerda que todos los comandos de NPM se corren desde la terminal con npm run [nombre del comando]

• 💲 sass: Observa la compilación de Sass.
• 💲 pug: Observa la compilación de Pug.
• 💲 babel: Observa la compilación de Babel.
• 💲 browserify: Ejecuta Browserify con soporte para Babel.
• 💲 watchify: Observa Browserify con soporte para Babel.
• 💲 serve: Levanta un servidor web live reload con Browser Sync.
• 💲 proxy: Levanta un servidor web proxy live reload con Browser Sync.
• 💲 metalangs: Ejecuta en paralelo los scripts de sass, pug y watchify.
• 💲 devserve: Ejecuta en paralelo los scripts de metalangs y serve.
• 💲 devproxy: Ejecuta en paralelo los scripts de metalangs y proxy.
• 💲 imagemin: Optimiza las imágenes .jpg y .png del proyecto.
• 💲 webp: Genera una versión .webp de todas las imágenes .jpg del proyecto.
• 💲 svgmin: Optimiza las imágenes .svg del proyecto.
• 💲 gifmin: Optimiza las imágenes .gif del proyecto.
• 💲 jpgresize: Redimensiona las imágenes .jpg del proyecto, requiere ImageMagick instalado para que funcione.
• 💲 pngresize: Redimensiona las imágenes .png del proyecto, requiere ImageMagick instalado para que funcione.
• 💲 statics: Mueve los archivos estáticos del proyecto.
• 💲 assets: Ejecuta de manera síncrona y bloqueante los comandos de statics, imagemin, webp, svgmin y gifmin.
• 💲 clean: Limpia el contenido de la carpeta public y crea los archivos y carpetas necesarios en ella.
• 💲 min.html: Minifica todos los archivos .html del proyecto.
• 💲 min.js: Minifica y ofusca el archivo script.js del proyecto.
• 💲 uncss: Remueve el código CSS innecesario del proyecto, tomando en cuenta la configuración del archivo uncss.json.
• 💲 autoprefixer: Ejecuta el autoprefijado CSS al archivo style.un.css que contiene el código CSS depurado del proyecto.
• 💲 min.css: Minifica el código CSS del archivo style.un.css y lo guarda en style.css.
• 💲 min: Ejecuta de manera síncrona y bloqueante los comandos de min.html, min.js, uncss, autoprefixer, min.css y luego elimina el archivo style.un.css.
• 💲 build: Ejecuta de manera síncrona y bloqueante los comandos de assets, min y serve, éste comando prepara la versión de publicación del proyecto.
• 💲 start: Ejecuta el comando devserve, éste comando inicia nuestro entorno de desarrollo para comenzar a trabajar en nuestro proyecto.

↖️ regresar al índice

Componentes Disponibles

En esta sección se irán listando los componentes web que vayan estando disponibles en este Boilerplate, si quieres colaborar creando algún componente puedes ponerte en contacto al correo [email protected].

Cada Componente tiene su respectiva documentacíon al inicio de sus archivos pug, scss y js, dependiendo del tipo de componente y su funcionamiento puede que tenga o no, código pug, sass y/o js.

Para que sepas que tipo de código tiene un componente encontrarás al lado del nombre de cada componente los siguientes logos:

• Si tiene código pug
• Si tiene código sass
• Si tiene código js

Basic Reset

Componente para aplicar un reseteo de estilos básicos al documento, aplica las siguientes reglas:

• box-sizing: border-box; al documento HTML y todos sus elementos
• padding y margin de todos los elementos a cero
• Evita barras de desplazamiento horizontal al body del documento, múy útil para el Responsive Design
• Asigna la fuente tipográfica y el tamaño base de fuente para el documento HTML

Dependencias: Ninguna

Archivos: _basic_reset.scss

Youtube Video

Componente para incrustar un video de YouTube en nuestro sitio web cuando la resolución es mayor a 64em (1024px), cuando es menor se agrega un enlace al video

Dependencias: font-awesome.css

Archivos: youtube_video.pug, _youtube_video.scss, youtube_video.js

Picture

Componente para generar una imagen responsive con la etiqueta Picture

Dependencias: Ninguna

Archivos: picture.pug

Picture Webp

Componente para generar una imagen responsive con soporte al formato Webp, aplica sólo para imágenes .jpg

Dependencias: Ninguna

Archivos: picture_webp.pug

↖️ regresar al índice