CSS, Fonts, and Styling - BillionOysterProject/digital-platform-beta GitHub Wiki

BOP brand font and style guidelines

For BOP staff, you can find BOP’s Graphic Style Guide in our internal Google Drive. Use this guide to find the appropriate fonts, colors, and images. There is some flexibility when it comes to the platform but we tend to use the font Roboto or Roboto Condensed both on the platform and in presentation materials. It makes it more cohesive with the rest of BOP’s communications.

Bootstrap

Bootstrap is a very popular open source frontend library. Most of the CSS for the platform comes from Bootstrap. Consult their documentation when you want to add new elements to the platform.

Icons

The BOP Digital Platform uses icons from Font Awesome 4.7. Note that for now, Font Awesome 5.0 icons will not work with the existing code so you’ll need to pull exclusively from the 4.7 icon list.

For weather icons, we’re using an open source project that is appropriately titled, "Weather Icons." To add a weather icon to the html, follow this format:

<i class="wi wi-night-sleet"></i>

To add other icon font libraries, follow this general process:

Download the files.
In the Digital Platform directory, go to: Frontend>Assets>Fonts
Add the font files from the icon project to the Fonts folder.
In the Digital Platform directory, go to: Frontend>Assets>CSS
Add the appropriate CSS files from the icon project to the CSS folder. If you don’t have to edit them, use the min files. If you do, use the regular files.
To determine if you need to edit the files, open the files and compare the source url to the directory structure of the platform. If it doesn’t match, you’ll need to edit them to make sure the path is correct.
The project will probably specify different source urls to accommodate several different browsers. Make sure the source url for each matches the directory structure of the platform.
Go to Frontend>Includes>head.html
Under "Application CSS Files," add a line for each added CSS file.