Starting Off: Container Changes

Prior to GenerateBlocks 1.7, adding a container element actually added both a container and a hidden inner container. This made styling a little harder as you actually were fighting two containers at once, and added an extra a to every container across your site. 

While a single extra div is not going to break your site, using GP+GB is all about efficiency and performance so halving the number of divs output on your page is a welcome change. 

In addition to that, creating a container is now automatically full width. When you add another container inside, which you can do with a single click, you get an inner container that has a new “Use Global Max Width” toggle enabled and it sets that inner container’s width to margin left and right auto, automatically centering it. 

Sizing Controls

There’s a new section in our right hand styling controls area called “Sizing.”

This section gives us some super handy and long awaited controls such as minimum height and maximum width, two controls I use super often. These sizing controls can be found on nearly all GenerateBlocks elements like containers and headings. 

Min height is really handy for a hero section that you want to set as something like 50vh without fibbing it with padding and margin. Now, that’s built right in. 

Min height is also super handy when building card layouts. You can set min-height on your background image to make sure they’re all the same size, no matter what size the uploaded image was. 

Max-width is fantastic when you want to easily limit an element to a specific width. 

I often use this with heading elements where I want a big hero headline to be only a portion of the width across the page, instead of extending to the bounds of the container. I don’t have to use a grid anymore to restrict my elements’ width. 

I also use this very often on contact forms as I almost never want them to be full width or even container width on desktop sizes. Instead, I’d want it to be something like 540px or maybe 768px wide at most. I can just pop the max-width parameter on and it’s done. 

You might have noticed I can type in the unit I want as I type the unit value. 

For instance, if I want 100%, I don’t have to type 100 and then click the unit selector. I certainly can, but all I need to do is type 100% and it selects the unit for me. Super handy! 

Lastly, a feature that currently is not immediately apparent but that works is margin-auto. This super handy feature lets you position an element just typing auto into the margin left or right field. We can center our gravity form by just using margin left and right au to.

In this pre-alpha version, it doesn’t center some elements in the backend but it works properly on the front-end. #alphaquirks 

Flex Controls Overview

The flexbox layout options now present in 1.7 give you unparalleled control over the layouts on your site, and mean you don’t have to nest grids inside of grids to achieve the layout you want. 

Flex has a ton of controls, so I’m going to build an example layout and show you how I use the flex controls to achieve an interesting layout super easily. 

Generate Made Easy

If you’re an owner of my Generate Made Easy course, I’ll be building an entirely new home page using the flex controls once the alpha is released. If you’re not a member yet, click the link down below to be taken to the course page on my website. 

Here we are with a container selected, and I’ve gone ahead and minimized the new Spacing section in my right hand side bar. So you can see the updated Layout section.

Now, your first decision is what display type you want. The default doesn’t do anything, so we’re gonna go and switch this to Flex. 

There are numerous other options in the dropdown, but we’ll focus just on Flex for this video. Nearly every layout you’d want to build can and should be done with Flex.

Next up, we want to go ahead and add   a few containers inside our parent container so our flex controls do something. 

In this case, we’re going to add 2 contain ers directly inside the first. I want to set each one of these to be 50% width. 

Then, in the right container, we’ll add 3 more containers inside that one. 

I’m going to go ahead and give these 3 containers a background color so we can see what will happen to them as we adjust more and more of our flex properties. 

Flex Direction

Next up, we need to choose how we want our parent container to behave. We need to set its flex direction and our choices are column or row. Let’s go ahead and select Row for now. 

We now have the display: flex and flex-direction: row CSS properties set on our element. This is handy to know what’s actually taking place under the hood when you make these choices. 

Align Items

Align items is the way you want to center the content in a given container based on your flex-direction choice. Your options are start, center, end, stretch, and baseline and these will adjust the orientation based on your selecti on of flex-direction column or row. The graphic representation of the choices makes it super easy to follow. 

Justify Content

Justify content controls the distribution of spacing between and around the items inside a given container. To better demonstrate it in this exa mple, I’ve gone ahead and reduced our two columns to 35% wide down from the 50% we set earlier. 

This setting allows you to push all the children inside a container to one edge, give even space between them, or apply even spacing on all sides, all entirely automatically with one click.  

Flex Wrap

Flex wrap is an extremely useful parameter, especially when you’re working with flex-direction of columns and your container widths in a given row total over 100%. This allows the containers to break out into new lines.

This is exactly how the Grid element in GenerateBlocks functions and is super useful when you want to allow for elements to overflow to a new line. 

Gap

For me, the most painful missing feature from GenerateBlocks was Gap so I’m thrilled to see this. Gap automatically adds gutters between rows and columns, so you don’t have to worry about margin or padding. 

This makes rearranging content with variable spacing a breeze. There’s nothing to adjust after you rearrange your content, it’s still spaced properly.

Now, you can define exactly the gap you want in both the horizontal and vertical axis easily. Gap is so great and you’ll wonder how you lived without it. 

Putting It All Together

As you can see, flex gives a whole slew of features and power to your layouts now. It will take you some time to fully wrap your head around it, but that’s ok. 

Just try recreating layouts you see online. This is one of those cases where there is no better way to learn than by getting that first hand experience and muscle memory down pat.

Eventually you’ll get to the point where you can just see the flexbox structure required to make up a given page without even trying. 

Closing

Let me know what you think of flex! Are you excited? Worried it’ll be too complicated? Drop a comment below. I’ll also be covering this far more in depth inside my Generate Made Easy course.