Units can be one of the toughest aspects of web development to understand. They’re a little bit like forks in that one is often as good as another. A salad can usually be eaten with a dessert fork without much trouble, and vice versa. But when you encounter an oyster, it starts to make more sense why there are different options.
Grids can sometimes be difficult to detect with the naked eye, but always have a dramatic impact on the perceived quality and readability of a design. Just a few inconsistencies can cascade across a site with dramatic consequences. But a few simple guidelines can help to keep the alignment of a project in working order.
As a general rule, percentage units are best for positioning an element on the grid and pixel units are best for positioning an element relative to the grid. Since the grid is fluid, we need fluid units to position an element on the grid. And since gutters are fixed widths, we need pixel units to create gutters & to position elements relative to those gutters. Many positionings, therefore, might require two or more declarations in order to behave responsively and also stay on grid.
Step 1: Use 50% percentages to center the position of the element within the parent element.
Step 2: Use 20px padding to add a gutter.
Step 3: Use transform to vertically center the element against the position point.
In this example, no matter the width of the browser or size of the circle, it’s always going to be centered vertically and 10 pixels away of the horizontal center of the page.
More and more often, it's necessary to create responsive gutters. For instance, a design that stretches the full width of the browser might need left and right gutters that are 1/12th of the full width, or 8.33%. However, padding is relative to the width of the div, so that same amount of padding would be 16.66% if the page were split into two columns.
Worse yet, if a page is split into an 8-column main content column and a 4-column sidebar, equal 1-column gutters would require 12.5%, 6.25%, 12.5% and 25% padding from left to right.
VW (viewport width) units can standardize this considerably, creating a single reference point for all padding measurements and allowing for more modularity across divs that span different numbers of columns.
Tip: Viewport Width doesn't subtract the scrollbar from the viewport, so 100vw is going to create a 20px horizontal scrollbar. Consequently, it's best to define columns using percentage units and then use VW units for padding. The VW measurements will be off 1.67px per column, but if all padding is applied consistently, this will be undetectable.
When declaring type styles, it’s best to use units of measurement that are relative to the type size because it makes updating the styles easier. For instance, the default font style is 14px font size and 20px line height. If the font size is bumped up to 18px, the line height will also need to be adjusted to 26px in order to maintain a relative visual appearance. However, if the line height is declared as 1.43em or 143% (both, in this case, are values relative to the font's size), the line height doesn’t need to be readjusted each time the font size changes. This also allows the team to maintain a set number of ratios for line height (133%, 150%, 166%, etc.). With rounded off pixel calculations, the actual ratio remains abstract, and even if thoughtfully maintained, inconsistencies are bound to find their way into the design system. Units that are relative takes care of all of the math.
Similarly, em units will retain the relative sizing of both letter spacing and text margins, should the font size change.
Known Issue: Webflow is sometimes buggy when it comes to inheriting line height for text blocks. The Style Panel may display that it’s inheriting the line height of 150% from the Body (All Pages) element, but it’s actually displaying 150% of the Body (All Pages) font size. For a text box to employ a line height relative to its own font size, that needs to be declared.
Webflow's built-in grid functionality is super helpful... if you're working on a 960 pixel-wide design. But what if you're building on literally any other width?
We've begun applying a 12-column grid PNG to the Body element to check our grid alignment. We have a dark grid to sit over light background colors, and a light grid to sit over dark background colors. And if we center and vertically tile the image, we can either have it stretch full width or we can declare specific widths for different situations (1440px, 1200px, 960px, etc.).
Below is a link to the two images and the styles we apply.
background-size: 100%; /* Customizable */
background-position: 50% 0%;
And here you thought you'd graduated. When it comes to authoring classes, thinking of the different class types as chemical elements can be a helpful visual tool. (We'll explain...)Take me there