Yes Chef Studio

Code Snippets

Fun and functional code snippets that help you elevate your Webflow website.

View all
Category one
Category two
Category three
Category four

Add query parameter value to hidden field

Pass through dynamic url values to your forms so you can track things like sales reps, traffic source, etc....

Calculate sizes in CSS

CSS's calc() function allows you to perform calculations to determine CSS property values. It's incredibly useful for responsive design, such as when you need to adjust sizes dynamically. For example, if you want a div to be 100% of the viewport width minus a certain margin, you can use calc():

Balance text wrapping

‍‍Headings are crucial for grabbing attention and conveying key messages. However, unbalanced text lines can make headings less impactful. The text-wrap: balance; property helps distribute text more evenly across lines, reducing the occurrence of "widows" - a single word or short line at the end of a paragraph:

Custom Text Selection Colour

When users highlight text on your webpage, you have a unique opportunity to enhance the visual feedback with custom colors that match your brand. The ::selection pseudo-element allows you to style the background and text color of the selected text:

Fix side scrolling on all devices

The .page-wrapper is a common class used to wrap the entire content of a page. Sometimes, you might encounter elements that overflow the boundaries of your page, causing horizontal scrollbars or layout shifts. To address this, you can use the overflow: clip; property to prevent any content from overflowing the boundaries of the .page-wrapper:

Fade non-hovered links

A fun animation where hovering over links will fade out all the items except the hovered item.

Move elements at different breakpoints

A useful javascript snippet that lets you move elements to a new location at different breakpoints. Perfect if you can only have 1 instance of an element on the page but it needs to change position.

Pull content from another page

404 page need a collection list? Webflow told you it can't happen? We've got you covered. Use this code to pull in the nav or entire page design from another page into your 404.

Get class name from element

A nice little script that will return the first class applied to an element. It's part of our internal slider code, but has lots of uses when other js libraries are involved.