UCLA Giving Journey StyleGuide

The purpose of this document is to create modular pieces of CSS, JavaScript, and HTML for easy reuse throughout the site. Hopefully, this will make the site easier to maintain going forward and also more reliable.

This document will be evolving to add new pieces as necessary.

version 0.0.1

Form Elements

Tabs

A "tab selector" allows one selection to hide or show other sub sections on other parts of the page. In this example, we use it to change which tabs are visible. First we have the selector element itself:

Code:

Markup:

The selector example above would be used to control the visibility of tabs, indicated by the data variables on the selector element. In order to specify what tabs are being controlled by this element, we need to reference the tabs as follows. (describe attributes here)

Javascript is attached to the elements as follows. This is built into the existing Javascript file so there is no need to add it. Elements with the class "blabhablh" have the functionality automatically bound to them.

Any Amount Leadership Levels

Please select an amount.

$50 $75 $100 $250 $500 $1,000 $2,500 $5,000
$

Other

Please select an amount.

Chancellor's Senior Executive Cabinet $50,000 Chancellor's Executive Cabinet $25,000 Chancellor's Cabinet $10,000 Chancellor's Gold Associates $5,000 Chancellor's Associates $2,500 Chancellor's Circle $1,000 Chancellor's Young Alumni Circle (5-9 years post undergraduate graduation) $500 Chancellor's Young Alumni Circle (0-4 years post undergraduate graduation) $250 Chancellor's Student Circle $100

Here is the complete markup for the piece. Note the markup necessary to contain the selector and tabs, and the corresponding hidden input field.

<div class="field-wrapper field-wrapper-text">
  <label>Last name</label>
  <input name="tbLoginLastName" type="text" maxlength="70" id="tbLoginLastName" class="control-text">
  <p class="error">Please enter your last name</p>
</div>

Javascript has been modified as follows to support the new inputs:

Colors

The hex codes can be copy and pasted into new styles for reuse

Name: SASS Variable: Swatch: Hex Code:
Navy Blue $colorNavyBlue #00539a #00539a

Cyan:

Yellow:

Medium Grey: usually used for fonts.

Light Grey: often used as a background for form elements.