design-guidelines.md

Design Guidelines for UI Contribution

The following is the styleguide that will be followed throughout the project:

Important Points To Note

1. Please read the contributing guide to start with the UI contribution. Create each screen in separate branches.

2. Make sure to keep the reusable components of the screen (like navbar, sidebar) in a separate folder called partial inside componentsand use it while designing screens.

3. We are using Bootstrap CSS as the base of the project so that making the layout becomes faster. However, the components will be designed according to the design guidelines and the mockups screens. Make custom stylesheets for every screen and place them inside components folder.

4. For the icons, Font Awesome can be used.

5. There are no fixed dimensions for the elements in the project as those will be determined by the relative sizes of the screen. Please make sure these sizes adapts to different screen sizes including mobile screens and also the layout changes accordingly for mobiles.

6. Refer to the below screens for the UI that needs to be built.

---

Home Screen

Web	Mobile

New Note Screen

Web	Mobile

Reading Notes Screen

Settings Screen

Web	Mobile

Click on the images to open it on a new screen.