Global Styles embed

Explanation of each CSS snippet in the Global Styles embed of the Client-First cloneable.

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 #4d65ff;
    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.

Pointer events

Defines whether or not an element could be interacted with in any way.

<style>
  /* Prevent all click and hover interaction with an element */
  .pointer-events-off {
    pointer-events: none;
  }

  /* Enables all click and hover interaction with an element */
  .pointer-events-on {
    pointer-events: auto;
  }
</style>

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.

<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), 
  @media screen and (max-width: 767px), 
  @media screen and (max-width: 479px){
    .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;
  }
  .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.

Add inline flex

Add inline-flex as a CSS property available in Webflow Designer. This CSS property is not available natively inside Webflow.

<style>
  /* Adds inline flex display */
  .inline-flex {
    display: inline-flex;
  }
</style>

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.

<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.

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.

<style>
  /* Create a class of .div-square which maintains a 1:1 dimension of a div. */
  .div-square::after {
    content: '';
    display: block;
    padding-bottom: 100%;
  }
</style>

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.