Como Implementar

Esta es una guía que busca dar un punto inicial para la implementación y uso del webkit de Chattigo.

Disponibilizamos en nuestro cdn un archivo CSS con todos los estilos necesarios para el uso e implementación de los componentes UI.

Como utilizar el cdn chattigo

Para usar todos los componentes UI, iconos y fuentes, solo necesitas cargar los styles en el head de tu archivo html, de la misma forma detallada en este ejemplo:

<link href="https://cdn.chattigo.com/css/chattigo.css" rel="stylesheet">

Todos los estilos desarrollados en el webkit quedan accesibles a través de las clases especificadas en cada componente UI.

Dicho esto, nuestro webkit puede funcionar en conjunto a otras bibliotecas de estilos.

Así que sientete libre de incluir los estilos sin esperar que estos rompan algunos de los estilos de tú aplicación.

nota: es probable que estilos ~~legacy~~ de tu aplicación afecten los estilos del webkit.

Assets

Los assets que usamos en las aplicaciones también se encuentran disponibles en nuestro cdn.

De hecho, lo que hace posible usar todas las features del webkit solo cargando el archivo CSS, es que, en nuestros estilos cargamos los assets directamente de nuestro cdn.

algunos ejemplos:

Fonts

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.chattigo.com/assets/fonts/opensans/OpenSans-Regular.eot');
  src: url('https://cdn.chattigo.com/assets/fonts/opensans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('https://cdn.chattigo.com/assets/fonts/opensans/OpenSans-Regular.woff2') format('woff2'),
    url('https://cdn.chattigo.com/assets/fonts/opensans/OpenSans-Regular.woff') format('woff'),
    url('https://cdn.chattigo.com/assets/fonts/opensans/OpenSans-Regular.ttf') format('truetype'),
    url('https://cdn.chattigo.com/assets/fonts/opensans/OpenSans-Regular.svg#opensans') format('svg');
}

Icons

@font-face {
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal;
  src: url('https://cdn.chattigo.com/assets/fonts/icons/icomoon.eot');
  src: url('https://cdn.chattigo.com/assets/fonts/icons/icomoon.eot#iefix') format('embedded-opentype'),
    url('https://cdn.chattigo.com/assets/fonts/icons/icomoon.ttf') format('truetype'),
    url('https://cdn.chattigo.com/assets/fonts/icons/icomoon.woff') format('woff'),
    url('https://cdn.chattigo.com/assets/fonts/icons/icomoon.svg#icomoon') format('svg');
}

Descarga de Assets

De la misma forma, se pueden descargar los assets expuestos en nuestro cdn entrando directamente en la url correspondiente.

Actualmente estos son algunos de los assets disponibles:

Fonts (.eot, .woff2, .woff, .ttf & .svg)

Icons Fonts (.eot, .woff, .ttf & svg)

cdn.chattigo.com/assets/fonts/icons/icomoon.some-extension

Image assets

Preview images

Preview tiny images

Channels images

Profile images

Constamos con 10 imagenes dummys para el perfil

cdn.chattigo.com/assets/img/profiles/1_dummy.png hasta 10_dummy.png.

Flag images

ar@2x.svg za@2x.svg

Soporte para la Internacionalización (i18n)

Sí, decidimos incluir el soporte para la internacionalización dentro de este webkit ~~(yay!)~~ y su uso es bastante sencillo.

En nuestro cdn tenemos un path donde viven los locales.json con todo el contenido usado en el desarrollo de nuestros componentes UI, existe uno por cada uno de los lenguajes soportados por chattigo.

Producción:
Desarrollo:

Están pensados para que puedas descargarlos y usarlos con cualquiera sea la biblioteca de Internacionalización que implementen (o hayan implementado) en su aplicación.

Dependencias

Solo listaremos las dependencias externas que se ven expuestas junto a los estilos:

Normalize.css - HTML5-ready alternative to CSS resets
Icomoon - Pixel Perfect Icon Solutions

Para Contribuir

Para los desarrolladores que quieren contribuir en el desarrollo del webkit, tenemos una documentación para devs, con los primeros pasos para crear tus propios componentes UI.

Esto sería la documentación para la implementación del webkit de Chattigo.

Happy coding!