React toolbox is a cutting-edge web project starter template designed to provide a highly scalable architecture for launching your digital product. By adopting this template, you can kickstart your development process in a clean and efficient manner, enabling rapid product development. Experience the seamless developer journey and deliver exceptional user experiences with ease.
This document provides an overview of the style guide for the react toolbox, as defined in our TypeScript files. Our library offers a comprehensive set of styling guidelines and components to ensure consistency and quality in design.
Our color system, defined in colors.ts
, includes a range of primary and secondary colors along with various shades.
Color Type | Description | Defined In |
---|---|---|
Primary Colors | Shades for primary colors | colors.ts |
Secondary Colors | Shades for secondary colors | colors.ts |
Typography settings in typography.ts
include font sizes, styles, and weights.
Element | Description | Defined In |
---|---|---|
Font Sizes | Various font sizes | typography.ts |
Font Weights | Specific font weights | typography.ts |
Layout configurations in layout.ts
include breakpoints and structure.
Element | Description | Defined In |
---|---|---|
Breakpoints | Defined breakpoints for responsive design | layout.ts |
Structure | Rules for layout structuring | layout.ts |
Spacing rules in spacing.ts
cover margins and paddings.
Element | Description | Defined In |
---|---|---|
Margins and Paddings | Standardized spacing across components | spacing.ts |
Shadow styles in shadows.ts
for UI elements.
Element | Description | Defined In |
---|---|---|
Box Shadows | Various shadow effects | shadows.ts |
Z-index levels in z-index.ts
for the stacking order of elements.
Element | Description | Defined In |
---|---|---|
Levels | Defined z-index levels for UI elements | z-index.ts |
Support for light and dark modes in color-mode.ts
.
Mode | Description | Defined In |
---|---|---|
Light/Dark | Styles for color modes | color-mode.ts |
Additional styling considerations in styles.ts
and css.ts
.
Element | Description | Defined In |
---|---|---|
Global Styles | Overall CSS styling rules | styles.ts |
Contributions to the style guide are welcome. Please refer to our contribution guidelines for more information.
https://react-toolbox-785c5.web.app/
Install and launch react-toolbox with yarn
yarn install
nx serve
To Build the project:
nx build:
To run tests, run the following command
nx test