CSS snippets
Text clarity
Modifies default browser rendering method for better text clarity.
Text looks better on the page with this snippet.
Focus state for keyboard interaction
Creates a unified "selected effect" for all focusable elements in the build at once.
It uses a tabindex attribute to target all focusable elements.
Webflow allows us to style focus-visible state (called "Focused (keyboard)" in the states dropdown) for any element separately. Use it if you want to override the default style we created with the snippet.
Rich Text top margin removal
Removes top margin from the first element in Rich Text.
For example, we want our H2 to have margin-top: 4rem. This is the top margin we want throughout the entire Rich Text element. However, we do not want this margin-top for the first element of the Rich Text. The 4rem of margin creates an unwanted space between the top of the Rich Text element and the first H2 text.
The "not" declaration is a special failsafe for our Table of Content Attribute solution.
Rich Text bottom margin removal
Removes bottom margin for the last element in Rich Text.
For example, we want our Paragraph to have margin-bottom: 0.5rem. This is the bottom margin we want throughout the entire Rich Text element. However, we do not want this margin-bottom for the last element of the Rich Text. The 0.5rem of margin creates an unwanted space between the bottom of the Rich Text element and the final Paragraph text.
Pointer events
Defines whether or not an element could be interacted with in any way.
Sometimes we don't want a certain element to interfere with our mouse hover, cursor movement, or click. We use the pointer-events: none for these cases. This CSS property and value will prevent all user interaction with an element.
For example, we can apply the pointer-events-none class to layered background graphics. The graphics may interfere with a clickable call to action button that goes behind the graphics for visual design reasons.
In some cases, we want only one specific child from a non-clickable parent to be clickable or hoverable. We use pointer-events: auto for these cases. The pointer-events-auto class enables events on this particular element.
Check out an example of using the pointer-events property to create a custom cursor.
Container centerizer
Forces horizontal centering of all container- classes.
We always want to maintain margin-left and margin-right set to auto. If we, another developer, or our client make an accidental margin change, the auto value will remain through !important tags.
Inherited styles for various Webflow elements
Removes some hardcoded styles and sizes from default Webflow elements.
By default, this style is "turned off" (commented out) in the Client-First cloneable. You must manually turn it on if you wish to use it.
This snippet makes styling for some Webflow elements easier. Instead of manually overriding hardcoded styles, we can inherit the styles from the parent.
For example, Webflow form inputs never follow the body font-size. This is because form inputs are hardcoded to be 14px. We must apply a class to the input and declare a font-size. With this snippet, the form inputs do not use 14px and instead inherit the body font-size.
Why is this snippet disabled by default? We consider this an advanced option because it can lead to unexpected behavior. For example, we won't be able to select "All links" and change their color. The "All links" style update won't change anything because we are no longer working with hardcoded values set to these elements. We override this option by using inherit.
Add inline flex
Add inline-flex as a CSS property available in Webflow Designer. This CSS property is not available natively inside Webflow.
An element with inline-flex behaves as inline itself while ensuring its children can still be aligned like any other flex children.
For example, when we apply flex to a CTA button, it stretches to 100% full width. If we use inline-flex on the button, the button maintains the correct width through inline behavior and the children of the button take advantage of flex controls.
!important declarations
Prevents CSS specificity issues for our display, padding, and margin utility classes.
This snippet ensures our utility classes always have their CSS properties as we intended. The !important tags force the utility classes to maintain their global style controls.
Squareify
CSS magic adds a class of div-square into our build. This class always makes a square, no matter what width you give it.
Please note: To put children elements inside a div-square, you have to add an absolute positioned div with position set to full. Put the children elements inside of this absolute positioned div.