# bare.style

> A mobile-first CSS framework with no build step. Install with `npm i @barebase/style`, or link a file directly. You link only the components the page uses, so a page pays for what it shows and nothing else.

## Facts

- Package: @barebase/style (npm). Version 0.4.0. Licence MIT.
- Zero dependencies. Plain CSS. No preprocessor, no config file, no tooling required to use it.
- 216 stylesheets. Only the four files in src/core are mandatory.
- 51 ready-made page and section templates, composed only of those components.
- Class prefix is bs-. Block bs-card, element bs-card__body, modifier bs-card--compact.
- Customise any component by setting a --bs-<block>-<prop> custom property in your own CSS.
- Light is the default. Pin either theme with class theme-light or theme-dark on the root element; with no class the page follows prefers-color-scheme, and src/behaviour/theme.js writes theme-light for a reader who has chosen nothing.
- Every file declares the same cascade layer order, so the order you link them in does not matter.

## Machine-readable

- [components.json](https://bare.style/components.json): every component, its file, its classes, its custom-property hooks and its required markup. Read this before writing bare.style markup rather than guessing class names.
- [brands.json](https://bare.style/brands.json): every third-party brand the framework knows about, in one list with a status on each. status carried is the owner own published file with the attribution line its licence requires. status placeholder is a brand no framework may redistribute: it carries a neutral bare.style glyph, the owner restriction, their terms page and a notice saying the glyph has to be replaced. A sibling document rather than part of components.json, so a page that shows no mark pays nothing for the set.
- [templates.json](https://bare.style/templates.json): every template, its category, the files it links and its full markup. Paste the markup as it is: link src/core plus the files the entry names and it renders. No template introduces a class of its own.
- MCP server over stdio, if you can run one: `npx -y -p @barebase/style bare-style-mcp`. Tools: list_components, get_component, search_components, list_icons, get_icon, list_brands, get_brand, get_tokens, get_install, get_seo, get_rules, list_templates, get_template.

## Templates

- [Template library](https://bare.style/templates): every template rendered, with its markup.
- Fetch one by id from templates.json, or call get_template on the MCP server. Ids by category:
  - Application: activity-timeline analytics-dashboard availability-manager billing booking-confirmation booking-flow dashboard-empty email-client empty-state error-page inbox-queue live-chat log-viewer onboarding permission-denied record-detail search-results settings stats-overview table-view task-list team-members
  - Auth: check-email forgot-password locked login login-aside sign-in sign-up two-factor
  - Content: author-card blog-index blog-post changelog profile
  - Marketing: cta-banner faq feature-grid footer hero logo-cloud pricing-card pricing-comparison pricing-five-plans pricing-four-plans pricing-one-plan pricing-six-plans pricing-three-plans pricing-two-plans site-header testimonials

## Docs

- [Documentation](https://bare.style/docs/)
- [core](https://bare.style/docs/core)
- [layout](https://bare.style/docs/layout)
- [forms](https://bare.style/docs/forms)
- [nav](https://bare.style/docs/nav)
- [data](https://bare.style/docs/data)
- [chart-time](https://bare.style/docs/chart-time)
- [feedback](https://bare.style/docs/feedback)
- [prose](https://bare.style/docs/prose)
- [motion](https://bare.style/docs/motion)
- [app](https://bare.style/docs/app)
- [icons](https://bare.style/docs/icons)
- [brands](https://bare.style/docs/brands)
- The application layer - shell, command, control, metric, flow, collaboration, auth, calendar, scheduler - is src/app and is documented at /docs/app. The 48-glyph icon set is src/data/icon.css and is documented at /docs/icons.
- Third-party brand marks are documented at /docs/brands and listed in brands.json. A carried mark is the owner own published file, unaltered. Never recolour, redraw or refit one, and never invert a light mark for a dark theme - use the owners dark file where they publish one. Each carries an attribution line the licence requires on any page that shows the mark. A placeholder entry is not the owner artwork at all: it is a neutral glyph standing in for a mark we may not redistribute, and it has to be replaced with the owner own file before shipping.

## Do not

- Do not add a build step, a config file or a plugin. There are none.
- Do not use utility classes from other frameworks. They do not exist here.
- Do not link a group barrel when the page uses one component from it. Link the component.
- Do not assemble a whole page by hand when a template already covers it. Take that markup and change the copy.