---
description: >-
  The S2 Framework is a product of innovation, thoughtful integration, and years
  of craftsmanship.
icon: circle-heart
---

# Foundations of S2

We initially built S2 for our own agency's use based on the [Saddle Framework](https://saddle-framework.webflow.io/) (which is inspired by [MAST](https://www.nocodesupply.co/mast)). 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 [Tailwind CSS](https://tailwindcss.com) 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. |
| [**Origin UI**](https://originui.com), [**Radix UI**](https://www.radix-ui.com) & [**Flux**](https://fluxui.dev) | 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!