PLEASE NOTE: This repo shall gradually (from project to project) transform into a generic RLI design system. It's not there yet. This repo started out as the single source of truth for the UX/UI of the RLI-Management-System (RMS) and is technically based on Vite.
This repo is a collection of elements, components, pages and ideas on creating the UX/UI of the RMS (RLI-Management-System). It acts as a design contract between @bmlancien and @4lm. The RMS is programmed with the Python web framework called Django (and other libraries that create HTML on the backend) and, therefore, not accessible to frontend designers skilled in HTML, JavaScript, and CSS with knowledge in additional design tools like Figma, that's why this repo is needed. @bmlancien and @4lm will work together in this repo concerning UX/UI, and @4lm will then take the created outcomes and implement them into the RMS code base.
https://rli-design-4bc787.netlify.app
npm installnpm run devnpm run buildPlease note: to run the build step, usually is not needed. A developer develops by running npm run dev. After committing or merging your changes to the main branch, you find the build result deployed on netlify in under one minute processing time (as of writing 22s).
npm run previewThis project is composed of a very small team, therefore the strategy is to base our design on existing design systems, but also to customize what needs to be customized in order to stand out as RLI-style. With this approach we want to create a minimal, flexible and living design system that will allow us to scale it up in the future for other projects if wanted. Minimal, because there is no need to spend months on creating something totally new, when there are already really good practices on other platforms that can be integrated into ours. Flexible, because we want to base our design choices on our existing RLI guidelines and web applications, as well as on external platforms. Living, because we don't think that anything is fixed in stone and that the design system will evolve with the RLI and its products.
Further links:
The used technologies in this Git-repository (repo) differ from those in the RMS code base's repo because they cater to different use cases. But there is one combining technology that is the base of the frontend system and used in both repos: the CSS frontend framework Bootstrap. Bootstrap will incrementally replace Foundation, the initially used CSS frontend framework in the RMS code base. This step was needed because Foundation - as we see it - is an abandoned project and should be considered EOL. Therefore we needed a CSS frontend framework that is likely to exist in 10 years because longevity is one of the requirements of the RMS. Bootstrap is by different measures the most used frontend CSS framework in the world and is likely to exist for the next 10+ years.
This repo uses Vite, which is a new type of frontend build system which supports most modern JavaScript (JS) based frontend technologies like React, Vue, Typescript, JSX etc., out of the box. Vite can be extended via its plugin system to support further JS frontend technologies. The RMS is coded in Django and uses the Django Template Language (DTL), which is implemented in Python. Therefore, it is not a JS frontend technology, and Vite can't utilize it. To mimic Django's template syntax, this Vite repo uses vite-plugin-nunjucks, which uses the JS template library Nunjucks which is inspired by the Python based Jinja templating language which again is inspired by the DTL and therefore has a very similar syntax. The resulting syntax similarity will help us develop components and pages that shall mimic its later use with the DTL.
For a quick usage introduction, please go to the Vite Nunjucks plugin readme and take it from there.
In Vite with vanilla HTML/JS, you can name and structure your HTML pages two ways. This ways have in principle nothing to do with Vite, they are inherent to how HTML works in your browser.
ds/index.html
ds/design-system/index.html
ds/typography/index.html
Your navigation and href values should then be /ds/, /ds/design-system/ and /ds/design-system/ - every time you have index.html as a file name you can completely omit index.html.
You can also name your HTML files diferently in the same and keep them in the same folder, then you have to use the HTML file ending (except for index.html).
ds/index.html
ds/design-system.html
ds/typography.html
Your navigation and href values should then be /ds/ (omitted, because index.html), /ds/design-system.html and /ds/typography.html
- you can combine both techniques
- in
hreflinks I recommend to use absolute paths (relative to your root folder, in our casesrc/) with a leading slash "/". For example:/ds/design-system/forsrc/ds/design-system/index.html
If you add pages (e. g., ds/index.html), you have to explicitly export them in the vite.config.js file. Otherwise, they will not show up in deployment. It isn't apparent because the pages always show up in development. So please make sure to check this if you do a PR. You can check this in three different ways:
- look into
vite.config.jsand check if everything is included - do
npm buildand thennpm previewto build and preview a baked version. These steps also help to see if the site would build or break the build on GitHub/Netlify - check the automatically appearing Netlify deploy preview in your PR on GitHub
Best, you combine option 1 with either option 2 or 3.