S2 Framework
Clone S2 in Webflow
English
English
  • Welcome
    • S2 is flow simple!
    • Getting Started
  • How to use the Cloneable?
  • Guide & Documentation
    • Basic Concepts
      • Styling in Webflow
      • Utility Classes
      • Units
      • Fluid Typography
    • Variables
      • Colors vs Palettes
      • Colors in S2
      • Text
      • Variable Groups
    • Naming Strategies
      • Class Naming
      • Other Naming Strategies
      • Naming Custom Attributes
    • Structure
      • HTML Structure
      • Global Code
    • S2 Attributes
    • S2 Components
  • Editions
    • Build your own S2
      • One-page Style Guide
      • Lite Edition
  • More
    • FAQs
    • Ready to switch to S2?
      • Frameworks Comparison Overview
      • From Client-First
      • From MAST or The Saddle
      • From Lumos
    • Tools and Resources
    • Read More
      • Foundations of S2
      • Our Approaches
  • Links
    • 🤘Clone in Webflow
    • 🪵Changelog & Roadmap
  • Copyright & Terms
Powered by GitBook
On this page
  1. More
  2. Read More

Foundations of S2

The S2 Framework is a product of innovation, thoughtful integration, and years of craftsmanship.

PreviousRead MoreNextOur Approaches

Last updated 23 days ago

We initially built S2 for our own agency's use based on the (which is inspired by ). Over time, we added numerous modifications and improvements, establishing our conventions. Now, S2 has developed its own distinct standard.

S2 combines the best ideas from and other frameworks. S2 also incorporated features from some remarkable frameworks. They are improved in S2 and eventually become unique and powerful.

We drew inspiration and borrowed best practices from several other popular frameworks. They contributed methodologies that enhanced the versatility and functionality of the S2 Framework.

Good parts we referenced

MAST & the Saddle Framework

S2 originally evolved from MAST and the Saddle Framework. We have many things alike, especially using u- for utility classes.

Tailwind CSS

Tailwind CSS's utilities-first classes inspired us to create S2 Attributes. Tailwind CSS also affected the naming of our attributes and classes, and how colors are set up.

, &

How some of the top-quality UI are created and named.

Lumos

Flex Utilities and Grid Layouts

Googles Material Framework

The "on-" concept in colors

Big thanks to their excellent work!

Saddle Framework
MAST
Tailwind CSS
Origin UI
Radix UI
Flux