### Fonts & Typography

Metaphor uses the following fonts:

- ATCOverlook - Regular
- ATCOverlook - Regular Italic
- ATCOverlook - Bold
- ATCOverlook - Bold Italic
- FSLola - Bold

Please add the following line of code to the <head> of your document to improve loading times:

                <link rel="preload" href="fonts/ATCOverlook-Regular.woff2" as="font" type="font/woff2" crossorigin>

ATCOverlook is the default font. You can make use of it's variants with the <strong>, <b>, <em>, and <i> tags in your markup, or by using font-weight:700 or font-weight:bold or font-style:italic in your CSS or use the bootstrap-built-in classes .font-weight-bold and .font-italic.

To use FSLola Bold, add a class of .font-display in your markup, or utilize the variable $font-family-display in your Sass files.

Someone's Name
Professor | Computer Science
Faculty Director - META+LAB
Overview Overview
Contact Degrees Interests Past Courses
Fall 2018 Spring 2017

### Timeline

By default, the dots associated with each timeline item are centered. If you want the dots to be top-aligned, you can add a modifier class of .timeline--align-top to the parent <ul>. You can also override the dot alignment of any individual item by adding the following modifier classes to the <ul> element:

.timeline-event--align-top
.timeline-event--align-center
.timeline-header--align-top
.timeline-event--align-center

##### Timeline (default)

- May 2016 - Steven Kitzes - MS Computer Science
  A Comparative Study of Asynchronous Performance in NodeJS
  Committee Chair: A. Kaplan. Committee Members: J. Weigley and S. Fitzgerald.
- 12/12/12 - Really Long Title For This Research Publicaiton
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti culpa laudantium veniam nisi ea, maiores impedit nulla facilis beatae provident, sint expedita. Ab dolore sed sit nesciunt maiores doloribus minima! Ab consectetur adipisicing elit.
- Thing Another Thing
  thing foo bar
  another another foobar
- Thing Another Thing thing
  foo bar
  another another foobar

##### Timeline (dots top aligned)

- May 2016 - Steven Kitzes - MS Computer Science
  A Comparative Study of Asynchronous Performance in NodeJS
  Committee Chair: A. Kaplan. Committee Members: J. Weigley and S. Fitzgerald.
- 12/12/12 - Really Long Title For This Research Publicaiton
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti culpa laudantium veniam nisi ea, maiores impedit nulla facilis beatae provident, sint expedita. Ab dolore sed sit nesciunt maiores doloribus minima! Ab consectetur adipisicing elit.
- Thing Another Thing
  thing foo bar
  another another foobar
- Thing Another Thing thing
  foo bar
  another another foobar

              //timeline (default)
              <ul class="timeline">
                <li class="timeline-header"><strong>What</strong> Lorem Ipsum Foobar</li>
                <li class="timeline-event"><strong>Thing</strong> Another Thing thing <br>foo bar</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti culpa laudantium veniam nisi ea, maiores impedit nulla facilis beatae provident, sint expedita. Ab dolore sed sit nesciunt maiores doloribus minima! Ab consectetur adipisicing elit. </li>
                <li class="timeline-event timeline-event--align-top"><strong>That</strong> Metaphor Foo Thing</li>
              </ul>

              //timeline (dots top aligned)
              <ul class="timeline timeline--align-top">
                <li class="timeline-header"><strong>What</strong> Lorem Ipsum Foobar</li>
                <li class="timeline-event"><strong>Thing</strong> Another Thing thing <br>foo bar</li>
                <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti culpa laudantium veniam nisi ea, maiores impedit nulla facilis beatae provident, sint expedita. Ab dolore sed sit nesciunt maiores doloribus minima! Ab consectetur adipisicing elit. </li>
                <li class="timeline-event timeline-event--align-center"><strong>That</strong> Metaphor Foo Thing</li>
              </ul>

### Navbar

The metaphor navbar uses the same structure as the standard bootstrap navbar. Just add a class of .navbar-metaphor to the parent <nav> for the csun branded styles to take affect.

The default background color is white. For different background colors, add the following modifier classes to the parent <nav>

.navbar-metaphor--light
.navbar-metaphor--dark
.navbar-metaphor--black

Just like the standard bootrap navbar, you can add class of .navbar-expand-{breakpoint} to the parent <nav> in order to set the breakpoint which the hamburger menu appears/disapears

              <nav class="navbar navbar-metaphor navbar-metaphor--light navbar-expand-sm">
                <a class="navbar-brand" href="#"> <span class="sr-only">CSUN Logo</span> </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
                  <div class="navbar-nav text-center">
                    <a class="nav-item nav-link active" href="#">Home</a>
                    <a class="nav-item nav-link" href="#">Features</a>
                    <a class="nav-item nav-link" href="#">Pricing</a>
                  </div>
                </div>
              </nav>

