Long time no see.
Interested to know what custom CSS you use in the Webflow designer.
I used to use text-stroke a lot until it was added to the style panel recently, what’s some custom CSS you use a lot of?
Hey Mark, good to see you again.
There are a few I use frequently, because I haven’t found equivalent settings in Webflow. Over the past 5 years a bunch of them have ended up as part of the Sygnal Attributes github repo to make them more easily accessible, but I’d much prefer them in the designer someday.
LINE-CLAMP
CSS line clamping, so that brief text descriptions in a tile layout won’t blow out the container when a client makes it too long. The CMS max length restriction feature on fields helps, but doesn’t prevent e.g. a 4th line.
COLUMN-BREAK-INSIDE
When you want a cheap CSS masonry layout, and you use Webflow’s columns feature to do this, the individual items will break across columns by default. I add column-break-inside: avoid as custom CSS to override this behavior.
GRID-COLUMN
Sometimes in a CMS grid layout, you need specific CMS items to span 2 cols or 2 rows to make them stand out. Featured blog posts, sale products, sponsored posts, etc.
Grid doesn’t currently support a way to CMS-bind grid-column settings at the item level, but I’m also not sure how this could be exposed as a designer feature. The rules would get complex ( if featured then… )
CSS-CALC
For unusual layouts, particularly when I need to mix units like 100vh - 4rem.
:HAS and :NTH-CHILD
I use these a lot for things like conditional display of collection-list-containing sections ( when the list is empty ).
Or controlling item counts in a collection list to enforce even multiples, or to change the number of items shown in a collection list by breakpoint;
ASPECT-RATIO
Occasionally needed to maximize layout consistency in some elements;
MEDIA ( BREAKPOINTS )
There are always edge situations where the Webflow hardcoded breakpoints don’t quite work for a specific use case. Tablet and Portrait displays are widening on newer devices, etc.
Ideally, we’d be able to just set our own breakpoints have a default set of breakpoints provided on a new project, which can be changed.
I also sometimes need to do special things depending on device orientation.
Interesting to look at the list written down, 90% of this CSS relates to layout control. Our clients seem to love the styling, interactions, etc. but they want specific things in specific places, lining up precisely in specific ways.
I’m sure there are others, I’ll think more.
1 Like