Susy: Flexbox plugin for Susy

Yes, this is planned. :)

:+1:

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

@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. :)

@ericam I agree but, everyone love "all batteries included" tools more than "diy" tools! :smile: 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.

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

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

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.

+1

+1

+1

+1

+1

What's with all the :+1: ? In my experience Flexbox doesn't offer anything particularly fancy or useful to grid systems _other than_ order (which is somewhat handy).

@corysimmons It gives more performance IMO

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

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

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.

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.

:+1:

haha dat tyson.jpg doe XD

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

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

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?

Vertical positioning is far better in flexbox.

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.

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.

@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? :\

@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.

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.

From Chris Coyer, vertically and horizontally aligning two elements takes 3 lines of css with flexbox, and up to 8 css properties, 3 different classes, 2 divs, and maybe some negative margins without using flexbox.

You right about space-between, I would like to point out once again that I've got much to learn about flexbox, but based on this example above, I know I definitely will look into it properly very soon. From what I've seen, it offers alignment and justification properties that would be a pain to code and maintain with current tools, and that's just by scratching the surface.

@pl-mnm You're actually making the point for us. The reason these grid systems exist is because codifying all of the hacks is a useful abstraction. Flexbox doesn't need the hacks, so there's not reason to codify them into an abstraction (doubly so because some of what you're doing you need knowledge of your DOM for)

FWIW, Flexbox isn't actually meant for grid layout (which is why making grids in Flexbox is so tricky). You know what is though? CSS Grid Layout

Agree about CSS grid layout, which I admit I know nothing about.

That's where I humbly disagree with you. Susy is not a grid system to me, it's a tool that does math and calculates proportions and widths (with the added benefit of dealing with the hacks). A gutter or a column is only a percentage of a whole, Susy just figures out what the exact percentage is and provides quick tools for using it in the context of a grid. However you can also use Susy and not deal with grids like for asymmetrical layouts or just some quick math on a width somewhere.

It's not that flexbox doesn't have anything to offer, but given flexbox, I'm not sure grid systems have a whole lot to offer. When I've used flexbox, I quickly stop caring about calculated grid percentages, and use flex or basic fractions instead. Not ruling it out, just skeptical that we can do much to make flexbox better from our end.

I agree with @ericam And I think not having to do the maths might give us a little performance improvements for simple layouts. I don't know for sure. Let's stop arguing BTW

@corysimmons Google disagrees on flexbox performance https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=en

@e-karma 10ms for 1300 elements.

@nmabhinandan Yeah I'm done arguing about it. I just wanted to point out Flexbox isn't the silver bullet you all think it is a silver bullet.

@corysimmons, your opinions on layout features are welcome, but there's no "you all" saying anything about "silver bullets". A few plus-ones on a feature relating to new CSS techniques is _completely sensible_ for a layout toolkit. Anyone using Susy already knows there isn't a silver bullet — that's the entire point of Susy, and the strongest argument _for_ adding flexbox features. There's no need to condescend.

:+1: Won't be back.

@ericam :clap:

Flexbox integration is next on my personal Susy priority list. Hopefully we can make it happen soon. :smile_cat:

@ericam I'm experimenting with Flexbox on my grids using Susy and Flexbox nowadays too :)

Text can often imply argumentative tone, when the real reason I think most of us are here is to solve problems. The "well that's a rare use-case" argument doesn't cut it for me as my project is not simple and the extra 10MS per floated item (with a 'budget' of 10MS per the article) can make a difference, especially in an ambitious project.

Web dev can be disheartening when you finally feel ahead of the curve after learning a better way (susy) to solve emerging "problems" only to find out something else was just released that seems to be part of 'the future'. Luckily I invested in a system w/ helpful and intelligent people like @ericam who can recognize this and make the adjustments to make Susy maximally useful.

With that, anything I can do to help make suggestions or test new susy features out w/ Flexbox let me know. Also, make sure you checkout @zellwk new susy resources he's working hard on as we speak :) Great stuff

For those of you who have played with flexbox on it's own (or with Susy functions): where do you see Susy fitting in? What syntax do you imagine, and what output are you hoping for?

if it could. work with existing syntax it would make the transition easier for sites that already use susy

I've just started using flexbox in combination with Susy to achieve a few things I can't use Susy for (or Compass). For example, it's great for building centered horizontal menus and is perfect for vertical centring. I can see how in combination with Susy's maths it could be used to create a really flexible layout system (for example, calculating the 'flex-basis' setting), however I don't know enough about how the various flex attributes actually work yet to really judge either way. The 'order' attribute is awesome, too.

Want.

Would love this too, it would be great to have the flexibility (no pun
intended) and the option.

On Mon, 13 Jul 2015 3:38 PM Rachel Nabors [email protected] wrote:

Want.

—
Reply to this email directly or view it on GitHub
https://github.com/ericam/susy/issues/405#issuecomment-120819322.

It will be easier to work with Flexbox with version 3. I don't think there will ever be support in version 2, although @ericam should confirm this.

Tagging this for v3. I'd be willing to accept a patch for v2, but it's not likely that I'll build one myself.

what's the time frame we're looking at?

I don't want to make any launch-date promises, but @HugoGiraudel and I wrote the core of v3 this afternoon. It shouldn't take us long before v3 is ready for plugins like flexbox (and it will be much easier to integrate). May take me longer to actually write one myself...

As @ericam said, we basically have the core functionality of v3. We need to do all the things that are needed to release a proper version: documentation, tests, site and so on.

Tl;dr: no time frame. We don't know when it will be ready. :)

+1

does this can be used with susy 2 : https://github.com/mastastealth/sass-flex-mixin/blob/compass/flex.scss ?

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));
}

will test this as soon as i could

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

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/

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.

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.

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

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%...

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

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);
}

@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.

@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

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

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

@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.

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.

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.

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

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

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

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.

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

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.

@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.

@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.