Refer to the styling Wiki page in the README, so new devs know to look there
Add any additional default styles needed for us to use default styles out of the box
Information to include:
How to use a default bootstrap style (as in your PR)
How to use a default styled components style (as in your PR)
When we should use bootstrap vs. styled components
Mention that in general, we should not style bootstrap styles with styled components, because bootstrap components are supposed to look the same as each other. We should only style bootstrap components if we need the bootstrap component to do something significantly different (e.g. making a vertical navbar from bootstrap's horizontal navbar)
Mention that we should only use styled components if no bootstrap component is available
Include that we don't need the app to look exactly the same as the Figma designs. It's ok if it looks slightly different (or even significantly different), as long as it matches the theme and looks good
Link the Figma page with the default styles
Include guidelines on where to put styles in the code (e.g. put styled component styling under the component)
Include guidelines on what naming conventions we are using (e.g. style component for NavBar component will be called StyledNavBar)
Include guidelines on how to import bootstrap components (e.g. I saw you had it as import Button from 'react-bootstrap/Button' and not import { Button } from 'react-bootstrap')
What: Add a new Wiki page for styling guidelines, and refer to the styling Wiki page in the README wiki page.
Why: we want developers with little css experience to look at the documentation and style their code following our guidelines.
How:
Information to include:
NavBar
component will be calledStyledNavBar
)import Button from 'react-bootstrap/Button'
and notimport { Button } from 'react-bootstrap'
)