Installation
Custom Installation
Get started with styleframe in your project.
Install styleframe in your project
Install all styleframe packages as development dependencies to your project. We've released each package separately to allow for better tree-shaking and version control.
pnpm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
yarn add -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
npm install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
bun install -D styleframe @styleframe/cli @styleframe/core @styleframe/license @styleframe/loader @styleframe/plugin @styleframe/pro @styleframe/theme @styleframe/transpiler
Create a styleframe theme file
Create a styleframe.config.ts theme file in your project's root directory.
styleframe.config.ts
import { styleframe } from 'styleframe';
const s = styleframe();
const { variable, selector, ref } = s;
const colorPrimary = variable('color-primary', '#007bff');
selector('body', {
background: ref(colorPrimary),
});
export default s;
Build styleframe theme files
a. Using the CLI
Use the CLI to build your theme files:
styleframe build
b. Using a script
scripts/build.ts
import { build, loadConfiguration } from "@styleframe/loader";
const instance = await loadConfiguration();
await build(instance);
Import styleframe in your project
Open your main.ts file and import the generated css file:
main.ts
import '../styleframe/index.css';
Enjoy using styleframe
Enjoy writing modern, maintainable, composable theme files using styleframe!