### Nav

The metaphor navs uses the same structure as the standard bootstrap nav. Just add a class of .nav-metaphor to the parent <ul> for the csun branded styles to take affect.

Just like the standard bootrap navbar, the nav component can be horizontaly aligned (row nav) or verticaly aligned (column nav). You can make the same nav element appear horizontally on some viewports and vertically on other viewports by adding a modifier class (such as .flex-{breakpoint}-column) to the parent <ul>

For the horizontal nav, you can force the nav items to extend the full available width. Just add the class of .flex-fill (or .flex-{breakpoint}-fill if the nav is vertical on some viewports) to each .nav-item (should be combined with class of .text-center or .text-{breakpoint}-center)

You can add a class of .nav-pills to the parent <ul> for the active nav-item to have a gray background for highlighting.

#####
Column Nav

##### Column Nav with .nav-pills

##### Row Nav

##### Row Nav - justified

##### Row Nav - justified with .nav-pills

              //column nav with nav-pills
              <ul class="nav flex-column nav-metaphor nav-pills">
                <li class="nav-item"> <a class="nav-link active" href="">Active</a> </li>
                <li class="nav-item"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item"> <a class="nav-link" href="">Link</a> </li>
              </ul>

              //row nav justifed
              <ul class="nav nav-metaphor">
                <li class="nav-item flex-fill text-center"> <a class="nav-link active" href="">Active</a> </li>
                <li class="nav-item flex-fill text-center"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item flex-fill text-center"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item flex-fill text-center"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item flex-fill text-center"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item flex-fill text-center"> <a class="nav-link" href="">Link</a> </li>
                <li class="nav-item flex-fill text-center"> <a class="nav-link" href="">Link</a> </li>
              </ul>

### Rise Arrow (still a WIP)

              <div class="rise-arrow">
              </div>

### Badges and Cards

Note: only the .badge-outline-{theme-color} is custom to metaphor. The other elements are standard bootstrap components with csun branding applied.

##### Badges (default)

- Web Development
- Programming Languages
- Parallel and Distributed Programming
- Lorem Ipsum
- Metaphor
- Light Badge
- Dark Badge

##### Badges (outline)

- Web Development
- Programming Languages
- Parallel and Distributed Programming
- Lorem Ipsum
- Metaphor
- Light Badge
- Dark Badge

##### Card
(basic implementation...cards can do more)

Computer Science
META+LAB

              //badge default
              <span class="badge badge-success">Web Development</span>
              <span class="badge badge-primary">Programming Languages</span>
              <span class="badge badge-secondary">Parallel and Distributed Programming</span>

              //badge outline
              <span class="badge badge-outline-success">Web Development</span>
              <span class="badge badge-outline-primary">Programming Languages</span>
              <span class="badge badge-outline-secondary">Parallel and Distributed Programming</span>

              //card
              <div class="card text-center text-dark">
                <div class="card-body">
                  Computer Science
                </div>
              </div>

              //card (as a link)
              <a class="card text-center text-dark" href="#">
                <div class="card-body">
                  META+LAB
                </div>
              </a>

### Icon Library - Font Awesome

Utilize the font awesome icon library by adding the following <script> to the <head> of your document:

              <script defer src="/js/fontawesome/all.js"></script>

Alternatively, if working in Vue.js, you may utilize the official Font Awesome Vue.js component. The advantage of this method? "Explicitly selecting icons offers the advantage of only bundling the icons that you use in your final bundled file. This allows us to subset Font Awesome's thousands of icons to just the small number that are normally used".

After installing font awesome, you have access to most solid icons, regular icons and brand icons (you are limited to only the free icons). You can easily place icons on your site and modify their size, animate them, flip/rotate them, and more. Please see the font awesome documentation for more information.

27

- List icons can
- be used to
- replace bullets
- in lists

            <i class="fas fa-user"></i>
            <i class="far fa-user"></i>
            <i class="fab fa-facebook"></i>

### Datepicker

Chose a Date:

Include the datepicker.js file (included with MetaphorV2). Initialize with `('.date').datepicker();`

### To Do:

- Design element components (from CSUN design guidelines):
  - rise arrow
  - italic text slanted upwards for callouts and quotes
  - arrow-like shapes for callouts and quotes