Estructura de archivos

La siguiente es la estructura de archivos de EDgrid. Solo se explican los archivos y directorios propios del proyecto y no las herramientas comunes de desarrollo (package.json, .gitignore, etc)

Tenga presente que en el mismo repositorio se encuentra la librería EDgrid y la página web con la documentación. Si desea estudiar como se creó EDgrid busque el archivo src/scss/ed-grid.scss y la carpeta src/scss/ed-grid. Todo lo demás se usa para construir esta página web y no forma parte de la librería.

Etructura general del repositotio

  • src/ Carpeta de desarrollo
    • md/ Contenido de la documentación en markdown
    • data/ Datos JSON para la página web
    • img/ Imágenes para la página web
    • js/ JavaScript para la página web
    • pug/ Archivos pug para generar la página web
    • scss/ Estructura de archivos Sass
    • ed-grid/ 🔥 Componentes de la librería EDgrid.
    • web-styles/ Estilos para la documentación en ed-grid.com (no son parte de EDgrid)
    • styles.scss Archivo principal para la documentacion ed-grid.com (no es parte de EDgrid)
    • ed-grid.scss 🔥 Archivo principal de EDgrid que importa sus componentes y define variables.
  • ed-grid.scss 🔥 Archivo para importar EDgrid desde node_modules.
  • test.html 🔥 Archivo para hacer pruebas con EDgrid

Archivos exclusivos de EDgrid

  • ed-grid.scss 🔥 Archivo para importar EDgrid desde node_modules.
  • src/
    • ed-grid.scss 🔥 Archivo que importa los componentes y define las variables de configuración
    • ed-grid-css.scss Archivo para compilar EDgrid a su versión CSS
    • ed-grid/
      • components/ Componententes principales de la librería
        • _alignment.scss Utilidades para alineación de bloques y contenido
        • _base Estilos base para elementos HTML.
        • _core-flexbox.scss Sistema de columnas con flexbox
        • _core-grid.scss Sistema de filas y columnas con CSS Grid
        • _dev.scss Estilos para debuggin
        • _layouts.scss Estilos para separaciones verticales, margenes y paddings.
        • _media-queries Mixins para crear media queries
        • _prototype.scss Estilos para prototipado rápido
        • _video.scss Estilos para video responsive
        • _visibility.scss Estilos para mostrar y ocultar elementos en cada breakpoint
      • helpers/ Funciones y mixins necesarios para el funcionamiento de diversos componentes
        • _functions.scss Funciones para convertir pixeles a em y rem (necesarios para mixins de EDgrid)
        • _mixins.scss Mixins de apoyo en el desarrollo de componentes
      • legacy/ Componentes y estilos para compatibilidad con versiones anteriores de EDgrid (no necesario en proyectos nuevos).
        • _ed-menu Estilos para crear menus de navegación
        • _grid.scss Estilos para crear cuadriculas (se recomienda usar core-grid)
        • _legacy.scss Estilos varios de versiones antiguas
        • _offset Estilos legacy para offset de columnas (no necesario en proyectos nuevos).
    • css/
      • ed-grid.css Versión CSS de EDgrid con comentarios para desarrollo
      • ed-grid.min.css Versión minificada de EDgrid

Archivos exclusivos de la página de documentación

  • docs/ Página web de documentación y assets compilados
  • src/
    • pug/ Archivos pug para generar páginas HTML
    • md/ Contenido de la documentación en formato markdown
    • img/ Imágenes de la página web
    • data/ Datos en formato JSON para mostrar en la página web
    • js/ Archivos javascript para la documentación
    • scss/
      • styles.scss Importa archivos para estilos de la documentación
      • web-styles/ Partials de Sass para la documentación