Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Crea sitios web estáticos con EDboilerplate

Crea sitios web estáticos con EDboilerplate

La creación de sitios web estáticos, a primera vista puede parecer que no tiene mucho sentido ahora que está tan de moda que todo sean aplicaciones supercomplejas y poderosas. Sin embargo, hay muchas ocasiones en que un sitio estático puede ser muy útil:

  1. Un pequeño sitio informativo para una empresa o para una campaña.
  2. Una guia de estilos para tu proyecto
  3. Experimentos frontend
  4. Una libreria css o js que estés creando y que necesites el entorno para probarla.

De hecho hay muchas situaciones en las que tener un boilerplate es una gran idea. En lo particular a mí siempre me ha dado mucha pereza instalar gulp, las dependencias, crear el gulpfile, etc, etc, etc cada vez que quería hacer un proyecto estático. Así que de ocioso me iba con Prepros o con Codepen. Sin embargo, estas opciones tienen sus desventajas, Prepros no puede ser configurado a tu gusto (sus settings son limitados) y Codepen es para cosas pequeñas (cuando quiero probar algo rápido de CSS o Javascript prefiero ir a Codepen que abrir un editor). Por eso escribí EDboilerplate, una sencilla estructura de carpetas y archivos lista para que la uses.

Logo EDboilerplate

Características de EDboilerplate:

  • Usa gulp para automatizar tareas
  • Esta basado en Sass, Pug y ES6.
  • Compila Sass con autoprefixer y muestra los cambios en tiempo real
  • Compila Pug y actualiza el navegador con cada cambio
  • Compila ES6 con soporte para módulos ES6 (importar y exportar modulos)
  • Detecta nuevos archivos añadidos al proyecto sin tener que reiniciar gulp
  • Captura errores en Sass, Pug y Js evitando que gulp se detenga.
  • Crea los sourcemaps de los archivos compilados
  • Tiene una estructura lista de estilos (con Sass) basada en SMACSS y ITCSS
  • Tiene una estructura lista para HTML (con Pug) que divide páginas e includes.
  • Tiene una estructura lista para importar y exportar modulos ES6

Modo de uso

  1. Clonar el repositorio (aun no tiene instalacion por npm o yeoman)
  2. Ejecutar npm install (asegurese de tener npm actualizado y Nodejs en v6 como minimo)
  3. Ejecutar gulp
  4. Disfrute

Estructura

  1. La carpeta dev contiene la estructura de archivos con la que trabajará
  2. La carpeta public contiene los archivos compilados que deberan llevarse a producción
  3. Para Sass importe sus partials desde styles.scss, el orden está indicado en el mismo archivo
  4. Para Pug, la carpeta pages contiene las paginas del proyecto y la carpeta includes los bloques.
  5. Para Js, la carpeta modules contiene los módulos que serán importados desde index.js

Siéntete libre de usarlo y de reportar cualquier problema que encuentres o sugerencia que tengas.

EDboilerplate es gratis, open source y de la comunidad para la comunidad. Espero que les guste. A mi me va a ser de gran ayuda para diseñar layouts y plantillas con EDgrid y pruebas para EDui. Y, por qué no, los sitios de EDui y EDgrid podrían ser creados con este nuevo proyecto.

EDboilerplate en Github: https://github.com/escueladigital/EDboilerplate

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal