Overview
Axis is a theme-based component library that supports SSR (Server-side Rendering) by default. It is fully responsive and extensible. The main philosophy of Axis is to drive the styling of your application via themes, which can be shipped within your code, CMS, or server. The goal of Axis is to decouple the mixing of JavaScript and CSS, resulting in a more modular, flexible, and extensible design system architecture. It also allows non-developers to change the theme from the CMS or remote server, enabling zero downtime for your application and the ability to use multiple themes for the same website.
Features
- Theme-based component library
- Supports Server-side Rendering (SSR)
- Fully responsive
- Extensible
- Allows styling to be driven via themes
- Enables non-developers to change themes from CMS or remote server
- Zero downtime for theme changes
- Supports multiple themes for different URLs or modes (e.g. dark mode, read mode)
Installation
To install Axis, you can follow these steps:
- Fork and clone the repository.
- Run the NPM (Node Package Manager) command:
npm install axis. - Import the Axis components into your project.
- Customize the theme object to change the look and feel of your application.
- Pass the theme object down to Axis.
If you need to handle multiple themes for different URLs or modes, you can:
- Extract the common properties in the default theme.
- Deep merge the selected theme with the default theme.
- Pass the merged theme object down to Axis.
For more detailed installation instructions, please refer to the documentation or the official repository.
Summary
Axis is a theme-based component library that aims to decouple the mixing of JavaScript and CSS in order to improve the design system architecture of your application. By using themes, Axis allows for easy styling changes without modifying the codebase. It supports Server-side Rendering (SSR), is fully responsive, and offers extensible components. With Axis, non-developers can change themes from the CMS or remote server, enabling zero downtime for your application. The library also supports multiple themes for different URLs or modes. Overall, Axis provides a flexible and modular solution for driving the styling of your application.