Lumos
  • Consistency at Scale
  • Docs
    • Breakpointless
    • Class Naming
    • Page Structure
    • Typography
    • Color
    • Grid
    • Flexbox
    • Sizes & Spacing
    • Fluid Responsiveness
    • Components
    • FAQs
  • Resources
    • Cloneable
    • Figma File
    • Component Library
    • Chrome Extension
    • Changelog
    • Showcase
Powered by GitBook
On this page
  • Most Webflow Layouts Are Broken
  • Benefits of Building Without Breakpoints
  • Techniques For Breakpointless Builds
  • 1. Enable wrapping for any horizontal flexboxes
  • 2. Use autofit and autofill grids
  • 3. Use flex basis (example)
  • 4. Use accessible fluid typography
  • 5. Avoid all px units
  • 6. Use container queries when needed
  • Using GSAP With Container Queries

Was this helpful?

  1. Docs

Breakpointless

PreviousConsistency at ScaleNextClass Naming

Last updated 11 days ago

Was this helpful?

Most Webflow Layouts Are Broken

  • When a user doubles their preferred font size, no text should overflow.

  • Because Webflow breakpoints are set with PX, the layout doesn't wrap when a user increases their preferred font size and text overflows.

Benefits of Building Without Breakpoints

  • Improves accessibility by allowing layouts to wrap when users increase their font size

  • Creates less code than manually defining styles on each breakpoint

  • Allows for faster development since styles are automatically responsive

  • Makes future design changes easier, since updates only have to be made in one place

Techniques For Breakpointless Builds

Apply no styles to the tablet, mobile landscape, or mobile portrait breakpoints. Do this instead.

1. Enable wrapping for any horizontal flexboxes

  • This lets the browser decide when the layout should wrap.

  • If new links are added later, if the user translates the site into a longer language, or if the user increases their preferred font size, the layout will still wrap before we run out of space.

  • Automatically responsive: The number of columns adjusts based on the available space and the minimum column size we define.

  • If the content or font sizes change later, we can update our minimum column size from one place instead of needing to update each breakpoint manually.

Step 1: Enable wrapping on a flex parent

Step 2: Apply grow 1, shrink 1, and a width to the first child

Element will remain 6rem wide until the layout wraps. Once the layout wraps, element will become full width.

Step 3: Apply grow 500, shrink 1, and a width to the second child

Second child will fill all remaining space. Layout will wrap before second child gets smaller than 13rem.

4. Use accessible fluid typography

  • Breakpoint font sizes overflow when users double their font size because the changes designed for smaller screens aren’t triggered.

  • Fluid sizes create a smoother zoom experience, adapt better across screen sizes, and are easier to maintain within a type scale.

5. Avoid all px units

  • PX scales with browser zoom but not with user font size, similar to VW which ignores both.

  • Using PX for borders, radius, and shadows makes them feel smaller and off-scale when users increase their font size.

  • PX padding can overflow when inside a REM-based container.

6. Use container queries when needed

  • Give the container or any parent a custom property of container-type: inline-size;

  • Add custom css to affect the container’s children when the container is larger or smaller than a set size.

Using GSAP With Container Queries

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/flowtricks/script@v1.0.4/match-container.js"></script>
<script>
document.querySelectorAll(".hero_section").forEach(function (section) {
  const heading = section.querySelector(".hero_heading");
  heading.observeContainer("(width < 40em)", (match) => {
    if (match) {
      gsap.to(heading, { color: "red" });
    } else {
      gsap.to(heading, { color: "green" });
    }
  });
});
</script>

2. Use grids

3. Use flex basis ()

example
autofit and autofill