Streaming live at 10am (PST)

CSS Grids Exported Code


#1

I’ve been having a-lot of fun playing around with the grids and have just exported my first site which makes use of them over flex box, however looking into the code the grids have been assigned an ID with a computer generated name in a string of numbers, is there any way to rename this before exporting?

It feels messy and means when I’m bolting on my content management system of choice it makes things slightly confusing, not to mention making it near impossible to easily edit the nodes in the CSS without painstaking matching the names.

Also can someone clear up what these classes do? Am I correct in thinking they assign where content appears in a grid on smaller screen sizes?


#2

Howdy Qwen! Grid developer here – I’ll try to answer your (great!) questions in detail:

the grids have been assigned an ID with a computer generated name in a string of numbers

This allows you to drag items around on the grid independent of each other, even if they use the same classes or duplicate IDs; in order to do this we need each child of a Grid to have a unique ID. We use this unique ID to control grid-item CSS independent of the CSS that you apply with your classes.

We care about the quality of our generated code, and I personally agree that these IDs are long and arbitrary. We made a compromise here to ship Grid to our users sooner, but we have some ideas for how we can improve the exported code:

One way we may try to improve this would be to use a similar auto-naming technique we use for auto-generated class names: For example, if you’re adding a Button to a grid, it might get an ID like button-1, button-3, etc.

A second, simpler improvement: we could use a simple counter to provide more concise and human-readable names, such as item-1, item-3, item-42, etc.

What do you think about these ideas? Would this help?

is there any way to rename [grid item IDs] before exporting?

Unfortunately this isn’t feasible at the moment; we could harness existing user-supplied IDs, but since it’s possible for users to provide duplicate IDs we decided against it, as it would lead to hard-to-track bugs.

making it near impossible to easily edit the nodes in the CSS without painstaking matching the names

If you supply an ID for an element, it will use that ID and a w-node class in the CSS; this should help make it easier to find the appropriate CSS.

Thanks for your feedback; hope the explanation helps!

P.S. If you’re truly desperate to use more human-readable names, you could supply an ID manually for each grid item, then do a search-and-replace on the exported CSS to replace all #item-id.w-node-abcdef-1234 { ... } selectors with #item-id { ... }

Here’s a tool you can use to strip w-node classes from your CSS: https://regexr.com/43vgh
Here’s a tool to strip w-node classes from your HTML: https://regexr.com/43vgq

(:point_up:These could very well break your HTML/CSS, so use at your own risk!)

That said, I would recommend just keeping the generated names for now as you’re less likely to run into problems that way. Thanks!


#3

I do think either of the options you mentioned to provide more recognisable names would be handy with the added benefit of making the code look as slick as the rest of what Webflow produces.

I doubt I’m really going to be playing around with these nodes very much after export, my concern would come more when passing the code off to someone else who might have to dig a tiny bit to work out whats going on, but in the grand scheme of things its not really a massive issue or that time consuming to rename.

In terms of naming them, I’d suggest each item have gridname-item-#, I realise they’re already inside the grid in the html file, but they’ll probably be separated in the CSS.

Thanks for clearing things up for me @louroboros, I appreciate the detail you’ve gone into.