Para empezar, anotaré que Expedientes.co es un proyecto para encontrar Expedientes Judiciales en Colombia, que inició como una Startup y tuvo su primer MVP implementado con Python/Django por cuestiones de facilidad y un Front-End comprado en Wrapbootstrap, llamado bravo. A continuación algunas capturas de pantalla de la primera versión del sitio.
Tecnologías empleadas para el rediseño
Sass : metalenguaje de Hojas de Estilo en Cascada (CSS). Además de ser un lenguaje de script convertido a CSS.
Bower : herramienta que permite encontrar proyectos y herramientas de Javascript para administrarlas dentro de nuestros proyectos. Dicho de forma fácil, nos permite descargar y actualizar de forma sencilla paquetes como Jquery, Bootstrap, etc. Para nuestro rediseño facilitó el manejo de todos los paquetes de Frontend como Bootsrap3 y jQuery.
Gulp: herramienta, en forma de script en NodeJS, que nos ayudó a automatizar tareas comunes en el desarrollo como compilar el Sass.
npm (node package manager) es un gestor de paquetes de node.js, que descarga y enlaza librerías y/o programas de js. Con esta herramienta descargué herramientas como Gulp.
Procedimiento del rediseño
Creación de las pantallas con Photoshop.
Conversión de los Photoshop en HTML+CSS.
Definición de la estructura de archivos SASS del nuevo proyecto.
Configuración del SASS con el proyecto Django existente.
Transformación de LESS a SASS.
Cambio de las plantillas de Django con el contenido de los nuevos HTML.
Reto del proceso
El mayor reto encontrado fue pasar de LESS a SASS . En Swapps preferimos SASS sobre LESS, porque es más completo y su curva de aprendizaje es más corta. Por ello, debemos encontrar la manera de pasar el código a SASS, así que usamos lo siguiente: https://github.com/brauliobo/less2sass.