El día de ayer (27 de abril del 2013), publique lo que seria la beta de Octagon CSS el framework css que nace de los estilos utilizados en la plataforma de Escuela Web y GeeksAcademy. La idea de este framework fue crear nuestros propios estilos para generar todos nuestros productos con la misma linea, claro esta que Octagon no busca competir o reemplazar los grandes del mercado como lo son Twitter Boostrap o Zurb foundation. Solo es una manera de liberar un proyecto opensource de algo que se desarrollo para nuestra plataforma y que sirva como herramienta de aprendizaje y de desarrollo para nosotros y para otros.
Octagon fue creado utilizando Sass como preprocesador CSS, se utilizo Sass porque como se dije anteriormente Octagon nace de la plataforma de la Escuela, la cual esta desarrollada en Rails y por defecto procesa Sass, por lo que se comenzó en Sass y se continuara en Sass para facil actualización del framework de nuevo a la plataforma. Aunque nada de esto quiere decir que Sass sea una mala herramienta para generar el framework, a mi parecer es igual de bueno que la competencia (Less y Stylus), la diferencia siempre sera detalles de sintaxis pero en términos generales las funciones y capacidades son relativamente las mismas.
En el lado del JS se uso javascript con jQuery para las características JS que la primera BETA presenta que son los menu, HIGHLIGHT.JS (para darle estilo a el contenido de las etiquetas <pre><code>) y el scroll vertical animado en los enlaces (utilizando smootscrolling que es un plugin jQuery desarrollado en la escuela también). Todo el código JS se encuentra en el archivos octagon.js y viene minificado al igual que el CSS.
En caso de querer modificar Octagon para un proyecto distinto, en la rama de desarrollo del repositorio de Octagon pueden procesar el CSS y modificar para verlo en vivo en el browser. En la rama de desarrollo el procesamiento del Sass y la creación de la pagina de Github de Octagon, es realizada utilizando la Gema middleman la cual te permite utilizar HAML, Markdown, Sass, Less, Stylus, Erb, Slim, entre otras tecnologías, lo que te permite generar un sitio web estático partiendo de estas tecnologías.
Por lo tanto en la rama de desarrollo lo primero que deben hacer es:
Todavía Octagon esta en fase beta, porque todavía falta integrarle algunas de las funciones que si están en la plataforma, como son:
Nota: Todavía en la pagina de github quedo uno que otro texto simulado que sera sustituido lo mas pronto posible.
Octagon fue creado utilizando Sass como preprocesador CSS, se utilizo Sass porque como se dije anteriormente Octagon nace de la plataforma de la Escuela, la cual esta desarrollada en Rails y por defecto procesa Sass, por lo que se comenzó en Sass y se continuara en Sass para facil actualización del framework de nuevo a la plataforma. Aunque nada de esto quiere decir que Sass sea una mala herramienta para generar el framework, a mi parecer es igual de bueno que la competencia (Less y Stylus), la diferencia siempre sera detalles de sintaxis pero en términos generales las funciones y capacidades son relativamente las mismas.
En el lado del JS se uso javascript con jQuery para las características JS que la primera BETA presenta que son los menu, HIGHLIGHT.JS (para darle estilo a el contenido de las etiquetas <pre><code>) y el scroll vertical animado en los enlaces (utilizando smootscrolling que es un plugin jQuery desarrollado en la escuela también). Todo el código JS se encuentra en el archivos octagon.js y viene minificado al igual que el CSS.
En caso de querer modificar Octagon para un proyecto distinto, en la rama de desarrollo del repositorio de Octagon pueden procesar el CSS y modificar para verlo en vivo en el browser. En la rama de desarrollo el procesamiento del Sass y la creación de la pagina de Github de Octagon, es realizada utilizando la Gema middleman la cual te permite utilizar HAML, Markdown, Sass, Less, Stylus, Erb, Slim, entre otras tecnologías, lo que te permite generar un sitio web estático partiendo de estas tecnologías.
Por lo tanto en la rama de desarrollo lo primero que deben hacer es:
bundle install
# luego para ver los cambios en vivo
middleman server
# y finalmente para generar los css finales
middleman buildTodavía Octagon esta en fase beta, porque todavía falta integrarle algunas de las funciones que si están en la plataforma, como son:
- Estilos de los formularios
- Mensajes de notificación
- Modales
- Tooltips
- entre otras
Nota: Todavía en la pagina de github quedo uno que otro texto simulado que sera sustituido lo mas pronto posible.
Octagon CSS
Sergio Marin
@escuelawebve
Comentarios
Publicar un comentario