Genesis Zero Design System
This package is a Design System (Zero). It is built on top of the foundation-ui
and provides a set of components that are ready to use without any additional configuration.
Remote Name | Port |
---|
foundationZero | 4020 |
Installation
To enable this module in your application, follow the steps below.
- Add
@genesislcap/foundation-zero
as a dependency in your package.json
file. Whenever you change the dependencies of your project, ensure you run the $ npm run bootstrap
command again. You can find more information in the package.json basics page.
{
"dependencies": {
"@genesislcap/foundation-zero": "latest"
},
}
Setting Up the Design System
The setup involves providing and registering Design System components from foundation-zero
or other places. Here's how you can do it:
Providing the Design System & Registering All Components
Tipically, in the components.ts
file (or your entry-point for app-level setups), you provide the design system using provideDesignSystem
and register components against that design system. Here's an example:
import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-zero';
provideDesignSystem().register(baseComponents);
In the example above, baseComponents
is a collection of components that are part of the same Design System. You can also register additional components if needed (even from other Design Systems, which will be prefixed with zero-
in this case).
Registering Specific Components
If you want to register specific components, you can do so by importing them from the design system and registering them. Here's an example:
import { zeroButton, zeroDesignSystemProvider, provideDesignSystem } from '@genesislcap/foundation-zero';
provideDesignSystem().register(
zeroDesignSystemProvider(),
zeroButton()
);
In the example above, zero-button
will be the only component registered in the Zero Design System. YOu can also register multiple components at once:
import { provideDesignSystem, zeroButton, zeroCard, zeroDesignSystemProvider, zeronModal } from '@genesislcap/foundation-zero';
provideDesignSystem().register(
zeroDesignSystemProvider(),
zeroButton(),
zeroCard(),
zeroModal()
);
Registering Third-Party Components
We provide a few "third-party" components that are not part of the Design System package. These can be registered in the same way as the other Design System components. Here's an example:
import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-zero';
import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
import { gridComponents } from '@genesislcap/grid-pro';
provideDesignSystem().register(
baseComponents,
foundationLayoutComponents,
g2plotChartsComponents,
gridComponents
);
The example above registers Zero UI components from the Zero Design System, Foundation Layout, G2Plot Charts, and Grid Pro.
License
Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact Genesis Global for more details.
Licensed components
Genesis low-code platform