Note.

• The library is compatible with React and Angular applications.
• In the near future, the library will be compatible with all front-end applications.

Installation & Usage

1. Installation of the package on your Angular project.

npm install rphm

2. Script execution for install & update.

npm run rphm

Description.

This library promotes atomic design, which involves breaking down user interfaces into elementary components called atoms, molecules, organisms, etc..

This approach fosters code reusability, consistency, and maintainability. The design system file provides the necessary basic elements for building these atoms and their associated components by defining their structure and style.

However, when assembling website pages, it may be necessary to adjust certain visual or functional aspects of the components without altering their basic structure. This is where the library comes into play: by providing a set of additional CSS classes, it allows for the rapid application of predefined styles for elements such as margins, spacing, positioning, etc.

The library and the design system work in synergy, offering a comprehensive and modular approach for frontend development, where the atoms defined in the design system serve as a solid foundation to which the library's classes add functionality and styles specific to the usage context.

Documentation : https://rphm-library.fr/

Operation.

1. The installation of the package from the root of your Angular project via Node Package Manager is mandatory for using the library.

2. To install the library in your Angular project, execute the second command from the root of your application. Each time you wish to update the library, there is no need to repeat step 1; simply execute the second command.

Details.

1. Package installation.

• +1 file package.json
• +1 file README.md
• +1 file script.sh
• +1 file update.js
• +1 file LICENSE

2. Executing the script from the command line.

if Angular application :

• Creation of a folder on the desktop.
• Cloning of the library folder.
• Transfer of the file main.css to the project folder.
• Creation of a file script.js.
• Execution of the script.js.
• Addition of the absolute path of the file main.css in angular.json.
• Permanent deletion of the file script.js.

if React application :

• Creation of a folder on the desktop.
• Cloning of the library folder.
• Transfer of the file main.css to the project folder.
• Creation of a file script.js.
• Execution of the script.js.
• Addition of the absolute path of the file main.css in main.jsx.
• Permanent deletion of the file script.js.

Credits.

The style library was created by Raphaël BARD. All installation scripts for it have been carefully written by Nassime HARMACH. All related code is open source.