Flexcolor

Líneas de color

De flex[box] + color

Flexcolor es un pequeño experimento en el cual mezclamos Flexbox y un poco de color.

The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll.

Flexbox (o flexible box) de CSS3, es el modo de diseño que va a jubilar los floats y positions en la creación de layouts, a la hora de desarrollar webs. Pero nosotros, sin mayor pretensión que la de experimentar, decidimos probarlo con otra función algo más sencilla y prosaica: la creación de un patrón de color para o background de una web y sus posibles variaciones, a través de tres* de las múltiples propiedades del flexbox:

  1. flex-direction
  2. order
  3. flex-grow

*Además de estas tres propiedades, también utilizamos un background-color para jugar con una segunda paleta de color.

Os dejamos el resultado.

Making-of

Para construir o nuestro Flexcolor necesitamos:

El HTML para hacer el marcado del site. El CSS para darle estilo y montar el flexbox. Y el jQuery para crear un menú con el que cambiar algunos de sus estilos (eje, orden, tamaño y color).

HTML

Dentro de una primera div, que actuará como flexbox, incluimos nueve div más. Una por cada franja de color de nuestro background.

<div class="contetor-flex">
  <div class="caixa caixa-1"></div>
  <div class="caixa caixa-2"></div>
  <div class="caixa caixa-3"></div>
  <div class="caixa caixa-4"></div>
  <div class="caixa caixa-5"></div>
  <div class="caixa caixa-6"></div>
  <div class="caixa caixa-7"></div>
  <div class="caixa caixa-8"></div>
  <div class="caixa caixa-9"></div>
</div>
div madre con divs hijas

CSS

Para hacer de nuestra div madre una verdadera caja flexible, le aplicamos la propiedad display:flex; Y para forzarla a ocupar todo el alto del <body>, também incluímos um height:100%.

.contetor-flex {
  display: flex;
  height: 100%;
}
display:flexbox

Seguidamente, indicamos el ancho inicial de las div hijas con la propriedad flex y un valor 1 1 auto (lo mismo que auto).

.caixa {
  flex: 1 1 auto;
}

Luego, con un flex-direction:column; hacemos que nuestras 9 div hijas se coloquen en el eje vertical del flexbox. E con un align-items:stretch; conseguimos que éstas ocupen perpendicularmente todo o espacio disponible.

.contetor-flex {
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
flexbox con display column
div con stretch

Ya por último, aplicamos el color a nuestras div hijas con un background-color y… voilà! aparece por fin nuestro patrón de fondo 🙂

.caixa:nth-child(3n+1) { background-color: #ff5000; }
.caixa:nth-child(3n+2) { background-color: #f7ad00; }
.caixa:nth-child(3n+3) { background-color: #FF2691; }
líneas horizontales de colores

Fácil, ¿a que sí?

Pues ahora con el background listo, llega el momento de preparar las clases que nos permitirán variar su eje/orden/tamaño/color.

Empezamos con lo más sencillo, cambiar el eje. Para ésto creamos una clase nueva (.coluna) para la div madre, y en ella cambiamos el flex-direction:column; inicial por un flex-direction:row;.

.contetor-flex.coluna {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
líneas verticales

Después, con otra nueva clase (.ordem), esta vez para seis de las div hijas, cambiamos su orden dentro del flexbox con la propiedad order

.caixa-2.ordem {
  -ms-flex-order: 3;
   -webkit-order: 3;
           order: 3;
}
.caixa-3.ordem {
  -ms-flex-order: 2;
   -webkit-order: 2;
           order: 2;
}
.caixa-5.ordem {
  -ms-flex-order: 6;
   -webkit-order: 6;
           order: 6;
}
.caixa-6.ordem {
  -ms-flex-order: 5;
   -webkit-order: 5;
           order: 5;
}
.caixa-8.ordem {
  -ms-flex-order: 9;
   -webkit-order: 9;
           order: 9;
}
.caixa-9.ordem {
  -ms-flex-order: 8;
   -webkit-order: 8;
           order: 8;
}
líneas verticales

Como en el flexbox la propiedad order tiene un valor de cero por defecto (y respeta el orden del html), para conseguir subir las 3 div hijas una posición (paso anterior), deberíamos tener indicado previamente el orden de todas las div hijas.

.caixa-1 {
  -ms-flex-order: 1;
   -webkit-order: 1;
           order: 1;
}
.caixa-2 {
  -ms-flex-order: 2;
   -webkit-order: 2;
           order: 2;
}
.caixa-3 {
  -ms-flex-order: 3;
   -webkit-order: 3;
           order: 3;
}
.caixa-4 {
  -ms-flex-order: 4;
   -webkit-order: 4;
           order: 4;
}
.caixa-5 {
  -ms-flex-order: 5;
   -webkit-order: 5;
           order: 5;
}
.caixa-6 {
  -ms-flex-order: 6;
   -webkit-order: 6;
           order: 6;
}
.caixa-7 {
  -ms-flex-order: 7;
   -webkit-order: 7;
           order: 7;
}
.caixa-8 {
  -ms-flex-order: 8;
   -webkit-order: 8;
           order: 8;
}
.caixa-9 {
  -ms-flex-order: 9;
   -webkit-order: 9;
           order: 9;
}

Ahora le toca el turno al tamaño. Para variarlo sumamos una nova clase (.tamanho), con la que cambiamos el tamaño de la primera y tercera div de cada tres, a través de la propriedad flex-grow. En este caso el valor 0.5 provoca que el tamaño de las div disminuya a la mitad y el 1.5, que crezca un 50%.

.caixa.tamanho:nth-child(3n+1) {
  -webkit-flex-grow: .5;
  -ms-flex-positive: .5;
          flex-grow: .5;
}
.caixa.tamanho:nth-child(3n+3) {
  -webkit-flex-grow: 1.5;
  -ms-flex-positive: 1.5;
          flex-grow: 1.5;
}
líneas verticales de diferentes anchos

Ya por último, creamos otra clase (.cor) con la que, gracias a un background-color, cambiamos los colores de nuestro fondo.

.caixa.cor:nth-child(3n+1) { background-color: #7fc1e8; }
.caixa.cor:nth-child(3n+2) { background-color: #aca083; }
.caixa.cor:nth-child(3n+3) { background-color: #585045; }
líneas verticales de diferentes anchos

jQuery

Para terminar, sólo nos queda por añadir unas líneas de jQuery. Con ellas podremos aplicar las nuevas clases al clicar en el menú del Flexcolor, y variar a nuestro gusto su eixo/ordem/tamanho/cor.

Para ésto utilizamos el string .toggleClass() con el que hacemos que los botones del menú sumen o eliminen la clase extra que tienen asignada.

$(document).ready(function(){
  $('.b-eixo').click(function(){ 
      $('.contetor-flex').toggleClass('eixo');
  });
  $('.b-ordem').click(function(){ 
      $('.caixa-2,.caixa-3,.caixa-5,.caixa-6,.caixa-8,.caixa-9').toggleClass('ordem');
  });
  $('.b-cor').click(function(){ 
      $('.caixa').toggleClass('cor');
  });
  $('.b-tamanho').click(function(){ 
      $('.caixa').toggleClass('tamanho');
  });
});

Licencia: Dominio Público

Save

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *