Grids com ou sem flexbox

[rickbenetti]

Gostaria de saber do pessoal o que estão usando para criação de grids, preocupação com versões antigas de navegadores para Flexbox, se já estão usando flexbox e se tem algum setup pra isso?

Eu por exemplo não dou suporte para mais do que 1 versão anterior de navegador, mas sei que muitas agências e empresas ainda fazem sites pra IE7, IE8, IE9 e isso acaba sendo impeditivo ou gerando a necessidade de usar uma gambiarra (pollyfill).

Aqui segue alguns projetos com flexbox que estou acompanhando:

• Bulma.io - http://bulma.io
• Miligram - http://milligram.github.io/

---

Estou integrando o Bulma.io no meu projeto de WordPress Theme Start, vou colocar ele no github em breve.

[mikejavier]

Com o fim do suporte ao as versoes 8,9 e 10 do IE, acredito que nao tenha mais impedimento de se implementar o flexbox de vez.
Eu atualmente utilizo o lost que para transformar o grid a flexbox basta adiconar uma variavel. Com isto estou dando mais 3 meses para o publico atualizar o browser e assim começar a implementar de vez com flexbox.

[vitorbritto]

Passarei a utilizar Flexbox nos futuros projetos, notificando os clientes para o corte de versão no IE (gte IE 10). =]

[felipefialho]

Good question cara.

Sinceramente acho que já da pra usar. A própria Microsoft vai descontinuar IE antigos, só dando suporte do 11 para cima, tudo vai ficar facilitado daqui alguns meses.

Porém estou tão habituado com sistemas de grids como o Jeet que vou precisar de um tempo de adaptação.

Uma boa alternativa é o Lost, do mesmo criador do Jeet, mas que estava cheio de problemas. Parece que outro time está tocando o projeto agora e está uma maravilha.

Vale dar uma olhada.

[leandroruel]

passei a usar esse garoto aqui: http://flexboxgrid.com

[afonsopacifer]

Flexbox é <3

Acho que mais do que utilizar um Grid com Flexbox, é importante aprender bem a especificação ;)
Com flexbox, mais do que nunca o uso de um sistema de grid para coisas mais simples se faz desnecessário, mais para projetos em que seu uso é necessário eu tento utilizar sempre um Grid Semântico, de preferencia um que use placeholders ou mixins para gerar apenas o necessário, uma vez que para estender o suporte atual do Flexbox temos muuuuitos prefixos.

Para esses casos eu acabei fazendo o meu próprio, se alguém quiser dar uma olhada ta aí. http://flexgridframework.com/

E se alguém quiser trocar um idea sobre flexbox tamos ai ;)

[yurimatheus]

Afonso muito bom o projeto, estou com um projeto grande e estava aqui lendo
quais as soluções que os colegas tem usado para usar nesse projeto.

Nice Project!

Cordialmente,

Yuri Gomes.

2016-02-03 16:46 GMT-03:00 Afonso Pacifer [email protected]:

Flexbox é <3

Acho que mais do que utilizar um Grid com Flexbox, é importante aprender
bem a especificação ;)
Com flexbox, mais do que nunca o uso de um sistema de grid para coisas
mais simples se faz desnecessário, mais para projetos em que seu uso é
necessário eu tento utilizar sempre um Grid Semântico, de preferencia um
que use placeholders ou mixins para gerar apenas o necessário, uma vez que
para estender o suporte atual do Flexbox temos muuuuitos prefixos.

Para esses casos eu acabei fazendo o meu próprio, se alguém quiser dar uma
olhada ta aí. http://flexgridframework.com/

E se alguém quiser trocar um idea sobre flexbox tamos ai ;)

—
Reply to this email directly or view it on GitHub
#13 (comment).

[rickbenetti]

@leandroruel o flexboxgrid parece legal, mas segue o padrão de nomenclatura do bootstrap.

@afonsopacifer legal esse teu framework, vou dar uma estudada depois.

[ghost]

Alguém aqui utilizou o Bourbon? Ele tem umas paradas com flexbox pela documentação, queria saber da experiência da galera ao usa-lo.

[mikejavier]

