On July 12th, we released (in beta) Duda Flex, a brand new editor experience for our web pros. This article will cover Duda Flex, how it differs from the previous editor experience and one of the underlying technologies that power Duda Flex.
Are you ready to dive deep? Let's go!
Duda Flex is our newest editor experience for web pros to design pixel-perfect websites faster than ever. At its core, Duda Flex empowers web pros to take full advantage of the latest CSS developments, making it significantly easier to express position and layout.
Let's take a quick tour of the new editor experience:
The Layers panel provides a convenient hierarchy of all the grids and child elements within the current Flex section. Each item listed in the Layers panel has inline options: "hide" and/or "add widget". Grids, Flexboxes, and Containers have the "hide" and "add widget" options, while all other elements only have the "hide" option.
Fun fact 💡: Duda will structure the underlying HTML markup based on the hierarchy defined in the Layers panel.
The Grid Design panel contains all of the settings for the selected Grid container. Here, we can update the number of rows and columns, the gap size, and the height of a Grid.
If you're familiar with CSS Grid, we're exposing
grid-template-columns
,
grid-template-rows
, and
gap
in the editor. If you're not familiar with CSS Grid, don't worry, we'll go over those properties shortly.
The Flex Editor resembles many popular design tools, such as Figma, with various capabilities such as pixel-by-pixel placement, helpful spacing recommendations and "rulers", and much more.
Some more technical readers may ask themselves: "what's going on under the hood to enable this new editor experience?". Well, you're in luck; the rest of the article will go over a core technology that enables the Duda Flex experience — CSS Grid.
One of the foundational technologies at the center of Duda Flex is CSS Grid. CSS Grid extends Flexbox concepts and enables developers to express their layouts in two dimensions (rows and columns) instead of the single dimension Flexbox provides (rows or columns). Thus, allowing developers to specify the exact position of an element based on its parent grid container.
Let's take a look at an example where we want to structure several header elements in the following fashion:
| header-1 | header-2 | header-3 |
|---|---|---|
| header-4 | header-4 | header-5 |
First, we'll set up our HTML document with a container div and five h1 elements with classes based on where we want them to appear in the grid.
See the Pen Duda Flex: CSS Grid by Everett Morgan ( @everett-duda ) on CodePen.
Next, we'll use the below CSS to express the structure of the grid system and its child elements. Although you may not be familiar with some of the new properties introduced with CSS Grid, don't worry, we'll cover them in a moment.
See the Pen Duda Flex: CSS Grid (CSS) by Everett Morgan ( @everett-duda ) on CodePen.
Now, let's check how that looks in the browser:
See the Pen Duda Flex: CSS Grid (CSS) by Everett Morgan ( @everett-duda ) on CodePen.
As we can see, our elements are exactly how we envisioned them. It's that easy with CSS Grid in our toolbox!
Next, let's go over some terms to help you get familiar with the grid system. A grid system is comprised of different concepts: lines, tracks, cells, areas, and gutters.
There are two types of lines: column lines and row lines. Think of them as the lines between each column and row in a table.
A track is the space between two adjacent grid lines. So, for example, if we have a 3x3 grid, we can extract the leftmost column track (1, 4, 7) or the topmost row track (1, 2, 3).
A cell is the smallest area within a single column and row. Think of the cells within an Excel table; they're the same.
An area is a four-sided collection of two or more cells within a grid system. So, for example, we can lay out an element across four cells: 1, 2, 4, 5.
Note 💡: the image on the right depicts an invalid area.
A gutter is the space between rows and columns in the grid. By default, grids do not have gutters set up and require the developer to explicitly define the gutter, or gap, between rows and columns.
Note 💡: a gutter differs from the padding and margin of the grid element.
Now, let's dive into the new CSS properties that come with CSS Grid:
The below properties are specifically used to define the structure of a grid container.
CSS Grid adds a new value to the display property, grid, which specifies the target element as a grid container. That allows for the usage of grid-template-columns, grid-template-rows, and gap to express the grid's structure.
The grid-template-columns property defines the number of explicit columns in the grid and their respective sizes based on a CSS unit of measurement.
The grid-template-rows property is exactly like grid-template-columns except it defines the number of explicit rows.
The gap property defines the size of the space between columns and rows. Think of this as a "gutter" that sits between the columns and rows of a grid.
The below properties are specifically used to define the layout and positioning of child elements within a grid container.
The grid-column property is used on child elements of a grid container to specify which column, or columns, an element should cover.
The grid-row property is the same as grid-column, except it specifies which row, or rows, an element should cover.
The / "forward slash" is used with the grid-column and grid-row CSS properties to specify the area of an element using a starting and ending grid line.
The span keyword is used with the / "forward slash" and can span an element across the column or row after the specified grid line.
Now, with our newfound knowledge of CSS Grid, let's deconstruct the grid created in the above video.
As we can see from the Grid Design panel, the grid structure had 3 columns (
grid-template-columns: 3
), 2 rows (
grid-template-rows: 2
), and a 30px gap (
gap: 30px
).
At the start, we only have one child element within the main Grid, Max Powers. Then, we add Celine and Amy by duplicating Max and dragging them to their respective areas. After we dropped each element, Duda calculated the placement within the Grid based on its left side. Here's a table showing the CSS values used for
grid-column
and
grid-row
.
| grid-column | grid-column (lines) | grid-row | grid-row (lines) | |
|---|---|---|---|---|
| Max | 1 | 1 / 2 | 1 | 1 / 2 |
| Celine | 2 | 2 / 3 | 1 | 1 / 2 |
| Amy | 3 | 3 / 4 | 1 | 1 / 2 |
Note 💡: grid-column: 1 is the same as grid-column: 1 / 2 , same goes for grid-row.
Stay tuned for the next expert posts, diving into Flex's full design capabilities through practical walkthroughs and pro tips.
