#Curso Web-Project-Boilerplate
Boilerplate para proyectos web, con Gulp, Sass, y Bootstrap3.
##Tecnologías
- Sass
- Bootstrap-Sass-official
- Font-Awesome
- JQuery 1.11.13
- HTML5 tags on IE8.
- MediaQueries in IE8.
Indice
##Contenido del curso
###Sección 1: Introducción
- Metodología de trabajo
- Readme.md
- Estructura básica de carpetas(src, dist, y docs).
- Organización del source (images, css, js).
###Sección 2: Automatización básica
- Configuración inicial (package.json).
- Node package manager
- Introducción básica a administrador de tareas Gulp.
- Gulp. Servidor web en \dev folder. js).
###Sección 3: Automatización de estilos con SASS
- Modularización de estilos: _base, _fonts, _globals, _layout, y styles.
- Diseño atómico de componentes.
- Organización de componentes.
- Introducción a SASS.
- Gulp: Compilación de estilos SASS.
- SASS: @imports, y @variables.
###Sección 4: Administración de paquetes con Bower
- Instalación de Bower.
- Configuración.
- Bower. Instalación de recursos: jQuery, Bootstrap, FontAwesome, Slick - Slider.
- Gulp. Unificación de recursos (estilos, scripts, y fonts).
###Sección 5: Mixins de SASS
- Diseño semántico de grillas.
- SASS. Introducción a mixins.
- Bower. Instalación de Bootstrap-SASS.
- SASS. Integración de Boostrap-SASS mixins de grilla con estilos del sitio.
###Sección 6: Guía de estilos automática
- Introducción a Styledocco.
- Gulp. Configuración de styledocco.
- Gulp. Servidor de documentación.
- Introducción a Markdown.
- Documentación rápida de componentes con Markdown.
###Sección 7: Otras mejoras
- Optimización de imágenes.
- Excluir archivos sin modificar en las tareas de Gulp.
- Generación de archivos .map para debugear los estilos sass.
- Live edit de archivos sass con Google Chrome Workbench.
##Estructura de carpetas +---components +---dev +---dist +---src +---fonts +---images +---js +---scss ¦ +---components +---vendors
- \src: Where all project files are developed.
- \components: Where all individual HTML components are developed.
- \dev: Where the compiled project and live develop web server runs.
- \dist: Where the static compiled project reside, after a build.
##Requerimientos
- Git / Git for Mac
- Node.js / Node.js for Mac)
- Ruby / Ruby for Mac with RVM
- Gulp
- Bower
- Any Git GUI like SmartGit / SmartGit for Mac.
Note: In some networks Node.js or bower fail to access the packages because the git:// protocole is blocked. A workaround is to configure Git to globally use the protocol https:// instead.
Jus open the git console and run this command:
$ git config --global url."https://".insteadOf git://
##Tareas de Gulp
For development (default)
$ gulp
This task compile all files from \src folder fo \dev folder, and start the web server for development.
For components
$ gulp comps
This task compile all files from \src folder fo \dev folder, then copy the \js, \css, \images, and \fonts folder to the \components folder, and start the web server for component development.
For distribution
$ gulp build
This task compile all files from \src folder fo \dist folder.
##Utilidades
- Markdown Plus - Add-on para Chrome
Permite interpretar ver archivos markdown, como los readde.md de GitHub.
##Acerca de
Curso creado y dictado por Lucas Dasso.
- Web: http://www.c238.com.ar
- Email: [email protected]
- LinkedIn: http://ar.linkedin.com/in/lucasdasso
Última actualización: 2015-06-02