alegra-ui v0.2.0

Alegra UI

Instalación

Para iniciar debes tener previamente instalados:

• Git
• Node.js (versión 4 o superior)
• Sass
• Docsify

Luego, en una carpeta vacía de tu equipo clona el repositorio alegra-ui. Una vez descargado el repositorio podemos utilizar los siguientes comandos en la terminal:

Se recomienda correr los siguientes comandos a la vez para trabajar en modo desarrollo:

$ npm run serve

Este comando ejecuta un servidor estático http://localhost:3000 que apunta a la carpeta docs, el cuál mostrará la documnetación en dicho servidor local, además estará escuchando los cambios que se realicen en dicha carpeta.

$ npm run watch

Este comando ejecuta en la terminal un proceso de Sass que permite escuchar los cambios que se hagan en algun archivo de estilos en la carpeta src, además de esto, aplica de manera automática los cambios realizados.

Para obtener todos los archivos listos para producción se debe correr el siguiente comando:

$ npm run build

Este comando transpila el código scss en código css y lo genera en la carpeta docs/dist con los cambios realizados en la carpeta src, además genera el código css para producción en la carpeta dist, esto incluye en el archivo css final la versión que tenga el archivo package.json.

Importante tener en cuenta que para realizar alguna modificación al comentario de la versión, se debe hacer en el archivo JavaScript src/utils/getVersion.js ya que este es el que crea el archivo sass con el comentario de la versión.

Estructura de directorios

UI/             # Carpeta raíz del repositorio
│
├── dist/                      # Código generado para producción
│   ├── alegra.min.css         # Código CSS minificado
│   ├── alegra.min.css.map     # Meta data del código CSS minificado
│   ├── alegra.css             # Código CSS
│   └── alegra.css.map         # Meta data del código CSS
│
├── docs/                      # Documentación
│   ├── dist/                  # Código generado para producción
│   │   ├── alegra.min.css     # Código CSS minificado
│   │   ├── alegra.min.css.map # Meta data del código CSS minificado
│   │   ├── alegra.css         # Código CSS
│   │   └── alegra.css.map     # Meta data del código CSS
│   ├── content/               # Código generado para producción
│   │   └── *.md               # Secciones Markdown de la documentación
│   ├── .nojekyll              # Permite leer archivos que inicien con _
│   ├── index.html             # Index de la documentación
│   └── vue.css                # Estilos de la documentación
│
├── src/                       # Código fuente para desarrollo
│   ├── *.scss                 # Módulos de estilos con extensión sass
│   └── utils/ 
│       └── getVersion.js      # Archivo estractor de versión desde el package.json
│
├── README.md                  # Archivo README
├── package-lock.json          # Archivo de compatibilidad de Node.js
└── package.json               # Dependencias de Node.js
│
└---------------------------------------------------------

Artículos de referencia

• Code Guide (HTML and CSS) http://codeguide.co/
• Webpack https://webpack.js.org
• What Does a Well-Documented CSS Codebase Look Like? https://css-tricks.com/well-documented-css-codebase-look-like/
• The Options for Programmatically Documenting CSS https://css-tricks.com/options-programmatically-documenting-css/
• Build a Style Guide Straight from Sass https://css-tricks.com/build-style-guide-straight-sass/
• The 5 best visual regression testing tools https://www.creativebloq.com/features/the-5-best-visual-regression-testing-tools
• How to version your UI library https://medium.com/design-optimizely/how-to-version-your-ui-library-1c7a1b7ee23a
• Sass Guidelines - The 7-1 Pattern https://sass-guidelin.es/#the-7-1-pattern
• A successful Git branching model https://nvie.com/posts/a-successful-git-branching-model/
• Semantic Versioning https://semver.org/
• CSS Grid Supporting https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/

Créditos

Este proyecto ha sido creado por:

• Sebastián Serna --> sebastian@alegra.com
• Cristian Gutierrez --> cristian.gutierrez@alegra.com

Algunas partes de este proyecto se han construido a partir de componentes open source. Puedes encontrar el código fuente de estos proyectos a continuación:

• Docsify
• https://github.com/docsifyjs/docsify/
• Autor: docsifyjs
• Licencia: MIT

• Swanix
• https://github.com/swanix/ui
• Autor: Sebastian Serna
• Licencia: MIT