The following Style Guide will be used.
-
Please read the contributing guide to start with your contributions.
-
The project has been setup with the latest version of Material UI library. This library helps to achieve Material Design for UI with React components. Use the components from this library while creation of buttons, cards, and other similar components for the UI. The shadow settings coming from the library can be used by default.
-
If any components need to be overriden with custom styles, please follow this link.
-
For icons, please use Material Icons (Highly Recommended). All the icons used in the design have used Material Icons by default.
-
Responsive design is fundamental to the design for this project. Use following techniques as and when required to achieve the required responsiveness:
-
Main point to note while making a responsive design is to look at the content width and typography. Remember to set break points in media queries according to the content width and typography used for the site and not according to fixed screen widths only. The number of breakpoints in media queries may be more or less than the ones provided by a library such as Bootstrap. The breakpoints in Bootstrap set a safe responsive design and not necessarily the best design.
-
By adhering to above points, please refer to the below screens for the UI that needs to be built. There are two sections in this file to give an idea of the designs to be followed:
- Mobile Screens
- Desktop Screens
For desktop designs the colours may look different from the actual style guide. In those cases please use the colours which are closest to these designs from the style guide mentioned above.
Right click on the image links and click on Open Link in New Tab to view them on separate pages.