Solved by Flexbox

#1

Post by oskarth » Fri, May 22, 2015, 11:11 AM UTC

Solved by Flexbox
philipwalton.github.io

Re: Solved by Flexbox

#2

Post by Ygg2 » Fri, May 22, 2015, 11:51 AM UTC

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't?

[0]http://en.wikipedia.org/wiki/Cassowary_(software)

[1]http://gridstylesheets.org/

Re: Solved by Flexbox

#3

Post by de_dave » Fri, May 22, 2015, 11:53 AM UTC

Ygg2 wrote: post #2

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0] http://en.wikipedia.org/wiki/Cassowary_(software) [1] http://gridstylesheets.org/

For a start, flexbox doesn't require JS.

Re: Solved by Flexbox

#4

Post by dyladan » Fri, May 22, 2015, 11:59 AM UTC

Ygg2 wrote: post #2

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0] http://en.wikipedia.org/wiki/Cassowary_(software) [1] http://gridstylesheets.org/

Built-in browser support

Re: Solved by Flexbox

#5

Post by Ygg2 » Fri, May 22, 2015, 12:01 PM UTC

dyladan wrote: post #4

Ygg2 wrote: post #2

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0] http://en.wikipedia.org/wiki/Cassowary_(software) [1] http://gridstylesheets.org/

Built-in browser support

That's kinda only true at the moment.

With https://wiki.css-houdini.org/ there is a chance you could implement custom layout in CSS.

Re: Solved by Flexbox

#6

Post by Ygg2 » Fri, May 22, 2015, 12:01 PM UTC

de_dave wrote: post #3

Ygg2 wrote: post #2

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0] http://en.wikipedia.org/wiki/Cassowary_(software) [1] http://gridstylesheets.org/

For a start, flexbox doesn't require JS.

I meant more as in Layouts. Anyway, cleared that miscommunication.

Re: Solved by Flexbox

#7

Post by kagamine » Fri, May 22, 2015, 12:02 PM UTC

Ygg2 wrote: post #2

What layouts does Flexbox solve that Cassowary[0] or GSS[1] layout doesn't? [0] http://en.wikipedia.org/wiki/Cassowary_(software) [1] http://gridstylesheets.org/

As another user says, no js.

Pure CSS runs in the browser without a get request (other than the CSS file you are already using, obv.) so it eliminates the need for a grid system like Bootstrap, 960gs etc. The 'grid' is there in the CSS and html where it is meant to be, without the need for @media queries with 10 decimal points and 15 font sizes. It also provides more layout options than currently exist without the need for hacky solutions.

How useful the linked site is right now is questionable though. If you want a IE8+ cross browser & mobile site to rely on flex-box ... it can be done and quite easily, but not with the skeleton examples on that page (but they do point that out themselves).

Re: Solved by Flexbox

#8

Post by Touche » Fri, May 22, 2015, 12:11 PM UTC

Another one to check out if you (like me) don't get how to use it just from reading about it: http://bennettfeely.com/flexplorer/

Re: Solved by Flexbox

#9

Post by Already__Taken » Fri, May 22, 2015, 12:16 PM UTC

Just started a test project using flexbox and I'm finding myself using it constantly.

In the "individual grid sample" why have you chose to make a 2/3rds and 1/3rd column with divs respectively

    flex:1; width:33.3333333%

instead of leveraging the ratio

    flex:2; flex:1

Re: Solved by Flexbox

#10

Post by chrisguilbeau » Fri, May 22, 2015, 12:28 PM UTC

I came up with this very minimal implementation of flex box. Basically defines row or column, their content can be centered or marked as tight to keep from dividing the cell evenly. https://github.com/chrisguilbeau/quickflask/blob/master/s/fl...