Lerna bootstrap to symlink package and setup mono-repo if you run into problems with lerna bootstrap you may need to install globally to do this run npm i -g lerna
Reduce the use Html tables elements, table elements are not responsive, and it attached horizontal scrollbar on small devices, please use flexbox/css-grids whenever supported to reduce dependency on HTML tables
Variable names, HTML class names, HTML id names should be consistent across the project.
Refrain from creating ids to HTML elements when requirement is just to style HTML elements. Ids should be unique throughout the HTML page. So please check for the id-name if it is already assigned to some other HTML element.
- A collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
Code Examples
(TBD)
Foundations
If you need more information on the guidelines or you're not comfortable with the subject matter, you can browse the following resources:
CSS Guidelines
Use Global scss/css styles at all times, do not inline styles
instead. (Note that only Dart Sass currently supports @use. Users of other implementations must use the @import rule instead.)
Don’t use @import for external css resources as it is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach.
Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future.
The foundations of a solid CSS architecture can uphold the project as it begins to scale and grow. If these foundations have not been constructed properly, your project could likely fall over in the future.
CSS will not likely break the system as a JavaScript error might. However, it can create different issues that make working on the project very difficult. If you have a team of engineers who are not confident in adding or changing CSS in the project, they are more likely to introduce bugs. These bugs will find their way to your end-users, and the project’s success may be affected because of this.
JQUERY, is/or probably was one of the most popular/useful JS libraries ever—however most of JQUERY functionality has been replaced by native JavaScript functions, as a results framework like bootstrap are replacing jQuery with native (vanilla) JavaScript.
Do not mix jQuery with reactive applications like Angular and Vue.js or React it is not necessary, please us framework API functions/features or vanilla JavaScript.
Check licensing and vulnerabilities for any JavaScript library or utility before use.
Please ensure that all imported javascript libraries are updated and monitored for security vulnerabilities
Guidelines Deep Dive
Developing Components in Isolation
Usually, in an app, you have a lot of UI components, and each of them has many different states. For an example, a basic button component could have the following states: