Skeletons

FAQ about using Skeletons, variables, responsiveness, and working inside the style guide.
What exactly are Skeletons?

Skeletons are high-quality wireframe building blocks built around Webflow Variables and Client-First naming. They give you a scalable, consistent, variable-driven foundation for building new websites extremely fast.

Skeletons aren’t just “blocks” – they are a full architectural approach to building clean, modern Webflow sites without bloated styles or random classes.

Who are Skeletons designed for?

For freelancers, agencies, studios, and anyone building many sites who wants:

  • predictable structure
  • global variables
  • zero CSS mess
  • fast production workflow

They are perfect if you want the flexibility of custom design without starting from scratch every time.

Why is the Skeletons Style Guide required?

Because Skeletons only work when your project contains the same variables and global structure.

The Style Guide includes all global tokens:

  • typography (H1–H6, body, labels)
  • spacing scales
  • colors
  • radiuses
  • icon sizes
  • max-widths & layout scales

When you paste a Skeleton section into a project that has the Style Guide installed, Webflow automatically maps:

  • heading sizes to your typography tokens
  • spacing (padding, gaps, margins) to your spacing variables
  • backgrounds and text colors to your color tokens
  • icons to your icon stroke + icon size system

Example:

If Skeleton uses --section-padding-medium or --text-size-h2, those instantly adapt to your customized variables.

This is what makes Skeletons feel magically “on brand” right after pasting.

Without the Style Guide, nothing will map correctly.

Where can I download the Skeletons Style Guide?

From our official Webflow cloneable:

webflow.com/made-in-webflow/website/byq-skeletons

It’s completely free.

Do Skeletons have documentation?

Yes. Full documentation explaining variables, best practices, and workflow is available here:👉 Go to Skeletons Documentation

What makes Skeletons so powerful?

Skeletons are powered entirely by Variables. That means you can restyle your whole site visually in minutes.

Variables control:

  • typography
  • spacing
  • color system
  • radiuses
  • icon sizes
  • container widths
  • button logic

And because every Skeleton section is built consistently, the entire system behaves as one ecosystem.

Copy → Paste → Instantly styled to your brand.

Are Skeletons built on Client-First?

Yes — strictly.
All naming, structure, wrappers, and utilities follow Client-First logic.

Are Skeletons responsive out of the box?

Yes.
All Webflow Skeletons are fully responsive.

In Figma, responsiveness is still in beta (we are improving it continuously).

Can I mix Skeletons with Sections or Templates?

Technically yes — but not recommended.

Skeletons follow a different architecture, naming system, and variable logic than templates or Sections. They are meant to be used as a complete ecosystem.

How do I get started with Skeletons fast?
  1. Open the Skeletons Style Guide
  2. Adjust global variables (typography, spacing, colors, icons)
  3. Drop Skeleton sections from BYQ.supply → Skeletons
  4. Replace content
  5. Polish per-page details
  6. Keep pasting Skeletons until your entire site is complete

Done.

Can I rename Skeletons classes?

Yes — but with rules.
Skeletons include two types of classes:

Global utilities (do not rename):

  • text-size-large
  • text-align-center
  • button
  • margin-top
  • padding-medium
  • These must stay intact because they connect to variables and the whole ecosystem.

Section-specific classes (safe to rename):

These always start with the section prefix, for example:

  • hero12_wrapper
  • intro-text32_grid
  • feature07_content

These you can modify freely if you need.

For deeper explanation, refer to the Skeletons documentation.

Can I use Skeletons without Variables?

Not recommended.
Variables are the core strength of Skeletons.
Removing them defeats the purpose of the system.

Which plans include Skeletons?
  • Free plan – small starter pack of Skeletons.
  • Pro plan – full Skeletons library + Style Guide.
  • Ultra plan – same full Skeletons library + templates & credits.
Are Skeletons available in Figma?

Yes, but currently in beta.
Some Figma components may not yet be fully responsive.

👉 Get Skeletons Figma Starter here

How do I update typography with Skeletons?

In your Style Guide go to Variables → Typography.

Adjust heading sizes, body sizes, font weights, and line heights globally.

How do I change colors?

In your Style Guide go to Variables → Color / Base.

Edit Neutral + Accent tokens.
Your entire site updates instantly.

How do I adjust spacing and layout tokens?

In your Style Guide go to Variables → Layout.

You’ll find spacing scales, grid gaps, container sizes, and max widths.

How do I replace icons inside Skeletons?

Use:

  • Figma → Copy as SVG, or
  • Iconoir / Feather → Copy SVG code

Then paste SVG into the embed and keep:

stroke="currentColor"

Optionally apply the icon stroke variable:

var(--_❇️-icon---icon-stroke)