tiko2015/snippets

Entorno para el desarrollo de interfaz para nodejs basado en jade y less.

Debido al interes de poder trabajar los templates con jade y los estilos con less, me surgió la necesidad de tener un compilador en tiempo real.

Snippets logra cumplir esta tarea y crear un entorno de desarrollo a medida para la misma.

En definitiva, es un emulador de MVC pero sin controlador. Esto permite simular los datos, integrarlos al template y luego incluir las vistas y los estilos en cualquier proyecto.

También es un generador de sitios estáticos, porque a medida que compila y muestra en tiempo real, crea los archivos html y css que entiende cualquier servidor como apache, nginx y hasta Microsoft IIS.

Como funciona

Al ser un desarrollo orientado a crear plantillas, el servidor node que se inicia se queda a la espera de la petición de archivos situados en el directorio public.

Si los archivos solicitados tienen la extensión .html, busca su correlación en la carpeta views,en este caso con la extensión .html.jade. En el caso de existir, busca el mismo archivo en models con la extensión .html.json, compila y devuelte el html solicitado. Al mismo tiempo crea el archivo solicitado en la carpeta public.

Si no existiera, intenta encontrarlo en public y en caso de no exitir mostrará un error 404.

En el caso de less, se repite la misma mecánica. O sea que el llamado a style.css generaría que se compile less/style.css.less con todos sus include y devolviera una hoja de estilos única.

NOTA: Se pueden generar sitios estaticos si no se incluyen las carpetas less y views en el servidor de producción.

Instalación

Atención: Para poder usar el servidor, debes tener instalado nodejs.

En consola:

git clone https://github.com/tiko2015/snippets.git
cd snippets
npm install
node server

En el navegador:

http://127.0.0.1:3000

Correr la aplicacion en heroku.com:

heroku apps:create example
git push heroku master
heroku open

Miralo funcionando en heroku

Si necesitas ayuda con esto, acá está la documentación de heroku

Características

HTML5 y CSS3
Responsive o Adaptive según la necesidad.
Configurable.
Construido en less para desarrollar en less.
Sin classes predefinidas.
Ordenado y extensible.
Sin código basura.
Fácil de aprender
Incluye librerías js para formularios, modales, slider, tooltips tabs y más.
El css base compilado pesa solo 7.4k.

Recursos javascript incluidos

jQuery
jQuery tools (incluye: Tabs, Tooltip, Form Tools, Toolbox.)
flexSlider2
html5shim
less
jade

Recursos less incluidos

Variables de entorno
- Colores
- Fuentes
- Ruta del directorio de contenidos multimedia (imágenes, tipografia, etc.)
Normalize por defecto o reset v2.0 de Eric Meyer.
Tipografias incluidas y mediante google fonts
Definición de formularios horizontales o verticales.
Conjuntos de atributos para generar código recurrente. Algo asi como ejecutar funciones dentro del css.
- Grilla y columnas de semantic.gs.
- CSS3 de LESS Prefixer .
- Botones.
- Iconos de Font Awesome.
Elementos predefinidos.
- Galería.
- Navegación.
- Rotador de imágenes.
Layout
- Estilos generales y archivos separados para cada media query.

Instruccion para trabajar con less en snippets

Lo primero que tenes que saber es que esta herramienta tiene que ser útil para tu proyecto, tomar una estructura como snippets para empezar no debe condicionarte, adaptala a tu necesidad.

Para empezar a utilizar snippets es necesario conocer la estructura de directorios. Si bien la podes cambiar a tu gusto para tu proyecto es necesario entenderla para modificarla.

Tené en cuenta que snippets usa una gran cantidad de recortes de código para facilitar la organización de tu proyecto.

El objetivo de esto es facilitar la tarea de desarrollo y generar un único css compilado para tu sitio en producción.

Estructura de directorios:

models (archivos de datos en formato json)
views (archivos jade)
- _layouts
  - includes
  - elements
less (aca se encuentran los archivos .less, no es necesaria para producción)
- lib
  - 01core (tipografias, reset, mixins y demás configuraciones generales)
  - 02extends (librerías less para facilitar la creación de código)
  - 03elements (definición de elementos puntuales de tu sitio)
- themes
  - default (estilos por defecto para aplicar en línea)
  - docs (estilos del sitio de documentación)
  - examples (estilos de los ejemplos)
public
- js (tus scripts)
  - lib (recursos javascript de terceros)
- media (archivos binarios)
  - fonts (tipografias a utilizar)
  - img (archivos de imagen que forman parte del diseño)
  - upload (archivos que forman parte del contenido)

Por donde empezar:

Lo primero que podés hacer es abrir el archivo 'less/style.less'. Acá vás a encotrar todos los archivos incluidos en tu proyecto y el orden en que se cargan.

Fijate que los directorios esán numerados para facilitar la lectura, de todos modos, cada proyecto tiene sus requerimentos y este orden se puede alterar según las necesidades.

Para quitar archivos no es necesario borrarlos, se pueden comentar como el caso de 'reset.less':

...
//@import "01core/reset.less";
@import "01core/normalize.less";
...

Otro archivo donde nos proponemos trabajar bastante de nuestro tiempo es 04layout/all.less.

En él nos vamos a encontrar con algunas líneas que le dan forma al html de ejemplo que es 'index.html'

Si todavía no conoces less, este es el momento de darte una vuelta por less.

Para empezar un proyecto nuevo, podés borrar todos estos estilos y comenzar utilizando 'clean.html'. En este archivo solo están definidas las llamadas a los scripts necesarios para el desarrollo con snippets.

Usando mixins:

Una de las grandes ventajas de crear css con less, es la posibilidad de usar mixins. Esto nos permite definir una serie de atributos para un elemento, incluso se le pueden pasar variables.

Vamos a ver un ejemplo de nuestro archivo '01core/mixins.less'

.size (@width: 400, @height: 200) {
  width: @width * 1px;
  height: @height * 1px;
}

Con estas líneas generamos un código abreviado para definir elementos de tamaño fijo. Para un div con el class .box, podriamos escribir esto:

.box {
  .size(60,60);
}

Y el resultado en el css compilado sería el siguiente:

.box {
  width: 60px;
  height: 60px;
}

Investiga que otros elementos tenes en mixins y agrega los que creas necesarios.

Usando extends:

Hasta ahora tenemos 4 extensiones definidas: buttons, css3, grid y glyphicons.

Buttons es una extensión que te permite crear botonos tanto de links como inputs de formularios. Te permite definir el color de fondo, tamaño. Miralo, modificalo y sualo a tu gusto.

Con css3.less haces compatible las propiedades de la nueva versión sin necesidad de escribir prefijos para todos los navegadores. Mirá como usarlo en LESS Prefixer

Como sistema de grilla snippets adopta el método de 12 columnas. Conoce la implementación de semantic.gs que está muy bien explicado y documentado.

Font Awesome es una familia de iconos estándar para graficar botones, links, alertas, etc.

Elementos, layouts y themes

En elements vas a encontrar algunas estructuras que se utilizan comunmente, revisa en el directorio views/_layouts/elements que encontraras otros recortes de código compatibles.

En layouts se definen las reglas generales para responsive.

Themes es donde se encuentran todos los estilos particulares de tu desarrollo.

Recomendaciones

Utilizá less desde un servidor local, instalarlo en cualquier sistema operativo suele ser una tarea simple.

tiko2015 / snippets