@Meche o Bourbon é simplesmente uma lib sass, que contem varios mixin, functions e mais outras coisas para vc desenvolver mais rapido. Lembro que tinha um mixin para criar o tamanho dos elementos @SiZe. vc passava altura e largura e ele te gerava o width e heigth. Quando utilizo sass nos projetos eu importo o Bourbon.

[ghost]

@mikejavier muito obrigado pela explicação, vou fazer alguns testes com ele.. sabe me dizer se importar o Bourbon, todos aqueles exemplos do site (Refills, Neat e Bitters) fazem parte da lib? Achei bem legal a proposta. Obrigado novamente!

[mikejavier]

Devem fazer, eu nao utilizo 100% da lib, so algumas coisas.

[DevCarlosAugusto]

Depende muito, eu sou totalmente a favor de um suporte ao IE9+, para projetos bem modernos nos quais algumas tecnologias não vão funcionar de modo algum no IE9 então fazer um suporte ao IE10+.

A questão é, vocês usam progressive enhancement/graceful degradation ?
Porque sempre segui as coisas pensando que temos que dar uma saída visual minima da aplicação/site ao cliente ou um motivo do porque não funciona certas coisas nele.
Ou seja, sou sim a favor de se fazer grids com flex-box sempre, mas é necessário sempre pensar um pouco abaixo....

[felipefialho]

@Carlosxell Sim, utilizo progressive enhancement, acredito que se um navegador não tem condições de exibir determinado efeito ou técnica, simplesmente não deve exibir. O importante é ter acesso total ao conteúdo.

Mas claro, depende também. Com a Microsoft deixando de dar suporte para IEs antigos, já é possível negociar para que o suporte seja no minimo IE10+;

[afonsopacifer]

@Carlosxell dá para fazer muita coisa relacionada a cross browser, em especial tem a Zoe M. Gillenwater que fala muito sobre o assunto, ela trabalha na Booking, dá suporte a IE7 e usa flexbox (Mito).

Ai o link da Talk em que ela fala sobre o assunto:
https://www.youtube.com/watch?v=_98SE8WUvLk

Tem tbm o awesome-flexbox, que lista algumas coisas legais sobre o assunto, se quiser dar uma olhada ;)

[marquinhusgoncalves-zz]

Aqui na agência ainda usamos o Bootstrap, mas estamos testando alguns frameworks e até pensando em fazer um próprio, usamos SASS já testamos o Susy e o Bourbon com Neat mas também estamos de olho no Jeet e Lost porém teríamos que migrar para o Stylus, como eu disse estamos analisando para mudar e continuar mantendo um padrão, em relação ao suporte não teríamos problemas porque não damos suporte a navegadores antigos no máximo um versão anterior, mas seguimos o progressive enhancement.

[felipefialho]

@marquinhusgoncalves Vou te trazer uma boa noticia então.

O Jeet é compatível com SASS e o Lost é em PostCSS, então é compatível com qualquer coisa, inclusive CSS puro. Manda ver ;)

[simaodeveloper]

Bom onde trabalho utilizamos Grid Bootstrap que customizamos dependendo do projeto e FlexboxGrid que tem uma notação similar ao do Bootstrap para projetos >= IE10, eu brinco com Jeet em projetos pessoais (vou dar uma olhada no Lost). Mas tudo depende do público do cliente.

[tcelestino]

Já tenho dois projetos que usei o flexbox e não tive problemas. Pra mim, foi uma das melhores features nessa "nova" atualização do CSS.

[alansousadev]

boa noite,
galera estou pensando em utilizar o flexbox e me bateu uma duvida.
como ele nao funciona com ie 10- , sera que é possivel utlizalo com o modernizr,
criando um no- ?

[afonsopacifer]

@alanbeda Da sim!
Ai o artigo que explica tudo certinho :)
http://zomigi.com/blog/using-modernizr-with-flexbox/?utm_campaign=CSS%2BLayout%2BNews&utm_medium=email&utm_source=CSS_Layout_News_8

[williamcosta]

@afonsopacifer Muito legal o seu framework cara!! Parabéns.

[afonsopacifer]

@williamcosta Vlw mano :)

[clarabatt]

Eu uso The Semantic CSS Grid com stylus (usei com Less também) e nunca tive problemas, já dei uma olhada no flexbox mas ainda não testei...