Grid Flexbox com SASS

---

Desenvolvedores front-end do mundo inteiro tem feito seus sites, utilizando frameworks como ‘Bootstrap’ e ‘Foundation’. Não há nada de errado com isso. Além de aumentar a produtividade, ajuda na padronização do layout. Mas se você segue essa carreira, precisa ao menos uma vez na vida criar seus próprios pacotes de código. E um dos itens indispensáveis para se criar um layout semântico, é um sistema de grids. Nesse artigo, você vai ver um sistema de grids, utilizando Flexbox, que ainda está em fase de testes, mas você já pode testar em seus projetos, além de poder deixar sua opinião, contribuindo com o desenvolvimento deste código.

/* Variaveis */
$site: 1170px;
$sitefluid: 90%;
$site100: 100%;
$tablet: 992px;
$mobile: 768px;
$gridnumber: 12;
/* Fim - Variaveis */

Essas são as principais variáveis do projeto. Começamos definindo a largura em diversos tamanhos de tela, seguidos pela variável $gridnumber que corresponde a quantidade de colunas de nosso grid.

/* Mixins */
@mixin gutter {
	margin-bottom: 6px;
	box-sizing: border-box;
	padding-left: 3px;
	padding-right: 3px;
	transition: 0.9s;
}

@mixin grid {
	margin-right: -3px;
	margin-left: -3px;
}

@mixin flexprincipal {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	/* Quando atingem a largura máxima, os itens pulam de linha */
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	flex: 1 0 25%
}

@mixin justificar {
	@include flexprincipal;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		margin: 0 auto;
}

@mixin centralizar {
	@include flexprincipal;
		-webkit-justify-content: center;
		justify-content: center;
		width: $site100;
}

@mixin esquerda {
	@include flexprincipal;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		width: $site100;
}

@mixin direita {
	@include flexprincipal;
		-webkit-justify-content: flex-end;
		justify-content: flex-end;
		width: $site100;
}
/* Fim - Mixins */

Com os Mixins, definimos todo o código que será reutilizado no projeto.

/* Flexbox */

.site {
	width: $sitefluid;
	max-width: $site;
	margin: 0 auto;
}

.site-fluid {
	width: $sitefluid;
	margin: 0 auto;
}

.grid {
	@include justificar;
	@include grid;
}

.grid-centralizar {
	@include centralizar;
	@include grid;
	// align-items: center;
}

.grid-esquerda {
	@include esquerda;
	@include grid;
}

.grid-direita {
	@include direita;
	@include grid;
}
/* Fim - Flexbox */

A classe .grid será a classe responsável por englobar todas as colunas do nosso grid. Ela justifica as colunas do nosso site. Se você quer diferentes alinhamentos para suas colunas, você pode substituir por .grid-centralizar, .grid-esquerda, .grid-direita. Se você tem dúvidas com respeito ao funcionamento do flexbox, você pode conferir nesse artigo do Tableless.

/* Flex Itens Desktop */
@for $i from 1 through $gridnumber {

	.desktop-#{$i} {
		width: 100% / $gridnumber * $i;
		@include gutter;

		@media screen and (max-width: $tablet) {
			width: 100%;
		}
	}

}
/* Fim - Flex Itens Desktop */

Nesse bloco de código, foi criado o grid principal, voltado para desktops. Através do laço for, cria-se as classes .desktop-1 até desktop-12. Utilizando o mesmo conceito de grid do Bootstrap. A diferença é que foi utilizado Flexbox, para dispormos as colunas do nosso grid.

/* Flex Itens Tablet */
@media screen and (max-width: $tablet) {

	@for $i from 1 through $gridnumber  {

		.tablet-#{$gridnumber} {
			width: 100% / $gridnumber * $i;
			@include gutter;

			@media screen and (max-width: $mobile) {
				width: 100%;
			}
		}

	}

}
/* Fim - Flex Itens Tablet */

Disposição dos elementos no modo Tablet. E abaixo o bloco de código responsável por alinhar os itens em dispositivos Mobile.

/* Flex Itens Mobile */
@media screen and (max-width: $mobile) {

	@for $i from 1 through $gridnumber {

		.mobile-#{$gridnumber} {
			width: 100% / $gridnumber * $i;
			@include gutter;
		}

	}

}
/* Fim - Flex Itens Mobile */

Você também pode conferir o código do grid no Bitbucket aqui