Welcome to Chassis Assets
Chassis Assets keeps fonts, images, icons and other design files for several brands in one source tree and builds them for web, iOS and Android.
Introduction
Chassis Assets holds the design files of a design system: fonts, images, icons and anything else an app ships. A designer exports a file into source/<brand>/<app>/<type>/, and the build copies it to dist/<platform>/<app>/<brand>/ with the name, the format and the folder that each platform expects.
The build is file-driven. A file added to source/ is in the output of the next build, and no list of assets has to be kept beside the files. The build copies, renames and sorts into folders. By default it does not resize, convert or re-encode a file; optimized images and WebP or AVIF files are options of the build.
The repository is meant to be owned by the team that adopts it. The brands and apps it ships with, those of the Chassis sites, are a configuration that you replace with your own.
Brands, apps, platforms
Three names place every file, in the source and in the output.
- A brand is a visual identity with files of its own. The default brand holds the files that every brand gets, and a brand folder holds only the files that differ.
- An app is a product that uses the files, such as a website or a mobile app. Each app has its own folders and its own list of platforms.
- A platform is what the output is built for:
web,iosorandroid.
One brand, one app and one platform make a job. The build runs every job of the configuration, and writes each to a folder of its own.
How it works
The source is organized by brand, then by app, then by type. The output turns the order around, so that a consumer finds everything of one platform and one app in one place.
source/<brand>/<app>/<type>/ -> dist/<platform>/<app>/<brand>/<type>/For each job, the build takes the files of the default brand and then the files of the brand, so a brand file replaces the default file of the same path. It leaves out the formats the platform does not use, and renames what it copies:
| Platform | Names | Also |
|---|---|---|
| Web | kebab-case, hero-banner@2x.png | Gets the web font formats and the stylesheets |
| iOS | snake_case, hero_banner@2x.png | Gets the TTF and OTF fonts |
| Android | snake_case, hero_banner.png | Sorts image variants into density folders, and adds ic_ to icons |
The build system page has the commands, the configuration and every rule.
Asset types
A folder under an app is a type. Three types have rules of their own, and any other folder is copied as it is.
- Fonts: font files named by role, with their stylesheets and licenses.
- Images: logos, illustrations and screenshots, with the
@2xand@3xvariants the designer exported. - Icons: the build output of Chassis Icons, copied per platform.
- Other assets: any other folder, such as videos or data files.
Where to start
The page to read first depends on what you do with the files.
Designers
You export files and put them into source/. Start with the design guidelines for the folders and the naming rules, then read the page of the type you work on.
Developers
You use the output in an app. Start with the page of your platform, which shows what the build writes and how an app loads it:
Maintainers
You run the build, review changes and adopt the repository for your own brands. Start with the quick start, then read the build system page.
Next steps
Continue with one of these pages:
- Quick start: clone, build, and add a first file.
- Chassis Tokens: the design tokens, which name the font roles used here.
- Chassis Icons: the icons that
icons/holds a copy of. - Chassis CSS: the CSS framework of the design system.