Web Components
Chapman Web Components is a resource for collaboration revolving around a common UI. It is used as a guide to maintain visual consistency across Chapman web pages.
Style
Typography
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Bold Underline ItalicA link: Click Here for Info
Headers
Proxima Nova - 800
Proxima Nova - 100
Paragraphs
Proxima Nova Soft - Bold
Proxima Nova Soft - Regular
Accents and Special Use Cases
Futura Book
Futura Light
Minion Bold
Minion Regular
Color
Standard
$red: #a82439
$black: #353430
$warm-gray: #edeade
$cool-gray: #ecebe5
Accents
$blue: #407892
$light-blue: #02bac1
$green: #25b6a4
$light-green: #c6dbd2
$yellow: #fed03d
$gold: #f39c12
$orange: #e35c4a
$purple: #9b2672
$gray-slate: #62605a
$gray-smoke: #9a9996
$gray-mist: #cbcac5
$gray-cement: #e2e2e1
Backgrounds
$bg-light-gray: #ecebe5
$bg-silver-gray: #e5e5e5
$bg-off-white: #f2f2f0
$bg-red: #a82439
Elements
Horizontal Rule:- Un-ordered list
- Item Number two
- Tacos are tasty
- Ordered list
- Because numbers
- are cool. Except 4, 4 is lame.
Blockquote Example
Blockquote! Whooo! This is another block quote line. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Center align text
Left Align text
Right Align text
Examples of a left aligned photo in text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Examples of a right aligned photo in text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Examples of a center aligned photo in text:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
| Number | First Name | Last Name | Points |
|---|---|---|---|
| 1 | Eve | Jackson | 94 |
| 2 | John | Doe | 80 |
| 3 | Adam | Johnson | 67 |
| 4 | Jill | Smith | 50 |
Icons
arrow_down
arrow_left
arrow_right
bubble-dots3
bubble-dots4
bubbles2
calendar4
checkmark-circle-fill-green
checkmark-circle-fill
checkmark-circle-green
checkmark-circle
checkmark-no-circle
clock3
cu_monogram
cu_window
envelope-light-gray
envelope
eye2
feed2
folder
globe-light-gray
globe
google-plus
home
link-light-gray
link
location
lock-light-gray
lock
menu
menu10
menu3
newspaper
pencil5
phone-light-gray
phone
play3
plus-circle2
search3
share
tag5
user-light-gray
user
vimeo
warning-fill-orange
warning
wordpress
x-mark-circle
x-mark-no-circle
youtube
Molecules
These small parts are often placed next to or inside of other elements to make up a whole. They might not make sense if displayed all by themslves with nothing else on the page.
Pagination
Calendar
Days can be displayed as a plain number, with highlight-light, with highlight-dark, or as a clickable link. See molecue examples on how to use the classes and elements. The first row automatically aligns right, the last row automatically aligns left. Each row should have exactly seven items, except the last and first rows which may have fewer items. Any width can be applied to the cu_calendar class and child elements will resize accordingly.
Calendar Icons
Buttons
Primary Button Secondary Button Secondary Button Gray Default ButtonMore Info
Organisms
These objects make sense when displayed all by themselves, and tell a complete story to the viewer. They are complex, and are often made up of many smaller parts.
Events Widget
An example of an events widget initialized via HTML attributes:
Upcoming Events for Group A
An example of an events widget initialized via jQuery parameters:
Upcoming Events for Group B
Navigation Banner
Law Navigation Banner
Story Tiles
Fact Cards
3.67
CHAPMAN'S
AVERAGE GPA
GPA averages are calculated in the following way, and this means that people who apply to Chapman are frequently in the top 10% of their graduating class.
REQUEST INFORMATION »
1840
CHAPMAN'S
AVERAGE SAT
Chapman takes the top scores from each of your SAT sections, so if you take the test more than once, you'll get a higher score with Chapman than you might expect.
REQUEST INFORMATION »
3.67
CHAPMAN'S
AVERAGE GPA
GPA averages are calculated in the following way, and this means that people who apply to Chapman are frequently in the top 10% of their graduating class.
REQUEST INFORMATION »
1840
CHAPMAN'S
AVERAGE SAT
Chapman takes the top scores from each of your SAT sections, so if you take the test more than once, you'll get a higher score with Chapman than you might expect.
REQUEST INFORMATION »
127
STUDENT
organizations
GPA averages are calculated in the following way, and this means that people who apply to Chapman are frequently in the top 10% of their graduating class.
REQUEST INFORMATION »
23
average
class size
Chapman takes the top scores from each of your SAT sections, so if you take the test more than once, you'll get a higher score with Chapman than you might expect.
REQUEST INFORMATION »
102
AREAS OF STUDY
23
MINORS
GPA averages are calculated in the following way, and this means that people who apply to Chapman are frequently in the top 10% of their graduating class.
REQUEST INFORMATION »
14:1
RATIO
STUDENT TO FACULTY
Chapman takes the top scores from each of your SAT sections, so if you take the test more than once, you'll get a higher score with Chapman than you might expect.
REQUEST INFORMATION »
Omni-nav
COMING SOON
Javascripts
Image Quickview
Just link to a .jpg, .gif, or .png image. It's really that simple!
Content/HTML Quickview
Like Image Quickview, this allows you to specify any HTML to be displayed on a lightbox.
Launch a video player
Launch Lorem Ipsum
Alternately, you can call _______ directly from Javascript to pass in any HTML/DOM content to be displayed.
Call to Action Tracking
Just add an HTML attribute to your link like this:
<a href="#" data-analytics-event="Big Red Button,Request Information,Page Footer">Click here</a>
This button will track a Google Analytics custom event!
Layout
Media Queries
Container
Apply the class .container to your main wrapper and it will become centered with the correct width.
Sass Mixin
You have access to the @include breakpoint(s) mixin for media queries. The following sizes are defined in breakpoints.scss: XS, S, M, L, XL
HTML Helper classes
The following classes will show or hide contents accordingly:
.show-xs
.show-s
.show-m
.show-l
.show-xl
.hide-xs
.hide-s
.hide-m
.hide-l
.hide-xl
Grid System
This grid system was borrowed from the concise framework. Please read the full documentation on how to use the grid system.
Concise comes with a fluid, mobile-first grid system. Once the viewport of a device is larger than 768px, the rows of the grid display with 16 columns. Getting started with the grid system is as easy as wrapping any of the .column-* classes inside of a .row class.
By default, no gutters are added onto any of the grid columns. However, simply adding the class .gutters to your .row class provides a 2% gutter to each of the columns, except for the first one.
You also can nest grids inside of each other by nesting a .row class inside of a column.
Forms
Error Pages
CU Vendor Themes
Various departments may need to contract with external vendors to create websites with specific purposes.
The sites created often need to look and feed like the main www.chapman.edu
website. We have created a set of assets specifically for this purpose. External developers can link
to these assets in the webpages and adopt the official Chapman styles.
Demo Pages with the CU Vendor Themes applied
- 2 Column Lite
- 2 Column with Side Navigation
- 2 Column
- 3 Column Carousel (Law)
- 3 Column Carousel
- 3 Column with Side Navigation
- 3 Column with Side Navigation (Law)
- Browser Update
- Error
Usage
We have tried to make using these themes as easy as possible.
First include the styles and scripts in the head of your pages.
-
Include the style and script tags in the head of your pages.
<script src="https://www2.chapman.edu/assets/cu_vendor_themes.js" data-version="1.1.1"></script>
<link href="https://www2.chapman.edu/assets/cu_vendor_themes.css" rel="stylesheet" data-version="1.1.1">
-
Now structure the html of your page in one of our available layouts. See the html layout snippets below:
Cascade
Header
Left Sidebar
Center Column
- Page Title
- Primary Content
- Collapsable Region
- Tab Region
- Three Box Callout
- Form
- Sponsorship Logo Feed
- Twitter Feed
- Carousel
- Personnel Region
- Funnel Region
- Slideshow Region
- Spotlight Region
Right Sidebar
GPA averages are calculated in the following way, and this means that people who apply to Chapman are frequently in the top 10% of their graduating class.
REQUEST INFORMATION »Chapman takes the top scores from each of your SAT sections, so if you take the test more than once, you'll get a higher score with Chapman than you might expect.
REQUEST INFORMATION »GPA averages are calculated in the following way, and this means that people who apply to Chapman are frequently in the top 10% of their graduating class.
REQUEST INFORMATION »Chapman takes the top scores from each of your SAT sections, so if you take the test more than once, you'll get a higher score with Chapman than you might expect.
REQUEST INFORMATION »GPA averages are calculated in the following way, and this means that people who apply to Chapman are frequently in the top 10% of their graduating class.
REQUEST INFORMATION »average
class size
Chapman takes the top scores from each of your SAT sections, so if you take the test more than once, you'll get a higher score with Chapman than you might expect.
REQUEST INFORMATION »AREAS OF STUDY 23 MINORS
GPA averages are calculated in the following way, and this means that people who apply to Chapman are frequently in the top 10% of their graduating class.
REQUEST INFORMATION »STUDENT TO FACULTY
Chapman takes the top scores from each of your SAT sections, so if you take the test more than once, you'll get a higher score with Chapman than you might expect.
REQUEST INFORMATION »Omni-nav
COMING SOON
Javascripts
Image Quickview
Just link to a .jpg, .gif, or .png image. It's really that simple!
Content/HTML Quickview
Like Image Quickview, this allows you to specify any HTML to be displayed on a lightbox.
Launch a video player Launch Lorem IpsumAlternately, you can call _______ directly from Javascript to pass in any HTML/DOM content to be displayed.
Call to Action Tracking
Just add an HTML attribute to your link like this:
<a href="#" data-analytics-event="Big Red Button,Request Information,Page Footer">Click here</a>
This button will track a Google Analytics custom event!Layout
Media Queries
Container
Apply the class .container to your main wrapper and it will become centered with the correct width.
Sass Mixin
You have access to the @include breakpoint(s) mixin for media queries. The following sizes are defined in breakpoints.scss: XS, S, M, L, XL
HTML Helper classes
The following classes will show or hide contents accordingly:
Grid System
This grid system was borrowed from the concise framework. Please read the full documentation on how to use the grid system.
Concise comes with a fluid, mobile-first grid system. Once the viewport of a device is larger than 768px, the rows of the grid display with 16 columns. Getting started with the grid system is as easy as wrapping any of the .column-* classes inside of a .row class.
By default, no gutters are added onto any of the grid columns. However, simply adding the class .gutters to your .row class provides a 2% gutter to each of the columns, except for the first one.
You also can nest grids inside of each other by nesting a .row class inside of a column.
Forms
Error Pages
CU Vendor Themes
Various departments may need to contract with external vendors to create websites with specific purposes. The sites created often need to look and feed like the main www.chapman.edu website. We have created a set of assets specifically for this purpose. External developers can link to these assets in the webpages and adopt the official Chapman styles.
Demo Pages with the CU Vendor Themes applied
- 2 Column Lite
- 2 Column with Side Navigation
- 2 Column
- 3 Column Carousel (Law)
- 3 Column Carousel
- 3 Column with Side Navigation
- 3 Column with Side Navigation (Law)
- Browser Update
- Error
Usage
We have tried to make using these themes as easy as possible. First include the styles and scripts in the head of your pages.
-
Include the style and script tags in the head of your pages.
<script src="https://www2.chapman.edu/assets/cu_vendor_themes.js" data-version="1.1.1"></script> <link href="https://www2.chapman.edu/assets/cu_vendor_themes.css" rel="stylesheet" data-version="1.1.1"> - Now structure the html of your page in one of our available layouts. See the html layout snippets below:
Cascade
Header
Left Sidebar
Center Column
- Page Title
- Primary Content
- Collapsable Region
- Tab Region
- Three Box Callout
- Form
- Sponsorship Logo Feed
- Twitter Feed
- Carousel
- Personnel Region
- Funnel Region
- Slideshow Region
- Spotlight Region