CHASSIS ASSETS
Ship Assets toEvery Brand, Every Platform
A file-driven build that copies design assets from one source tree to the names, formats and folders of the web, iOS and Android, for every brand and app.
What Chassis Assets Does
Copies the files a designer exports into the output of each platform, with one build command. One repository holds several brands and apps, and a brand overrides only the files that differ.
Platform Naming
Renames files to kebab-case for the web and snake_case for iOS and Android. Keeps the @2x and @3x variants the designer exported, and sorts them into density folders for Android.
Brand Override System
Put the files of every brand in the default folder, once. A brand folder holds only the files that differ, and a brand file replaces the default file of the same path.
Multi-Platform Output
One source tree, one output folder per platform, app and brand. WOFF and WOFF2 fonts go to the web, TTF and OTF fonts to iOS and Android. Nothing is converted or resized.
Built for Production at Scale
A build for products with several brands, apps and platforms. It takes the files from the export of the design tool to the folder an app reads.
Multi-Brand Architecture
The folders of the source are the brands: default/ for the files every brand gets, and a folder per brand for its overrides. The build lays the brand over the default files.
Platform-Specific Names
Applies the naming of each platform: kebab-case for the web, snake_case for iOS and Android, and the ic_ prefix for Android icons. Subfolders are kept on every platform.
Resolution Variant Handling
Reads the @2x and @3x indicator of a file name. The web and iOS keep it in the name, and Android gets the file in its density folder, such as drawable-xhdpi.
Format Filtering by Platform
The web gets WOFF and WOFF2 fonts with their stylesheets, iOS and Android get TTF and OTF. WebP images go to the web and Android, and each platform gets the icon formats it can use.
CLI Build Filters
The --brand, --app and --platform options build a part of the output and keep the rest. A CI job builds the one job its app reads.
Checks
A validator compares the output with the source, a contract check names the files a consumer reads, a source lint checks the names, and an analyzer reports sizes and files with the same content.
From Design to Production
Run one command to copy the source into the output of each platform. The build takes care of the file names, the resolution variants and the folders of the web, iOS and Android.
Structure Source Folders
Put the files under source/, by brand, app and type. The files of default/
go to every brand, and a brand folder holds the files that replace them.
source/
├── default/
│ └── demo/
│ └── images/
│ ├── brand-logo.svg
│ ├── hero-img.png
│ └── hero-img@2x.png
└── sinefil/
└── demo/
└── images/
└── brand-logo.svgRun Build Command
Run pnpm assets to build every job, or use the --brand, --app and --platform options to build a part. The build copies, renames and sorts the files for each platform.
# Build every job
pnpm assets
# Build specific brand
pnpm assets --brand chassis
# Build specific app
pnpm assets --app demo
# Build with filters
pnpm assets --brand chassis --app demoIntegrate Build Output
The dist/ folder has one folder per platform, app and brand. Copy the folder
of your job into your web, iOS or Android project, or build it in CI.
dist/
├── ios/demo/sinefil/images/
│ ├── brand_logo.svg
│ ├── hero_img.png
│ └── hero_img@2x.png
└── android/demo/sinefil/images/
├── drawable/
│ ├── brand_logo.svg
│ └── hero_img.png
└── drawable-xhdpi/
└── hero_img.png