Módulos

Como funcionan

La funcionalidad de los módulos es una combinación de:

• Configuración y contenido dentro del archivo _data.json
• HTML de los archivos .jade
• CSS de los archivos .scss (o el preprocesador elegido)
• La estructura de directorios
• JavaScript (opcional)

Estructura

Directorios & Archivos

La regla para los nombres es: order + _ + module-id

Ejemplo: 1_introduction

Los módulos y el orden del menú derivan de esta regla de denominación.

Los archivos .jade y css deben seguir la misma identificación de directorios:

Folder: 1_introduction  
        /_introduction.jade
        /_introduction.sass

_data.json

In this file you can set the module and it's content. The rule is:

{
  "id": "Unique module id, same name as folder but without the order numbers",
  "name": "Module name, shown in menu and module title",
  "scripts": ["Javascript file(s) path is optional"],
  "items": "object, array, ou any type of data that will be held as the modules contents"
}

Ejemplo:

// Folder: 2_colors
{
    "id": "colors",
    "name": "Colors",
    "items": {
        "intro": ["Huge have two main colors: Magenta and Black."],
        "colors": [
            {
                "className": "bg-magenta"
            },
            {
                "className": "bg-black"
            },
            {
                "className": "bg-grey"
            },
            {
                "className": "bg-blue"
            }
        ]
    }
}

Jade

Jade es una de las formas más simples de escribir HTML. Permite utilizar lógica de programación para escribir HTML de una forma inteligente. Para aprender más haz click aquí.

Toda la información del archivo _data.json estará disponible para el archivo .jade como variables.

Estilos CSS

Este proyecto soporta SASS, LESS, y Stylus. Escoje uno y usa los archivos con la extensión correspondiente.

La hoja de estilo del módulo será cargada automáticamente.