Portar proyectos Bootstrap a EDgrid
Closed this issue · 14 comments
¿Sería posible usar o mapear las clases de Bootstrap a su análogo de las de EDgrid para poder usar EDgrid en proyectos anteriores que usan Bootstrap eliminando o disminuyendo el esfuerzo de portage o hacerlo transparente?
Gracias!
¿Quizás mediante un preprocesado de los nombres de las clases que empareje las de Bootstrap a las de EDgrid?
podria ser un codemon, seria lo que se me ocurre
¡Hola! @jagarsoft
Imagino que con el término mapear te refieres a "migrar" las clases de un framework a otro.
Creo que se podría crear un script de migración, similar al que ya existe, para que solo se migren las clases del sistema de columnas... El problema es que actualmente EDgrid no usa un sistema de 12 columnas, y tampoco usa los mismos breakpoints que bootstrap (por defecto), por tanto, incluir nada más el script de migración en el HTML no serviría. Habría que crear un custom build de EDgrid, con los breakpoints y las fracciones modificadas para simular las mismas 12 columnas de bootstrap. Además, creo que también se debería modificar el comportamiento del ed-container, ya que su clase análoga en bootstrap es container y esta cambia su max-width en cada breakpoint.
Muchas gracias por el comentario.
Comprendo la dificultad y el esfuerzo.
Pero creo que es una buena oportunidad para introducir EDgrid facilitando la migración de proyectos ya existentes...
Estoy de acuerdo contigo. Haré un pull request con el archivo de migración y una custom build para bootstrap. Entre hoy y mañana lo haré.
Si la idea es migrar se entiende que implica que cambiarán varias cosas (si no no habría necesidad de migrar) así que esencialmente sería mapear las clases. Quizas incluso podría crearse un mixin de Sass que mapee las clases.
@escueladigital tienes razón. Creo que me desvié del camino, ya que la idea es usar EDgrid y no un clon de bootstrap. 😄
Gracias por el interés en esta propuesta.
La idea, efectivamente, es usar EDgrid con los nombres de las clases de BS, lo más transparente posible (ojalá fuera al 100%). Y el paso siguiente sería usar los componentes de BS mapeados a los de EDui.
De esta manera se podría usar los proyectos de ED en lugar de BS mediante un cambio no traumático: "migrar" un proyecto ya hecho o que un equipo de trabajo formado en BS use ED.
(Ps: prefiero los productos de ED a BS, pero si para proponer el cambio tengo que hacerlo 'a mano' o formar al equipo nunca podría proporcionar a ED)
Pues yo creería que lo mejor sería usar un script JS de migración que añada las clases análogas de EDgrid, y así no afectar el core en SASS/CSS teniendo que renombrar las clases o añadir código SASS/CSS extra. @jagarsoft ya que nombras EDui, el tema de los scripts de migración podría convertirse en un proyecto aparte, abarcando las migraciones no sólo de frameworks como Bootstrap sino también Materialize, Foundation, etc...
➤ Alvaro Felipe commented:
Creo que podrían creearse mixins de Sass para eso, claro que también puede hacerse con JavaScript pero estaría modificando el DOM en tiempo real y tengo la sensación de que sería más lento. Por ejemplo, así como se activa el modo dev con $dev: true podría tener una opción tipo $bs: true.
Si, entiendo que mutar el DOM es lento, pero creo que no sería una muy buena idea incluir código extra SASS solamente para modificar clases, y además de otros frameworks. Entiendo que al fin y al cabo son sólo nombres de clases (que ya de por sí algunas se pueden modificar con variables) pero EDgrid es EDgrid y creo que sus archivos SASS se deberían mantener intactos respecto a código extra que no contribuye para nada al framework. Además creo que no todas las personas que deseen migrar quieran/puedan usar EDgrid en su versión SASS.
Respecto al JS, un problema que encuentro en los scripts de migración es que sólo podrían migrar elementos existentes en el DOM, y no elementos que sean añadidos y/o modificados dinámicamente, en ese caso habría que hacer uso de interfaces cómo MutationObserver para que se observen mutaciones en el DOM y así realizar las migraciones a los elementos modificados/añadidos. Sólo por éste caso yo si estaría a favor de usar los mixins SASS cómo propones.
@escueladigital Yo podría crear el script de migración ya mismo, junto con el MutationObserver. Respecto a los mixins en SASS, no sé como se harían, o sí me dieras una idea de como hacerlo, lo podría hacer (IMHO creo que sería mejor la idea del script de migración).
Agradezco mucho el interés con que habéis recibido y estáis tratando está issue.
Cuando la propuse no pensé (en mi ignorancia) que fuese más complicado que aplicar un renombrado de clases, que creo recordar, ya contempla EDgrid.
Para facilitar la migración, sería más claro que el cambio se haga de una sola vez sin procesos que estén permanentemente observando el DOM (si es posible, claro!)
Si, lo mejor es evitar la observación del DOM, sobre todo por el performance. En ese caso el mejor enfoque es con SASS. Respecto a los mixins yo no sé cómo hacerlos o cuál sería la idea de implementación, así que hasta aquí llegaría mi ayuda 😄