{"id":13422441,"url":"https://github.com/aesthetic-suite/framework","last_synced_at":"2025-12-25T21:09:28.252Z","repository":{"id":48537848,"uuid":"74237262","full_name":"aesthetic-suite/framework","owner":"aesthetic-suite","description":"🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!","archived":false,"fork":false,"pushed_at":"2021-07-21T03:29:47.000Z","size":7135,"stargazers_count":204,"open_issues_count":0,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T17:47:29.782Z","etag":null,"topics":["android","atomic-css","css","css-in-js","design-system","ios","low-runtime","react","web"],"latest_commit_sha":null,"homepage":"https://aestheticsuite.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aesthetic-suite.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null},"funding":{"ko_fi":"milesjohnson"}},"created_at":"2016-11-19T21:44:10.000Z","updated_at":"2024-11-18T05:32:06.000Z","dependencies_parsed_at":"2022-09-02T11:01:23.397Z","dependency_job_id":null,"html_url":"https://github.com/aesthetic-suite/framework","commit_stats":null,"previous_names":["milesj/aesthetic"],"tags_count":977,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aesthetic-suite%2Fframework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aesthetic-suite%2Fframework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aesthetic-suite%2Fframework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aesthetic-suite%2Fframework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aesthetic-suite","download_url":"https://codeload.github.com/aesthetic-suite/framework/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174404,"owners_count":20896075,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","atomic-css","css","css-in-js","design-system","ios","low-runtime","react","web"],"created_at":"2024-07-30T23:00:44.990Z","updated_at":"2025-12-25T21:09:23.210Z","avatar_url":"https://github.com/aesthetic-suite.png","language":"TypeScript","readme":"# Aesthetic\n\n[![Build Status](https://github.com/aesthetic-suite/framework/workflows/Build/badge.svg)](https://github.com/aesthetic-suite/framework/actions?query=branch%3Amaster)\n[![npm version](https://badge.fury.io/js/%40aesthetic%core.svg)](https://www.npmjs.com/package/@aesthetic/core)\n[![npm deps](https://david-dm.org/aesthetic-suite/framework.svg?path=packages/core)](https://www.npmjs.com/package/@aesthetic/core)\n\n\u003e Start using Aesthetic now! [aestheticsuite.dev](https://aestheticsuite.dev)\n\nAesthetic is an end-to-end, multi-platform styling and design suite, that offers the following\npackages.\n\n- [Compiler](./packages/compiler) - Compiles a design system YAML configuration into Android, iOS,\n  and Web targets -- like Less, Sass, or CSS-in-JS.\n- [Design system](./packages/system) - JavaScript implementation of the design system configuration,\n  with theme and user preference support (color schemes, contrast levels, etc).\n- [Style engine](./packages/style) - Low-level API that renders CSS declarations into the DOM using\n  atomic class names and CSS variables for high performance, low filesize, and efficient caching.\n  Also supports server-side rendering and client-side hydration.\n- [Core](./packages/core) - Core API the combines the previous 4 packages into a single but powerful\n  CSS-in-JS solution. Is framework agnostic and can be used within any project.\n- [React](https://github.com/aesthetic-suite/react) - React integration that is built on top of the\n  core API. Provides hook and HOC based patterns, with support for contextual themes,\n  directionality, and SSR.\n\n## Goals\n\nThere are many styling solutions that exist, but none of them are perfect. They either offer too\nlittle, or too much, are not cross-platform, have complicated APIs, require too much overhead, so on\nand so forth.\n\nAesthetic aims to solve all of these problems as streamlined and efficient as possible by delivering\non the following goals for both designers _and_ engineers.\n\n- **Designers must be able to contribute.** To support this, the design system is configured in\n  YAML, which is easy to learn, read, and write, and works across all operating systems and\n  languages.\n- **Configuration _and_ convention.** YAML configuration will allow for explicit customizability if\n  needed, otherwise the automated settings will suffice as the common denominator. Ultimately,\n  regardless of which approach is chosen, it will be compiled down to the same design tokens.\n- **Mobile first _or_ desktop first.** Regardless of what device is being targeted, responsive and\n  adaptive support will be baked into the system, with utilities to effortless integrate it.\n- **Multiple design systems can be used in parallel.** Through themes, this allows for a migration\n  between old and new designs (2019 vs 2020), without having to modify components or style sheets.\n  For this to work, the theme needs to be strict.\n- **Interoping with third-party libraries must be seamless.** If a library is written in Aesthetic,\n  and they use our utilities and theme structure, they immediately gain all the benefits of the\n  design system.\n- **Support all platforms.** Why only support web? Let's support Android and iOS as well, so that\n  the design system is truly universal, and is the source of truth.\n- **Support all styling patterns.** Use Sass? Or maybe Less? Or you on the CSS-in-JS train? Either\n  way, no matter what pattern your application uses (or maybe multiple patterns), the design system\n  can target all of them.\n- **Performance is top priority.** Regardless of what platform and target is chosen, performance\n  overhead should be almost non-existant. Aim for zero or low runtime overhead.\n- **Developer experience must be enjoyable.** Ideally, all Aesthetic APIs and systems are easy to\n  use, easy to learn, and ultimately enjoyable to integrate.\n- **Testing is an after-thought.** When testing styled components, it will just work. No extra\n  overhead or DOM requirements are necessary. Will also be easy to test class name and style changes\n  based on props.\n- **User preference matters.** Does the user prefer dark color schemes? Low contrast colors? Reduced\n  motion? The framework will take all this into account, throughout all aspects of the framework.\n\n## Requirements\n\n- IE 11+\n- APIs\n  - `Array.from`\n  - `Number.parseFloat`\n  - `Object.assign`\n  - `Object.values`\n  - `matchMedia`\n\n## Documentation\n\n[https://aestheticsuite.dev](https://aestheticsuite.dev)\n","funding_links":["https://ko-fi.com/milesjohnson"],"categories":["Code Design","TypeScript"],"sub_categories":["CSS / Style"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faesthetic-suite%2Fframework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faesthetic-suite%2Fframework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faesthetic-suite%2Fframework/lists"}