Archivo de la etiqueta: CSS

Foundation vs Bootstrap:Round 1

Publicado el por
2

Hace tres meses aproximadamente descubrí dos frameworks para el desarrollo de interfaces web, algo que anteriormente no había usado pero que ya tocaba, principalmente para poder tomar ventaja en el tiempo de desarrollo. El primer framework, y el que actualmente uso, es Foundation de Zurb y el segundo Bootstrap de Twitter.

Ambos buscan cubrir las mismas necesidades, ofreciendo una serie de recursos web para acelerar el desarrollo de sitios web basados en estándares y buenas prácticas. Sin embargo, no son competencia directa aún. Boostrap es mucho más completo que Foundation al incluir gran cantidad de estilos por defecto y una colección de librerias de javascript, pero por otro lado Foundation ofrece un buen soporte a responsive design, es ligero y también más flexible para modificar.

La piedra angular

Durante algún tiempo trabajé con Foundation porque se ajusta mejor a mi forma de trabajar, que prefiero tener más control sobre la apariencia, sin embargo, hace unas semanas decidí que la mejor opción era crear un framework propio para trabajar. Por supuesto comenzar desde cero no era una opción así que debía elegir cuál framework, entre Foundation y Bootstrap, sería la piedra angular.

Foundation fue el ganador, principalmente porque lo conozco bien, así que me dedique a modificarlo, hice varios avances incluyendo migrarlo a Less e integrar Minify para optimizar archivos. Pero justo ayer decidí darle una segunda oportunidad a Bootstrap, realmente su grilla de 16 columnas me agrada y ofrece una base mucho más completa para el desarrollo de sitios web gigantes. Durante algunas horas me convenció tanto que estuve a punto de deshacer el trabajo realizado con Foundation y cambiarlo.

Pero pudo más Foundation y Bootstrap quedo rezagado de nuevo. Es contradictorio pero aunque Bootstrap continua siendo mucho más completo que Foundation, en cuanto a características y apariencia inicial (básicamente es la misma que Twitter), son esas mismas razones lo dejaron fuera del juego.

Bootstrap al buscar cubrir más estilos web se vuelve grande y complejo, y con esto no me refiero a que sea difícil de entender pero hay que manejar más archivos y variables, sumando tiempo al desarrollo. Esta ventaja, de poseer más características, también significa más estilos pre-definidos que a la larga quitan más control sobre diseño, ú obligando a dedicar más tiempo a la edición de estilos.

En resumen, Foundation es más pequeño pero está mejor enfocado, también es ligero y permite experimentar más gráficamente con los elementos web. Por otro lado Bootstrap ofrece una base bastante robusta para el diseño de interfaces, ofreciendo más opciones pero a la vez “amarrando” la apariencia a una línea de diseño gráfico previamente definida, que desde el punto de vista personal significa una personalización más lenta y complicada.

Si eres programador, o tu especialidad no es el diseño gráfico web, mi recomendación es que vayas tras Bootstrap, te dará una apariencia completa prácticamente sin necesidad de modificar estilos (apenas unas variables). Mientras que si lo tuyo es el diseño gráfico y los sitios web a la medida entonces la mejor opción es Foundation, que da mejor soporte a responsive design para ofrecer tu sitio web en versiones para computadoras, tablets o móviles.

Pedazos de comentarios, pequeños y aleatorios

  • Estuve a punto de cambiar Foundation por Bootstrap, que es más completo y trabaja con 16 columnas, pero hubiera sido un error.
  • Foundation es más simple que Bootstrap y requiere más trabajo de diseño, pero es mucho más flexible y rápido para prototipar.
  • Vale aclarar: Foundation es más rápido porque uso una adaptación basada en Less y lo elegí para trabajo porque ofrece mejor soporte a responsive design.

La última palabra

Después de todo lo dicho, en donde Foundation parece ser el ganador, la última palabra aún no está dicha. El equipo de Twitter, liderado por @mdo, lanzará el 30 de enero la versión 2.0 de Bootstrap que promete un gran avance sobre la versión actual, la 1.4, y tampoco hay que olvidar que este es uno de los proyectos más grandes y activos de Github, lo cual es algo bastante notable en su desarrollo, ofreciendo corrección de errores y características nuevas más rápido.

Foundation por su parte es pieza clave para Zurb, una empresa genial de diseño web, que mantiene a su equipo enfocado en el framework, ofreciendo aportes al código diariamente y guiados por una serie de buenas practicas que hacen al framework muy innovador.

—
Nota en construcción, seguiré editando.

CSS: Cómo evitar que un botón se “rompa”

Publicado el por
Responder

Recientemente tuve problemas con un enlace que simula ser un botón en una página web. El problema ocurre porque la página se ajusta al ancho de la ventana del navegador, permitiendo que los elementos dentro de ella también se ajusten, pero a la vez forzando a que el botón se rompa en dos líneas cuando la ventana se reduce, de esta forma:

Botones en la página con ancho normal

Botón cortado cuando la página tiene dimensiones reducidas

La solución a este problema es utilizar dentro de los estilos del botón la propiedad white-space con el valor nowrap que le indica al navegador que el texto dentro de ese elemento no debe ajustarse. Esta propiedad es el equivalente CSS a la propiedad no break de los estilos de InDesign.

a.boton {
  color:#51626f;
  background:#e8eaec;
  border:solid 1px #51626f;
  white-space:nowrap;
  /* (...) */
}

Esta solución da como resultado que igual se utilicen dos líneas para los botones, pero evita que se rompa el botón:

Botón con el estilo corregido

