If you look at the grid you will notice that the repeating pattern is column+gutter pairs. We want the overlay to work with a fluid layout, so we give the element a width off `100% – (2 * offset)` and also a max-width so the grid overlay doesn’t grow wider than our layout. Let’s use a pseudo-element on the element to display the grid on top of all of our content. Baseline: The vertical rhythm used for text.Offset: The space between the sides of the viewport.Columns: The vertical divisions of the page.Working as a front end designer I want all developers and designers to speak the same language (as much as possible) so I’ve chosen a terminology for the CSS variables that digital designers are also familiar with: My hope is that this can be a tool to aid layout-related conversations on our teams and make sure we don’t use too many bespoke widths, paddings etc. Some of my fellow designers didn’t fully understand the responsiveness and fluidity of it, so I created a toggleable grid overlay to help them visualize it. PrefaceĪ couple of weeks ago, at work, I simplified the media queries on one of our projects and added a layout component based on the same principles as Flexbox Grid. While it’s impossible to preprocess custom properties to behave exactly the same as native support, if you use them just like you would preprocessor variables, tools like the postCSS plugin cssnext can transform them into CSS compliant with older browsers. So, let’s not worry too much about browser support (If you do care, check out caniuse… data on custom properties).
This grid overlay that we’re building will consider a developer tool, as in, a tool just for us, not really our users. If you aren’t familiar with custom properties, I’d highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou’s enlighting talk on using them. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as “CSS custom properties”). Let’s take a look at what it takes to build a grid overlay with CSS.
0 kommentar(er)
