Flexcor

Linhas de cor

De flex[box] + cor

Flexcor é um pequeno experimento no que misturamos flexbox e umha miguinha de cor.

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

O flexbox (ou flexible box) de CSS3, é um modo de design chamado a ser quem jubile os floats e positions na criaçom de layouts, à hora de desenvolver webs. Mas nós, sem maior pretensom que a da experimentaçom, decidimos prová-lo com outra funçom algo mais singela e prosaica: a criaçom dum padrom de cor para o background dumha web e as suas possíveis variaçons, através de três1 das múltiplas propriedades do flexbox:

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

Eis o resultado.

Making-of

Para construirmos o nosso Flexcor precisamos de:

O HTML para fazer o marcado do site. O CSS para lhe dar estilo. E o jQuery para criarmos um menú com o que mudar alguns dos seus estilos (eixo, ordem, tamanho e cor).

HTML

Dentro dumha primeira div, que atuará como flexbox, incluímos nove div mais. Umha por cada faixa de cor do nosso 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 mãe com div filhas

CSS

Para fazer da nossa div mãe umha verdadeira caixa flexível, aplicamos-lhe a propriedade display:flex; E para forçá-la a ocupar o alto todo do <body>, também incluímos um height:100%.

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

De seguido, indicamos o comprimento inicial das div filhas com a propriedade flex e um valor 1 1 auto (o mesmo que auto).

.caixa {
  flex: 1 1 auto;
}

Logo, com um flex-direction:column; fazemos que as nossas 9 div filhas se coloquem no eixo vertical do flexbox. E com um align-items:stretch; conseguimos que estas ocupem perpendicularmente todo o espaço disponível.

.contetor-flex {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  height:100%;
}
flexbox com display column
div com stretch

Já por último, aplicamos as cores às nossas div filhas com um background-color e… voilà! velaí temos o nosso padrom de fundo 🙂

.caixa:nth-child(3n+1) { background-color: #ff5000; }
.caixa:nth-child(3n+2) { background-color: #f7ad00; }
.caixa:nth-child(3n+3) { background-color: #FF2691; }
linhas horiçontais de cores

Simples, nom é?

Pois agora com o background listo, chega a vez de prepararmos as classes que nos ham permitir variar o seu eixo/ordem/tamanho/cor.

Começamos com o mais singelo, mudarmos o eixo. Para isto criamos umha classe nova (.coluna) para a div mãe, e nela trocamos o flex-direction:column; inicial por um flex-direction:row;.

.contetor-flex.coluna {
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
}
linhas verticais

A seguir, com outra nova classe (.ordem), desta vez para seis das div filhas, mudamos a sua ordem dentro do flexbox com a propriedade 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;
}
linhas verticais

Como no flexbox a propriedade order tem um valor de zero por defeito (e respeita a ordem do html), para conseguir subir as 3 div filhas umha posiçom (passo anterior), devemos ter indicada previamente a ordem de todas as div filhas.

.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;
}

Depois continuamos com o tamanho. Para variá-lo somamos umha nova classe (.tamanho), com a que mudamos o tamanho da primeira e terça div de cada três, através da propriedade flex-grow. Neste caso o valor 0.5 faz que o tamanho das div diminua à metade e o 1.5, que medre um 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;
}
linhas verticais de diferentes largos

Já por último, criamos outra classe (.cor) com a que, graças a um background-color, mudamos as cores do nosso fundo.

.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; }
linhas verticais de diferentes largos

jQuery

Para finalizarmos, só nos resta engadir umhas linhas de jQuery. Com elas poderemos aplicar as novas classes ao fazer clique no menu do Flexcor, e variar ao nosso gosto o seu eixo/ordem/tamanho/cor.

Para isto utilizamos o string .toggleClass() com o que fazemos que os botons do menu somem ou apaguem cadansua classe extra.

$(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');
  });
});

1 Além destas três propriedades, também utilizamos um background-color para jogarmos com umha segunda paleta de cor.

Licença: Domínio Público

Save

Save

2 thoughts on "Flexcor"

  1. Hi there! Quick question that's completely off topic.
    Do you know how to make your site mobile friendly?

    My weblog looks weird when viewing from my iphone 4.
    I'm trying to find a template or plugin that might be able to resolve this
    problem. If you have any suggestions, please share. Cheers!

    1. arinspunk diz:

      Hi Olivia!

      If your weblog is made with WordPress, you could use the <a href="http://themeforest.net/item/x-the-theme/5871901&quot; rel="nofollow">X-Theme</a>, it has a price of 64$ but it has a lot of options and is really mobile friendly. If you prefer a free alternative, you could search for one in your dashboard: Appearance/Themes/Add New/Feature Filter and mark the checks: "Responsive Layout" and "Fluid Layout". There are many mobile friendly themes.

      I hope you have good luck 😉

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *