Flexbox plugin for Susy

[nmabhinandan]

I'm seeing a lot of buzz about flexbox grid system all around the internet and I'm having the same feeling a while ago of using bootstrap when people were talking about susy. Is there any plans of implementing that thing? It would be great to have it implemented in susy and can be enabled in settings instead of changing the whole code.

[jina]

Yes, this is planned. :)

[hades200082]

👍

Flexbox with a standard grid fallback would be awesome... another 👍 if it can optionally use modernizr's .no-flexbox class for fallback OR split the fallback into a separate CSS automatically

[mirisuzanne]

@hades200082 That does sound amazing, but we tend to avoid that much magic in our tools. There's just no good way to insinuate a flexbox-to-float fallback without knowing anything about your DOM structure. But, if we do it right, hopefully we can make it easy for you to create that fallback project-by-project without too much work. You know your needs better than we do. :)

[nmabhinandan]

@ericam I agree but, everyone love "all batteries included" tools more than "diy" tools! 😄 What I'm expecting is to update susy, throw a flexbox = true flag somewhere and yeah, thats all. I don't wanna change whole codebase just to port from standard grid to flexbox grid.

[mirisuzanne]

It doesn't really matter what people like. CSS just doesn't work that way. ;-)

[nmabhinandan]

I agree. It was just a wishlist from a backend developer! Keep up the good work. 👍

[hades200082]

How about then, when including a file being able to specify flexbox or normal?

This would mean that we could create the layout once and include it (with flexbox flag set) into our main scss for output into our main css file.

We could also include it in an alternate layout scss for output to a fallback css file that can then be loaded with yepnope/modernizr for browsers that don't support flexbox.

[maximelebreton]

+1

[jitendravyas]

+1

[petermac-]

+1

[Domusnetwork]

+1

[MakhBeth]

+1

[corysimmons]

What's with all the 👍 ? In my experience Flexbox doesn't offer anything particularly fancy or useful to grid systems other than order (which is somewhat handy).

[nmabhinandan]

@corysimmons It gives more performance IMO

[corysimmons]

@nmabhinandan Could you clarify? Are there any benchmarks out that say Flexbox is more performant than floated elements?

[nmabhinandan]

@corysimmons Nope because it's relatively new. But since it's is trending in web development world, browsers will optimize its performance very soon.

[corysimmons]

So you think it gives more performance, but you have no proof of that, and you think they'll purposefully optimize it to be faster than floated elements because it's something people are interested in? For that matter, are floated elements not performant enough? You can load a page with thousands of floated/nested elements in milliseconds.

Sorry for my skepticism, I just don't think Flexbox brings anything new to the table so far as grid systems are concerned aside from source ordering.

[nmabhinandan]

[Snugug]

That's… dubious at best. In fact, if Paul Irish is to be believed (and he and Ojan Vafai are as Ojan wrote the Webkit and Blink implementations), Flexbox will always be slower than regular block layout (without floats) because Flexbox is multi-pass.

Paul has a good article talking about the perf difference between old flexbox and new flexbox and a way to test the performance of layout. If you want to make the performance argument, you're going to need to back it up with numbers.

I'm with @corysimmons here; at the point you want to use flexbox, you probably don't need a grid framework.

[nmabhinandan]

👍

[corysimmons]

haha dat tyson.jpg doe XD

It is super interesting that so many people 👍 this issue though. I'm really curious if anyone else wants to chime in with reasons why Flexbox might make a good grid system.

[nmabhinandan]

http://philipwalton.github.io/solved-by-flexbox/

[corysimmons]

He's just assigning flex-grow: 1 to everything in a row. What happens when he has 4 items in a row that is supposed to hold 3 items? flex-wrap dumps the 4th item to the next row and then it expands to 100% width - broken.

To avoid this, he'd need to set a custom flex-basis of x%.

If he's setting custom %'s, then why not just use width and a floated div and support more browsers?

[hades200082]

Vertical positioning is far better in flexbox.

[pl-mnm]

Well, since I've found this discussion and it seems people are commenting at the same time. I'll chip in if I may.

Although I haven't really fully grasped flexbox yet, it seems to me that floats are complete hacks and are an outdated way of creating complex layouts. "Clearfix" and "display: table" are hacks, removing margin on the last element in a row is cumbersome and sometimes complex to work with in responsive situations, centering something vertically is one big hack... (I might even argue that "margin: auto" to center something seems wrong when you think about it.)

We need something more powerful and, well, flexible. Floating was great when you had a image surrounded by copy you wanted on the side, but I think we went as far as we could with what we had and now we're just wasting manpower trying to adapt floats for today's needs. As of performance, it may be a bit slower, but I think with modern computing power the difference is negligible, and there is much performance to gain on focusing on other things like responsive images, SVGs, script loading, css optimization (like BEM)... I don't have much to back this up sorry, so I could be wrong.

That's my two cents, but Susy is brilliant and is the first component in every project I start (thanks @ericam!). I could totally see it being even better with flexbox. (I'd imagine Susy would focus more on column and gutter proportions and not have to worry about clearing floats and removing the margin on the last element?). I can't wait to ditch floated layouts once and for all.

[pl-mnm]

And this is also quite important: "[...] the display order of the elements is independent of their order in the source code. This independence intentionally affects only the visual rendering, leaving speech order and navigation based on the source order.."

Its a huge deal for accessibility concerns and a lot less headaches for the future.

[corysimmons]

@hades200082 How so?

@pl-mnm You can't get columns and gutters with Flexbox unless you have the margin-right thing. It's no different than floats. So since that's the case is your argument just that we can get rid of clearfix? :\

[pl-mnm]

@corysimmons You're right, the margin-right thingy is not directly related to floats, but is part of a general layout system that is complex and the more we can remove, the more concise and manageable our code will be and we'll be much happier for it. So yes, removing clearfix is part of the argument. (Having said that, there might be a way to deal with gutters other than with margins/padding using 'space-between'.). I fail to see what floats bring to the table other than continuing to use existing grid systems/frameworks and that its slightly more performant.

Layouts are more than just a grid, we're also talking about vertical alignment and spacing and visual vs source order for accessibility. Flexbox is a tool that was designed for this very purpose and can deal with all this, floats can just stick something to the left or to the right. Susy helps me mainly by doing maths and calculating proportions, i'd rather it was using flexbox than clearing floats.

[corysimmons]

space-between makes layouts like this:

1 2 3 4 5 6
7         8

How does Flexbox help with vertical alignment and spacing? I agree with source ordering being easier.

[mirisuzanne]

Absolutely. You can use the Susy functions anywhere you want. In flexbox, that probably means setting the flex-basis:

.flex-susy {
  @include flex(1 0 span(3));
}

[webmasterpf]

will test this as soon as i could

[webmasterpf]

So i test and i have some questions about my structure that i would to flex it:

<div class="conteneur-flex">
    <div class="HPDiapoVerticalGauche"><?php print $DiapoGaucheHP; ?></div>
    <div class="HPDroite">
        <div class="HPDroite1"><?php print $PartieDroite1; ?></div>
        <div class="HPDroite2"><?php print $PartieDroite2; ?></div>
        <div class="HPDroite3"><?php print $PartieDroite3; ?></div>
     </div><!--    /Partie Droite -->
</div><!--    /Conteneur flex -->

• do i need a container ?
• if yes which mixin do i need to ? this is my starting code:

.conteneur-flex{
        @include clearfix;
        //Flexbox initialisation du conteneur
        @include flexbox;
        @include flex-flow(column wrap);
        //Values: none | <flex-grow> <flex-shrink> || <flex-basis>
        // Default: See individual properties (1 1 0).
            // @include flex(1 0 span(1));
    }
    .HPDiapoVerticalGauche{
        @include clearfix;
            //Flexbox ordre des blocs
            @include flexbox;
             @include order(2);
    }
    .HPDroite{
        //Flexbox ordre des blocs 
        @include flexbox;
         @include order(1);
    }

Actually the desktop version is broken and the mobile one doesn't move blocks as desired.

thanks

[webmasterpf]

I think i found out by replacing @include span(6 of $desktopcol first)); by @include flex(1 0 span(6 of $desktopcol first)); in each element. The container only use @include flexbox; . Then i need to wrap content for mobile first.
Actually i get some trouble with my images, on mobile they aren't responsive as designed.
I found this useful content : http://prettyminimal.com/flexbox/

[mirisuzanne]

I don't know enough about your flexbox mixins to comment much, but that sounds sounds right. You also shouldn't need to use a clearfix anywhere with flexbox. The clearfix is for floated elements.

[webmasterpf]

The clearfix is for floated elements. :

even if his childrens are floating ?
why some images are responsive and anothers none ? i apply the same code on them,i don't understand why, i go to search about this.

[webmasterpf]

ok find out the problem.It was a height on a view (drupal). It's allright now :)

[webmasterpf]

hi, i need your help on a 3 column layout.I get some issue with a classic 12 col like:
`body .conteneur{
.col1_layout_3_6_3{
@include span($mobilecol);
@include clearfix;
@include breakpoint ($desktop){
@include span(3 of $desktopcol no-gutters);
}
}
.col2_layout_3_6_3{
@include span($mobilecol);

    @include clearfix;

    @include breakpoint ($desktop){
      @include span(6 of $desktopcol no-gutters);//pour que la col3 ne sorte pas

    }
 }
.col3_layout_3_6_3{
    @include span($mobilecol);
    @include clearfix;

    @include breakpoint ($desktop){
       @include span(3 of $desktopcol);

    }

}

}
then i try the same code for flex display like above:body .conteneur .conteneur-flex {
@include flex(1 0 span($mobilecol));
.col1_layoutflex_3_6_3{
@include flex(1 0 span($mobilecol));
@include breakpoint ($desktop){
@include flex(1 0 span(3 of $desktopcol no-gutters));
}
}
.col2_layoutflex_3_6_3{
@include flex(1 0 span($mobilecol));
@include breakpoint ($desktop){
// @include flex(1 0 span(6 of $desktopcol no-gutter));
@include flex(1 0 span(6 of $desktopcol first));
}
}
.col3_layoutflex_3_6_3{
@include flex(1 0 span($mobilecol));
@include breakpoint ($desktop){
@include flex(1 0 span(3 of $desktopcol));
@include last;
}

}

}
`
but the css produce good values for width,but it's not applied, all blocks take 100% instead of taking 25% - 50% - 25%...

[webmasterpf]

ok seem to need to have the flex container directly before his childrens.

[jakob-e]

IMHO including a flexbox plugin would only add to the confusion of what flexbox is intended to do.

To quote Jake Archibald

Flexbox: content dictates layout
Grid: container dictates layout (to some extent)

... and Chris Coyier

Note: Flexbox layout is most appropriate to the components of an application, and small-scale layouts, while the Grid layout is intended for larger scale layouts.

... also susy math works just fine without :-)

.flex-span-1 {
    margin-right: gutter($susy);
    flex-basis: span(1 $susy);
}

[mirisuzanne]

@jakob-e I agree, and Susy 3 is going to be all about the functions. I think we should probably build tutorials for different ways to use the functions, rather than fleshed-out plugins that do it for you. As soon as I have the v3 basics all in place, I'll start asking for help on that.

[webmasterpf]

@jakob-e : do your example code for a flex-span-1 class is usable with susy 2 ? My need is about making columns side by side and can manage order on mobile/ desktop version.
thanks

@mirisuzanne do you know about this ? http://codepen.io/reepush/pen/prnAh

[miklb]

@webmasterpf I'm using Susy 2 and have used the span(X) function with flex-basis

[webmasterpf]

@miklb Do you have a code example to show me how do you do in use case?

[miklb]

@webmasterpf nothing in production, but basic example:

$susy: (
  columns: 12,
  gutters: 0.25,
);

.wrapper { display: flex; justify-content: space-between;}
.content { flex-basis: span (9); }
.sidebar {flex-basis: span(3); }

Obviously you can define more columns in your grid, have 3 columns, use in media-queries, etc.

Looking forward to v3 and the plugin to maybe leverage more of Susy with flexbox.

[robsonsobral]

Not exactly about flexbox, but...:

Susy 3 will be even less opinionated than Susy 2 — meaning we're likely to remove floats, not add in other layout techniques (inline-block, flexbox, etc). Susy should work with any layout system, as demonstrated above, but I'm not interested in maintaining a library of hacks for inline-block, float, flex, or anything else. Susy 3 will do the grid math, and leave the decisions to you.

[mirisuzanne]

I have not found any API that I can build to improve on the existing flexbox + susy-functions approach. The next version will continue to support all layout techniques, but will not try to provide extra syntax around any particular technique.

[justincavery]

Any timeframe/plans as to when that will be landing?

[zellwk]

@justincavery @mirisuzanne published a v3 alpha. You can test it out if you want. (I haven't found the time to do so, though).

[mirisuzanne]

Time frames never quite work for open-source development. We're not far away — just need some time to finish up.

[Jakobud]

Any clues on a release for this? Flexbox support is extremely high now compared 2 years ago when this issue was opened. It would greatly simplify everything here.

[akmur]

My two cents: there is a cool full flexbox framework here >> https://github.com/Objectway/super-gigi

[mirisuzanne]

I recommend you start using Susy with flexbox right away - using Susy functions instead of mixins:

.flexbox {
  flex: 1 1 span(3 of 12);
  margin-right: gutter(of 12)
}

I can't find any reliable way to abstract that into a full flexbox plugin, and I don't see any real need for it. Applying the functions directly is simpler than trying to find the perfect mixin wrapper that will work for everyone.

[webmasterpf]

@mirisuzanne Before switching to Susy 3, I would to know if it's possible to do onething like flexbox : give an order to blocks depending in a breakpoint ?
If Susy 3 can do this, it will be great.

[mirisuzanne]

@webmasterpf Susy3 is entirely based on Sass math functions, and the only output is length values. That means Susy doesn't have or need any features related to reordering, but it works great with flexbox, so you can do the reordering that way.