Skip to content

6. CSS Style Guide

Jump to bottom
Veronica edited this page Mar 15, 2018 · 1 revision

In creating CSS styling for this project, we will be following the styling of the Trello app as closely as possible.

Styling React

Our team looked at several different methods of organizing our CSS styling (in-line, separate stylesheets attached to each component, e.g. App.js/App.css, and one unified stylesheet, style.css, that encompasses all of the styles used for the project.)

While aware that React best practices recommend inline styling, we ultimately decided to use one unified stylesheet.

Justification for this decision:

  1. Centrally located styling makes it easier for team members to see a "bird's eye view" of what styles are affecting what.
  2. We can define general purpose classes and styles that can be used and reused throughout the code, across components.

Note: Our first approach, which was to create individual stylesheets for each component, was not effective due to the fact that each stylesheet was affecting the other stylesheets. For example, if one person styled all lists, or all buttons for one component, that style would affect all lists or all buttons across components, inadvertently changing styling in multiple areas. A solution to this was to make sure that all styling was done on classes. This solved the issue of unintended cross-component styling, but we decided to take it a step further and combine all styles in one file for the reasons listed above.

Navigating and adding to the style.css file

We expect that as team members create components, they will also create CSS styling for said components. Please add all styling to the style.css file. Steps in this process:

  1. Check your styles - Are you using classes to style the elements of your component? Avoid selecting HTML elements directly, as this can have unintended consequences throughout the code! Make sure you have a class in there to add some specificity. OK: .card-preview li NOT OK: li.
  2. Caveat to #1: If you strongly believe that a style you are using is applicable to the entire site, you may select using HTML elements and no classes. Put these styles under "General Styles" at the beginning of the style.css document. Be very careful if you do this, however, and make sure that this style rule is not conflicting with any others!
  3. Create an entry in the index at the top of the style.css file in this format: [Component Name] Styles - line x (x being the line number your component styling will start on.) General styles will always come first in the file, but after that, please try to keep components in roughly alphabetical order.
  4. Navigate to the line where your component styling will start, and enter your styling. The first line should be a comment indicating the beginning of the component styling, e.g. /* Card Component Styles */.
  5. After you've entered your styling, please re-assess the beginning lines of all other styles and change numbers where necessary in the Index. Your styling will inevitably push other styling down when inserted (unless yours is the last one in the file,) so please make sure all numbers in the Index are correct!
  6. Check your work. Make sure everything still looks right, not just in your component, but in all components.

Style Guide

1. Colors & Color Schemes

Please note color names given here are for reference only; they do not necessarily correspond to predefined CSS color names. Examples of use on site provided alongside colors.

Neutral Colors (for cards, lists, dropdown menus)

  • Gray - #E2E4E6 - rgb(226, 228, 230) (Basic list color)
  • White - #FFFFFF - rgb(255, 255, 255) (Basic card color)
  • Light Gray - #D6DADC - rgb(214, 218, 220) (used for mouseover of cards, for instance.)
  • Dark Gray - #CDD2D4 - rgb(205, 210, 212) (used for mouseover of Add a Card button.)

Blue Color Scheme

  • Dark Blue - #0067A3 - rgb(0, 103, 163) (For header & "Add a List" button)
  • Blue - #0079BF - rgb(0, 121, 191) (For background color)

Green Color Scheme

  • Dark Green- #458131- rgb(69, 129, 49) (For header & "Add a List" button)
  • Green - #519839- rgb(81, 152, 57) (For background color)

Orange Color Scheme

  • Dark Orange - #B37B2C- rgb(179, 123, 44) (For header & "Add a List" button)
  • Orange - #D29034 - rgb(210, 144, 52) (For background color)

Red Color Scheme

  • Dark Red - #963C2B - rgb(150, 60, 43) (For header & "Add a List" button)
  • Red - #B04632 - rgb(176, 70, 50) (For background color)

2. Fonts and Text

  • Font Size is generally 14px
  • Font Family breaks down as: Helvetica Neue,Arial,Helvetica,sans-serif
  • Text color is white on header and background, black on cards/lists and in menus (some text is also gray, check Trello app to confirm when making components.)

3. Buttons

4. Links

Clone this wiki locally