Constructing CSS Layouts In A Design Software — Smashing Journal


Amongst design instruments, Penpot holds a particular place. It’s an open-source design device, meant for designers and builders to work collectively and assist them converse the identical language. It’s additionally the primary design device on the market to be absolutely open-source and based mostly on open net requirements.

That’s an ideal selection for designers and builders working carefully collectively as Penpot’s method might help to radically enhance design to improvement processes and effortlessly make them seamless and sooner.

As open-source software program, Penpot additionally evolves blazingly quick, fueled by the help of the group. After I was first writing about Penpot just a few months in the past, I shared my pleasure concerning the app’s format options that lastly deliver parity between design and code and comply with the identical guidelines as CSS does. Since then, the crew behind Penpot has made creating layouts even higher, in order that they deserve one other look. I actually loved taking part in with the brand new Penpot’s options, and I consider you would possibly need to give them a attempt too.

Designing Layouts Finished Proper

If you happen to ever wrote or learn CSS code, there are excessive probabilities you may have already stumbled upon Flexbox. It’s a cornerstone of constructing layouts for the trendy net, and fairly doubtless, each single web site you go to on an on a regular basis foundation makes use of it.

Flexbox is the bread and butter of making easy, versatile layouts. It’s the commonest means of positioning parts: stacking them in rows and columns and deciding how they’re speculated to be aligned and distributed.

Due to this fact, creating Flexbox layouts is an important a part of most net hand-off processes. And never not often time-consuming and inflicting friction between design and improvement. Normally, builders attempt to translate static mockups into code by rebuilding layouts made by designers from scratch. As most designers don’t write CSS code and most design instruments comply with a special logic than CSS does, heaps can go mistaken or get misplaced in translation.

That is the place Penpot’s Flex Structure comes into play. Layouts built-in Penpot don’t want tedious translating into code. Though designers can construct them utilizing a well-known visible interface, they arrive as production-ready code out-of-the-box. And even when they want tweaking, they’ll nonetheless save builders loads of time and guesswork as they comply with a logic that’s already acquainted and comprehensible to them.

So on the backside line, it advantages everybody. It’s much less work for builders as they get the code they want right away. It’s higher for designers as they’ve finer management over the ultimate impact and a greater understanding of the applied sciences they’re designing for. And at last, it’s good for enterprise because it saves everybody’s time.

All of that with out making the designer’s job an inch tougher or forcing them to jot down a single line of code. Now, let’s check out what constructing designs with Flex Structure appear to be in follow!

Getting Began With Flex Structure

As talked about earlier than, Flexbox could be understood as a toolkit for constructing format and positioning parts.

Every Flex Structure is usually an array, an inventory of parts. This listing could be sorted from left to jot down, proper to left, high to backside, or backside to high.

Elements can be sorted in any way

Flex Structure permits you to management how parts in these lists are aligned towards one another.

Elements aligned against each other

It’s also possible to management how parts are laid out inside containers.

Elements within containers

Flex layouts can wrap into a number of strains too. It’s also possible to nest them indefinitely to create as complicated layouts as you want.

Elements nested as complex layouts

And that’s just the start. There are various extra choices to discover. As you may see, Flex format offers you rather more potentialities and precision than most design instruments do. Creating with it isn’t solely a greater course of however a extra highly effective one.

To discover all of the potential options of Flex Structure, Penpot’s crew created a complete Playground template so that you can attempt. If you happen to don’t have a Penpot account but, go forward and create one now. Then, duplicate the file and attempt to play with it your self! The file will take you on a journey by way of each Flex format function, with clear examples and definitions, so you can begin constructing complicated, sturdy layouts very quickly.

Constructing An Instance Collectively

To present you a fair higher understanding of what working with Flex Structure is in follow, let’s have a look at a sensible instance. Within the subsequent few steps, we are going to dig into the construction of this little mockup and rebuild each a part of it with Flex Structure.

Mockup example

For the primary parts, we are able to use Flex Structure for our buttons. With just a few clicks, we are able to make certain they’re conscious of the dimensions of the icon and the label inside, and set paddings and distances between the youngsters parts.

We are able to additionally use Flex Structure for the avatars stack. To make the photographs overlap, a adverse hole between the weather does the trick. We even have full management over the order of parts. We are able to lay out the stack in any path. We are able to additionally management the stack order of every factor individually. That’s due to Penpot’s help for z-index, one other helpful CSS property.

Flex layouts could be nested, creating extra complicated layouts and dependencies. On this case, we’ll create a separate Flex Structure for the navbar and one other for the tiles grid under.

Do not forget that parts in Flex layouts could be wrapped? Let’s see this in motion. On this case, we are able to create a versatile multi-dimensional format of parts that’s conscious of the mother or father container and fill it with blocks each vertically and horizontally, simply as CSS would do.

However what if a few of the parts don’t belong to the grid? Alongside Flexbox, Penpot offers help for absolute positioning. Because of this any factor could be picked up from the Flex Structure to nonetheless depart in the identical container however ignore the format guidelines. That’s precisely what we’d like for the ‘Edit’ button.

Finally, we are able to remodel the entire board right into a Flex Structure. Now, we’ve got a design that isn’t solely straightforward to work with and edit however can also be absolutely versatile. Questioning how your design would carry out on a smaller or greater display screen? All it’s important to do is to resize the board.

Subsequent Steps

If you happen to’d like to try the supply file of the format we’ve simply constructed, go forward and duplicate this file.

To dig deeper and study extra about use Flex Structure, don’t neglect to attempt the Flex Structure template.

In case you get caught or have some questions, Penpot Group could be the most effective place to search for assist.

There’s additionally an amazing video tutorial that explains how designers and builders can work collectively utilizing Flex Structure.


As you may see, with Flex Structure, the chances for structuring your designs are countless. I consider that options like this are a welcome change within the design instruments scene and a shift in the appropriate path. Serving to designers to take extra management over their work and serving to builders to work as effectively as potential.

Coming Quickly: Assist For CSS Grid

Perhaps you’re now considering the identical as I’m: CSS layouts aren’t solely Flexbox, are they? If you happen to work with CSS, you in all probability know that Flexbox alone shouldn’t be sufficient. Extra complicated layouts are sometimes higher constructed utilizing CSS Grid. Flexbox and Grid work greatest when mixed collectively — mixed to create exact but complicated and absolutely responsive web sites.

Penpot doesn’t help CSS Grid simply but, however that’s about to vary! You’ll be able to study extra about it on the upcoming Penpot Fest. In the course of the occasion, Penpot’s crew will share their plan and a demo of the upcoming Grid Structure function. Don’t hesitate to hitch (nearly or in individual), for those who’d prefer to study extra concerning the subsequent steps for Penpot.

Smashing Editorial


Please enter your comment!
Please enter your name here