byuweb / byu-theme-style-helpers

Provide baseline styles and variables for the BYU 2017 theme.

byu-theme-style-helpers

Provide baseline styles and variables for the BYU 2017 theme.

This repo contains a collection of short css files that can be referenced to easily add styles to existing websites.

In most cases, they provide classes like .byu-button and .byu-table-header. Classes being with "byu-" for namespacing reasons, so it will ideally not interfere with existing styling.

There are some exceptions, where it is directly styling elements. The font-related files, for example, set fonts for headings and paragraphs and divs, etc. In these cases, the files are CAPITALIZED and you should review them thoroughly before loading them on your site.

TO USE

1. Load the CSS:

• You are welcome to download or git clone these files.
• Reference css files from the cdn. (See available links below)

2. Add the byu-something classes to your elements to make use of the styling. All files with lowercase names (i.e. 'byu-button', not 'Font..') have css that has been namespaced with byu- prefixes on classes.

None of these files should immediately change any of your styling; the styling will be applied when and where you apply the appropriate classes.

FROM THE CDN

Select css files that have been marked as ready for widespread use have been included into the cdn. You can see the current list of included files by looking at the list of endpoints in this repo's cdn-config.yml file.

These files can then be accessed via this format:

Example Endpoints

  buttons.css: 'Adds button classes for BYU buttons - several BYU color options available.'
  tables.css: 'Adds a class to style tables nicely with BYU colors'
  box-shadows.css: 'Adds box-shadow classes for elements.'

Example Reference Points

Links should be in this format:

Current List of options:

https://cdn.byu.edu/byu-theme-style-helpers/latest/buttons.css
https://cdn.byu.edu/byu-theme-style-helpers/latest/tables.css
https://cdn.byu.edu/byu-theme-style-helpers/latest/box-shadows.css
https://cdn.byu.edu/byu-theme-style-helpers/latest/popups-modals.css

Don't See Something?

Help us out! There are a number of css files in this project that have been started, and we could use help flushing them out. Submit a pull request or discuss in the byuweb slack team (#engineering-group channel) what you can do to help make more options available.

byu-theme-style-helpers's Issues

Add a card style and corresponding demo html file

A lot of card styles are so simple they don't need to be a full-on component. we just need some simple html and classes and css.

this is a nice style from admissions.byu.edu that we want to bundle, add to, and share.

• default to black background with transparency
• add a royal-bg class to change bg to royal
• add a navy-bg class to change bg to navy
• present the implemented styles to the design group or 1-2 people from the design group and ask for feedback.
• see what design group thinks about levels of transparency with each of those background color options.

*remember to use good naming standards. lets use a class like byu-card-background-tile and start with 'byu-card'.
Remember to scope ALL your css to be only within .byu-card-background-tile. I.e. don't have a snippet:

.bg-navy .title-section { .... }
it should be:
.byu-card.background-tile.bg-navy .title-section { ... }