Client-First

https://finsweet.com/client-first/docs
Admin
Client-First is a comprehensive methodology and framework, primarily for Webflow development,...
Tokens:26,157
Snippets:437
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Using aria-labelledby to Reference Explanatory Content

Source: https://finsweet.com/client-first/docs/accessibility

Employ aria-labelledby to associate an element with another element that provides descriptive context, improving understanding for screen readers.

```html
<button aria-labelledby="button-id">Click Me</button>
<span id="button-id" style="display: none;">This button performs a specific action.</span>
```

--------------------------------

### Single Folder Class Name

Source: https://finsweet.com/client-first/docs/folders

A single underscore in a class name creates a top-level folder. Use this for organizing related elements within a specific section or component.

```html
_home-testimonials_wrapper_
_home-testimonials_headshot_
_home-testimonials_text-small_
_header-top_content_
_header-top_image_
_header-top_accent-left_
_careers_custom-padding_
_careers_title-animation_
_careers_scroll-trigger_
```

--------------------------------

### Nested Folder Class Name

Source: https://finsweet.com/client-first/docs/folders

Two underscores in a class name create a nested folder structure. This allows for deeper organization, useful for complex projects with many related components.

```html
_home_testimonials_wrapper_
_home_testimonials_headshot_
_home_testimonials_text-small_
_home_header-top_content_
_home_header-top_image_
_home_header-top_accent-left_
_home_careers_custom-padding_
_home_careers_title-animation_
_home_careers_scroll-trigger_
```

--------------------------------

### Using aria-describedby for Deeper Context

Source: https://finsweet.com/client-first/docs/accessibility

Utilize aria-describedby to link an element to another element containing supplementary information, allowing screen readers to provide deeper context.

```html
<input type="text" aria-describedby="description-paragraph">
<p id="description-paragraph">This is a detailed description of the input field's purpose.</p>
```

--------------------------------

### Unified Focus State for Keyboard Interaction

Source: https://finsweet.com/client-first/docs/global-styles-embed

Establishes a consistent focus outline style for all focusable elements when navigated via keyboard. Uses the :focus-visible pseudo-class for modern browser support.

```css
<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>
```

--------------------------------

### Calculate rem in Webflow Designer

Source: https://finsweet.com/client-first/docs/sizes-and-rem

Demonstrates how to calculate rem values directly within Webflow Designer's input fields by dividing a pixel value by 16.

```text
100/16rem
```

--------------------------------

### Improve Text Clarity with CSS

Source: https://finsweet.com/client-first/docs/global-styles-embed

Applies font smoothing and text rendering optimizations to enhance text legibility across all browsers.

```css
<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>
```

--------------------------------

### Fluid Responsive CSS Generator

Source: https://finsweet.com/client-first/docs/fluid-responsive

This CSS code configures fluid responsive scaling for your Webflow project by adjusting the HTML root font size across different breakpoints. It uses `calc()` and `vw` units to achieve smooth scaling.

```css
<style>
  html { font-size: calc(0.625rem + 0.41666666666666663vw); }
  @media screen and (max-width:1920px) { html { font-size: calc(0.625rem + 0.41666666666666674vw); } }
  @media screen and (max-width:1440px) { html { font-size: calc(0.8126951092611863rem + 0.20811654526534862vw); } }
  @media screen and (max-width:479px) { html { font-size: calc(0.7494769874476988rem + 0.8368200836820083vw); } }
</style>
```

--------------------------------

### Visually Hide Elements for Screen Readers

Source: https://finsweet.com/client-first/docs/accessibility

Use this CSS class to visually hide elements while keeping them accessible to screen readers and search engine bots. This technique is useful for decorative elements that still need to convey meaning to assistive technologies.

```css
.fs-a11y_visually-hidden {
position: absolute;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(0px 0px 99.9% 99.9%);
overflow: hidden;
height: 1px;
width: 1px;
padding: 0;
border: 0;
}
```

--------------------------------

### Using aria-controls for Cause and Effect

Source: https://finsweet.com/client-first/docs/accessibility

Implement aria-controls to establish a relationship between an element and the other elements it controls, such as a button controlling a modal.

```html
<button aria-controls="modal">Open Modal</button>
<div id="modal" style="display: none;">Modal Content</div>
```

--------------------------------

### Center Align Container Classes

Source: https://finsweet.com/client-first/docs/global-styles-embed

Forces horizontal centering for elements with 'container-medium', 'container-small', or 'container-large' classes by setting left and right margins to auto. Uses !important to maintain alignment.

```css
<style>
  /* Make sure containers never lose their center alignment */
  .container-medium,
  .container-small,
  .container-large {
    margin-right: auto !important;
    margin-left: auto !important;
  }
</style>
```

--------------------------------

### Identifying Current Item with aria-current

Source: https://finsweet.com/client-first/docs/accessibility

Apply aria-current to identify the current item within a set, using values like 'page', 'location', 'date', or 'step' to provide context for screen readers.

```html
<a href="/about" aria-current="page">About Us</a>
```

```html
<nav aria-label="Breadcrumbs">
  <a href="/">Home</a> &gt;
  <a href="/products" aria-current="location">Products</a>
</nav>
```

```html
<div role="gridcell" aria-current="date">2023-10-27</div>
```

```html
<li role="step" aria-current="step">Step 1</li>
<li role="step">Step 2</li>
```

--------------------------------

### Using aria-label for Element Announcement

Source: https://finsweet.com/client-first/docs/accessibility

Use aria-label to provide a descriptive label for an element when its content is insufficient or absent, enhancing screen reader announcements.

```html
<a href="https://www.webflow.com" aria-label="Go to the Webflow homepage">Go to Webflow!</a>
```

--------------------------------

### Global Utility Styles with !important

Source: https://finsweet.com/client-first/docs/global-styles-embed

These CSS classes use !important to ensure they are never overridden by other styles. They control display, padding, and margin properties across various media query breakpoints.

```css
<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>
```
Tokens:
Raw