CSS Flex layout

Has anyone tried their hand at this stuff?


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I used a little on the Softpress website (to make the feature boxes on the Pro page all the same height). It’s a total game changer for layout. From what I understand, some browsers are having problems with accessibility – for example, tabbing focus is based on the source order and not the order specified in the CSS. It won’t take long for those to be ironed out though.

This is also a good resource that came up on the list a while back: http://philipwalton.github.io/solved-by-flexbox/

Joe

On 6 Oct 2014, at 04:01, The Big Erns email@hidden wrote:

Has anyone tried their hand at this stuff?

http://css-tricks.com/snippets/css/a-guide-to-flexbox/


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Probably more than I can chew, but here’s something tried -
http://tinyurl.com/qxyy3xr

I ALREADY KNOW THIS LOOKS ABSOLUTELY BANGED ON and a little mangled in
places… okay, in more than a few places to be honest… RIGHT, IT’S A
DISGUSTING THING THAT MUST DIE, THERE - ARE YOU HAPPY NOW? Okay.

Turns out flex layout is a lot harder than it looks, with a confusing and
unintuitive number of selectors and css shorthand. Although
float-constructed grids may be easier, there is something quite interesting
about this flavor of fluid construction. But I can see that it will take
awhile to get the hang of it as this just isn’t a simple case of browser
support - it’s a very different way of working than what I’m used to.

The benefit comes in responsive layouts where the power of flex responds to
simple container width. Given the growing number of different screens sizes
and devices it’s plain to see the need to be able to master content
presentation that is flexible.

For now, I kept having issues with the layout flow not respecting content -
probably because I couldn’t accurately predict the layout changes (though I
tried). In the end I had to use my media queries to adjust the content
within the ranges of flow. Simple enough, but for that effort what was the
benefit?

Still, at some point this will become fully baked and I will likely still
be working. Although caniuse.com gives it pretty much a green light, I
notice there are still some issues - so maybe my next run at his I will try
a more simple project.


Ernie Simpson


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Although not a one-stop solution there are some Sass mixins out there which I’ve found helpful in easing the transition to flexbox.

Todd

Turns out flex layout is a lot harder than it looks, with a confusing and
unintuitive number of selectors and css shorthand.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Although not a one-stop solution there are some Sass mixins out there
which I’ve found helpful in easing the transition to flexbox.

A large majority of the few people working with this stuff are Sassies - I
had to translate the #$%^& mixins back into CSS just to figure them out.
Oook!


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You know why, don’t you?

Sassies. I like that. I’m having t-shirts made. Who wants one?

Todd

A large majority of the few people working with this stuff are Sassies - I
had to translate the #$%^& mixins back into CSS just to figure them out.
Oook!


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Regarding Sass, if you’re concerned about the learning curve or time required to convert a stylesheet then you’re in luck. I started a conversion by doing nothing more than swapping out the vanilla font-size property:

font-size: 1.6rem;

for the Sass version but now with a pixel fallback (requires a mixin)

@include font-size(16);

That’s it. Everything else stayed as-is for a long time, I continued writing vanilla CSS alongside the Sass bits. It makes integrating it into an existing workflow very user-friendly. Add a smidge here and a dollop there as your comfort level increases. Next thing you know your adding more and more until you’re Sassie.

Todd

A large majority of the few people working with this stuff are Sassies - I
had to translate the #$%^& mixins back into CSS just to figure them out.


offtopic mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options