Opciones De Diseño En CSS

Una de las tareas básicas que tienen la mayoría de los desarrolladores Front End es establecer el diseño de página. Existen diversas maneras de lograr este objetivo y en este articulo destacaremos algunas de las opciones que tienes a disposición.

Al comenzar un proyecto siempre se debe revisar cualquier documento de diseño o wireframes que ha recibido. Es importante revisar los requisitos del diseño, ya que esto puede jugar un papel importante en cómo te acercas al ideal del cliente. Cosas como las fuentes de elementos de la página cuando se ve en pantallas de menor tamaño deben ser considerados antes de tomar su decisión. Afortunadamente existen muchas opciones a tu disposición, te invitamos a que las conozcas ;)

Cuadriculas con Frameworks

Uno de los creadores del Framework CSS es 960 Grid System y si se dirige a su sitio se puede ver que está siendo ampliamente utilizado por varios sitios de gran importancia. Lo bueno de usar algo que está bien establecido, es con la experiencia y  gran soporte, en este caso el uso en navegadores.

Algunas alternativas nuevas a 960 son Frameworks como Bootstrap y la Foundation. Ambos siguen un enfoque similar en el que utilizan las clases con anchos asociados con ellos para crear su diseño. Además del diseño, también ofrecen muchos otros componentes del sitio que hacen que la creación de tu sitio sea un proceso rápido. Una herramienta útil que puede ayudarle a escoger sólo los componentes que realmente necesita es un personalizador como este para Bootstrap. Esto evitará el problema de tener CSS con código basura.

Frameworks de Preprocesadores

Un enfoque alternativo para los sistemas basados en la clase es utilizar un preprocesador CSS como SASS o LESS. Dependiendo de lo que elija, hay una variedad de opciones a su disposición. Susy y ZenGrids tanto siguen un enfoque similar, usando el poder de SASS. También son bastante fáciles de instalar, solo necesitas un simple comando para conseguir lo que necesitas de forma rápida.

Flexbox y más allá

Quedan algunas soluciones CSS nativas que cambiarán la forma en que podemos diseñar nuestros sitios. En primer lugar la especificación FlexBox, Si eres nuevo en esta area, es recomendable que conozcas este maravilloso Framework. FlexBox hace uso de una sintaxis completamente nueva para lograr diseños funcionales y elegantes. Este es un importante paso adelante, ya que no se basa en Frameworks o pre-procesadores para lograr los resultados necesarios para la web moderna. FlexBox parece ser el camino a seguir para establecer los estándares web modernos.

Al trabajar con Drupal, puedes tomar ventaja de cualquiera de estos enfoques ya que muchos de los Frameworks tienen temas disponibles. Así que puedes probar un par de ellos y pasar un buen rato con el diseño!