Flux Discussion. How are you using it, what is working for you, etc

As there doesn’t seem to yet be any threads running on Flux, and given it’s such a chunky stack, I figured I’d start a general discussion for the stack, so users can discuss how they are using it etc.

I only got it yesterday and so am in the very early stages of getting to grips with it, but I think I’m getting on well, so far. I have to say I’ve not yet read any docs about it, only watched the video, but I will catch up on the docs at some point.

The thing that I’m interested in hearing about is how people are structuring the initial layout, in terms of the number of columns and rows.

Initially yesterday I first tried to work out in my head the layout I wanted, then set up the exact number of columns and rows to suit.

So, if I wanted two blocks on the first row, say of 25% and 75%, and on the second row 50% and 50%, then on the third 75% and 25%. The obvious thing to do was to specify four columns and three rows.

But when I got into it, I perhaps decided to “pull” one of the blocks to overlap the block before it, or maybe even push it down a bit to “crash” into the row below. At this point I suddenly needed more columns and rows than the initial 4x3. And so lots of stuff needed changing.

Now I’m thinking, in instances where the general layout might change as I’m building up the entire content area to always use a familiar column layout of 12. So, if I really do only want the first row to be 25% and 75% I set up the first to span three cols, then the second to span nine. Then If I decide to make the 2nd overlap the first I can simply extend the first to span four or change the 2nd block accordingly. Does that make sense?

I’m also doing a similar thing with regards to rows, although I’m not 100% sure how best to handle those yet, given overall height needs to be considered.

I’ve not tried this idea too much yet, but in my head, it’ll mean more scope down the line to move things about without having to backtrack and change all rows, cols and blocks.

Obviously, If I want a more precise placement of blocks than 1/12 I can increase it to 24 cols. Or, if I really want to go nuts and use percentages, I can use 100 cols. I think!

Anyway, I’m curious to hear how others are doing things.

From my (albeit fairly limited) experience, it’s much easier to start with more columns and rows than to try extending a layout.

Pre-planning is everything with Flux. It definitely helps to have a grid sketched out with co-ordinates. It’s so much more powerful than “normal” stacks, so (so far, for me at least) isn’t as easy to fiddle with options/settings to see what happens.

The videos are brilliant for my way of learning, and the documentation is a great reference.

Unless I have a very specific design/layout to work to, I tend to not do much planning. I find I get better results by throwing stuff at the page then playing around with it. I start with a rough idea, and hopefully end up with a “design”.

This is a handy view in Chome Inspect…

I set this project up to be 12x12, but now after shuffling everything around I can see that I’m only using about eight rows (some of the item blocks you can’t see with that overlay). So I think that means I can reduce it to 12x8 without upsetting the proportions. I think.

A view like that in edit mode would be really handy, not sure if it’s poss, really need to spend some time with the docs.

EDIT: Ya, changed some of the block colours and can now clearly see I’m only using ten rows.

Edit Edit: Actually, on mobile, i can see I am using all twelve. I guess really I should know that already, given it’s just simple maths!

And it’s just occured to me you can specify the rows per breakpoint, so now I can set them precisely based on what I’m using. So the content underneath is always going to be in the right place.

This is pretty neat.

This is that really simple project, published. Untitled Page

1 Like

It’s an awesome stack. The possibilities are endless! :+1:

1 Like

I reminds me that some time ago the only way to do a specific layout was to use the tag table :face_with_monocle:

This was 99% of all my issues I had in the past either with CSS Grid or the Flux stack: I didn’t get the rows right :see_no_evil:
Especially when trying to have different layouts for mobile and desktop.

I am thinking about buying the flux stack. I want to use it to create a nice web calendar for a customer’s scheduled performances. I need to be able to make seven columns for the days of the week. Can it create seven columns so I can do that?

Yes, you can easily make 7 columns with Flux.