Vale aclarar que este problema no es común en páginas web con ancho fijo o con botones de medidas especificas, y por esta misma razón la propiedad white-space tampoco es muy conocida, sin embargo, es compatible con la mayoría de navegadores recientes y puede aplicarse a otros elementos.

Detalles: Sprite CSS

Publicado el por
5

El martes comenté en Twitter que estaba trabajando en un sprite CSS para un sitio web y quería mostrarlo, porque aunque parece simple es una tarea muy minuciosa. Es entretenido.

Un sprite CSS es una técnica en la que se unen varias imágenes en una sola, se hace para optimizar espacio y tiempo de carga de un sitio web. Es posible ahorrar hasta el 60% del peso de los archivos y pueden reducirse decenas de imágenes a una sola.

En la imagen puede verse el sprite en desarrollo arriba y el resultado final abajo. Se ve igual se desarrolla diferente y rinde mejor.

Tip: Los sprites son muy populares dentro del desarrollo de juegos RPG, supongo que de allí viene la idea.

Cross Browsing y CSS3

Publicado el por

Recientemente trabaje un sitio web incluyendo estilos de CSS3, un estándar aún en desarrollo y no implementado al 100% por navegadores, y debo decir que durante el desarrollo aprendí una buena lección para utilizarlos, especialmente tomando el cuenta el cross browsing.

Cross browsing, en resumen, consiste en realizar un sitio o aplicación web compatible entre más de un navegador, usualmente se utiliza cuando tu sitio web es compatible con navegadores que utilizan estándares y además Internet Explorer (que suele interpretar código a su modo), aunque el termino es valido para cualquier navegador.

Aplica propiedades CSS3 por separado

El problema aparece cuando Internet Explorer (IE) comienza renderizar mal las propiedades de CSS3, un error poco común pero que si esta presente arruina los estilos del sitio web.

La solución fue eliminar las propiedades CSS3 para IE, algo que me quito tiempo porque las propiedades estaban repartidas entre muchas clases en diferentes lugares y la mayoría eran básicamente iguales. Por ejemplo, si quisiéramos un botón con gradiente azul, sombra y esquinas redondeadas usualmente lo haríamos de esta forma

css mal

(por demo sólo estoy aplicando estilos CSS en Firefox, por eso coloco “–moz” frente a la propiedad).

La solución y buen practica es usar un selector por cada propiedad CSS3 que desees usar, de esta forma:

css bien

¿Por qué?
Porque de esta forma la clase principal permanece valida para todos los navegadores y sí las propiedades CSS3 nos dieran problema las podríamos eliminar (reiniciar) simplemente haciendo esto (en una hoja de estilo adicional específicamente para IE, o el navegador que este dando el problema):

2010-09-20-230830

o sí utilizan Turbine (ver más abajo en recursos) podrían excluir esas propiedades de Internet Explorer, de la siguiente forma

turbine

Resalte en magenta la propiedad browser. Está funciona gracias a Turbine y la extensión Sniffer. Básicamente dice: “aplica esta clase en todos los navegadores excepto Internet Explorer”. Se puede elegir versión u otros navegadores, pero para ejemplo así esta bien.

En el caso de Internet Explorer y las esquinas redondeadas puedes usar el script DD_roundies sobre la clase conBordesRedondos4px para obtener los mismos resultados.

Recursos para usar CSS3

CSS3 aún no es terreno solido por lo que hay que tener cuidado al usarlo para mantener la compatibilidad, y para eso existen algunos recursos que te facilitan la tarea

  • Turbine. Un framework en PHP para desarrollar CSS, acelera el desarrollo y optimiza el resultado final.
    • Plugin CSS3: habilita las opciones CSS3 para utilizarlas según el estándar actual mientras que Turbine CSS se encarga de ajustar la sintaxis a cada navegador.  De esta forma sólo escribes una vez la propiedad.

      css

    • Plugin Sniffer: permite mostrar u ocultar estilos CSS según el navegador que visita la página, mejora su visualización y facilitando el cross-browsing. Recomiendo leer la documentación al respeto.
  • Internet Explorer 9 (aún en beta) ya soporta parte del estándar CSS3.
  • CSS3.info “todo lo que necesitas saber sobre CSS3”.
  • Técnicas para conseguir propiedades CSS3 con jQuery por aNieto2K.
  • Consejos para mejorar nuestro cross browsing por aNieto2k.
  • Además de un lista sin fin de generadores de estilos CSS3
    • CSS3 Generator. Genera código de varias propiedades CSS3 para Firefox, Webkit (Chrome, Safari, etc.) y estándar.
    • CSS3 Please. En resumen es una especie de plantilla con estilos CSS3 predefinidos pero que podemos modificar escribiendo nuestros propios valores, por desgracia la apariencia no es muy agradable aunque eso no le quita lo útil.
    • CSS3 Gradient Generator. Generador de gradientes utilizando CSS3, la interfaz es gráfica y muy fácil de usar.

Hasta la próxima.

CSS: Corregir la línea punteada fuera de lugar en los enlaces

Publicado el por

Este será un tip rápido para corregir la línea punteada fuera de lugar en los enlaces y botones. El error lo he visto en Firefox aunque desconozco si también aparece en otros navegadores

linea-erronea

La línea que se ve arriba, llamada outline, no debería ser tan extensa. Este error ocurre cuando a través de CSS queremos ocultar el texto de un elemento enviándolo lejos del área visible con text-indent. En el código de abajo se puede ver el text-indent a –9999em (lo enviaron muy lejos jeje).

css-problema

Para corregirlo solo hay que añadir una regla más al CSS: overflow:hidden;

css-solucion

Con esto la línea se ajusta de nuevo al elemento porque ya no “busca” al texto fuera del área visible.

linea-correcta