CSS snippets
Text clarity
Modifies default browser rendering method for better text clarity.
<style>
/* Make text look crisper and more legible in all browsers */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
</style>
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.
<style>
/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
input[type="file"]:focus-visible {
outline: 0.125rem solid var(--base-color-system--focus-state);
outline-offset: 0.125rem;
}
</style>
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.
<style>
/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
margin-top: 0 !important;
}
</style>
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.
<style>
/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
margin-bottom: 0;
}
</style>
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.
Container centerizer
Forces horizontal centering of all container- classes.
<style>
/* Make sure containers never lose their center alignment */
.container-medium,
.container-small,
.container-large {
margin-right: auto !important;
margin-left: auto !important;
}
</style>
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.
<style>
/* These classes are never overwritten */
.hide {
display: none !important;
}
@media screen and (max-width: 991px) {
.hide, .hide-tablet {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.hide-mobile-landscape{
display: none !important;
}
}
@media screen and (max-width: 479px) {
.hide-mobile{
display: none !important;
}
}
.margin-0 {
margin: 0rem !important;
}
.padding-0 {
padding: 0rem !important;
}
.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}
.margin-top {
margin-right: 0rem !important;
margin-bottom: 0rem !important;
margin-left: 0rem !important;
}
.padding-top {
padding-right: 0rem !important;
padding-bottom: 0rem !important;
padding-left: 0rem !important;
}
.margin-right {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
margin-left: 0rem !important;
}
.padding-right {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
padding-left: 0rem !important;
}
.margin-bottom {
margin-top: 0rem !important;
margin-right: 0rem !important;
margin-left: 0rem !important;
}
.padding-bottom {
padding-top: 0rem !important;
padding-right: 0rem !important;
padding-left: 0rem !important;
}
.margin-left {
margin-top: 0rem !important;
margin-right: 0rem !important;
margin-bottom: 0rem !important;
}
.padding-left {
padding-top: 0rem !important;
padding-right: 0rem !important;
padding-bottom: 0rem !important;
}
.margin-horizontal {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
.padding-horizontal {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
}
.margin-vertical {
margin-right: 0rem !important;
margin-left: 0rem !important;
}
.padding-vertical {
padding-right: 0rem !important;
padding-left: 0rem !important;
}
</style>
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.
Inherit color from parent element
Client-First includes a inherit-color utility class to override the style and inherit from the parent element.
<style>
/* Set color style to inherit */
.inherit-color * {
color: inherit;
}
</style>
!important declarations
Prevents CSS specificity issues for our display, padding, and margin utility classes.
<style>
/* These classes are never overwritten */
.hide {
display: none !important;
}
@media screen and (max-width: 991px) {
.hide {
display: none !important;
}
.hide-tablet {
display: none !important;
}
}
@media screen and (max-width: 767px) {
.hide {
display: none !important;
}
.hide-tablet {
display: none !important;
}
.hide-mobile-landscape {
display: none !important;
}
}
@media screen and (max-width: 479px) {
.hide {
display: none !important;
}
.hide-tablet {
display: none !important;
}
.hide-mobile-landscape {
display: none !important;
}
.hide-mobile {
display: none !important;
}
}
.margin-0 {
margin: 0rem !important;
}
.padding-0 {
padding: 0rem !important;
}
.margin-top {
margin-right: 0rem !important;
margin-bottom: 0rem !important;
margin-left: 0rem !important;
}
.padding-top {
padding-right: 0rem !important;
padding-bottom: 0rem !important;
padding-left: 0rem !important;
}
.margin-right {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
margin-left: 0rem !important;
}
.padding-right {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
padding-left: 0rem !important;
}
.margin-bottom {
margin-top: 0rem !important;
margin-right: 0rem !important;
margin-left: 0rem !important;
}
.padding-bottom {
padding-top: 0rem !important;
padding-right: 0rem !important;
padding-left: 0rem !important;
}
.margin-left {
margin-top: 0rem !important;
margin-right: 0rem !important;
margin-bottom: 0rem !important;
}
.padding-left {
padding-top: 0rem !important;
padding-right: 0rem !important;
padding-bottom: 0rem !important;
}
.margin-horizontal {
margin-top: 0rem !important;
margin-bottom: 0rem !important;
}
.padding-horizontal {
padding-top: 0rem !important;
padding-bottom: 0rem !important;
}
.margin-vertical {
margin-right: 0rem !important;
margin-left: 0rem !important;
}
.padding-vertical {
padding-right: 0rem !important;
padding-left: 0rem !important;
}
</style>
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.
