# Base Settings

# 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 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 <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.

# Colors

The metaphor color pallete is based off of the CSUN Design Guidelines.

<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>

<div class="text-primary">.text-primary</div>
<div class="text-secondary">.text-secondary</div>
<div class="text-success">.text-success</div>
<div class="text-danger">.text-danger</div>
<div class="text-warning">.text-warning</div>
<div class="text-info">.text-info</div>
<div class="text-light bg-dark">.text-light</div>
<div class="text-dark">.text-dark</div>
<div class="text-body">.text-body</div>
<div class="text-muted">.text-muted</div>
<div class="text-white bg-dark">.text-white</div>
<div class="text-black-50">.text-black-50</div>
<div class="text-white-50 bg-dark">.text-white-50</div>

# Modified Bootstrap Components

# 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-md">
  <a class="navbar-brand" href="#">
    <span class="sr-only">CSUN Logo</span>
    <span class="navbar-brand__subbrand">
      Sample
      <small>Beta</small>
    </span>
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup2" aria-controls="navbarNavAltMarkup2" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup2">
    <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 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>

# Breadcrumb

The breadcrumb component from bootstrap has been slightly modified. Please note that the font-awesome home icon is optional.

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fas fa-home"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Library</a></li>
        <li class="breadcrumb-item active" aria-current="page">Data</li>
    </ol>
</nav>

# Custom Components

# Timeline

A custom component intended to be used to display the passage of time.

//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>

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

# Footer

A CSUN branded footer component.

<footer class="footer-metaphor">
    <div class="container">
        <div class="row">
        <div class="col-12 col-md-5">
            <div class="row mb-3 mb-md-0">
            <div class="col-12 col-md-3">
                <img class="d-block mx-auto mx-md-0 img-fluid footer-metaphor__emblem mb-3 mb-md-0" src="//s3-us-west-2.amazonaws.com/csun-metalab/metaphor/dist/img/csun-emblem.svg" alt="CSUN Emblem">
            </div>
            <div class="col-12 col-md-9">
                <h6>META+LAB </h6>
                <div>
                &copy; California State University, Northridge <br> 
                18111 Nordhoff Street, Northridge, CA 91330 <br>
                Phone: <a href="#">(818) 677-1200</a> / <a href="//www.csun.edu/contact" target="csun">Contact Us</a>
                </div>
            </div>
            </div>
        </div>
        <div class="col-12 col-md-7">
            <div class="row">
            <div class="col-12 col-md-4">
                <div class="mb-2 mb-lg-1">
                <a href="//www.csun.edu/emergency/" target="csun">Emergency Information</a>
                </div>
                <div  class="mb-2 mb-lg-1">
                <a href="//www.csun.edu/afvp/university-policies-procedures/"  target="csun">University Policies & Procedures</a>
                </div>
            </div>
            <div class="col-12 col-md-4 pl-0">
                <div class="mb-2 mb-lg-1">
                <a href="//www.csun.edu/sites/default/files/900-12.pdf" target="csun">Terms and Conditions for Use</a>
                </div>
                <div class="mb-2 mb-lg-1">
                <a href="//www.csun.edu/sites/default/files/500-8025.pdf" target="csun">Privacy Policy</a>  
                </div>
                <div class="mb-2 mb-lg-1">
                <a href="//www.csun.edu/it/document-viewers" target="csun">Document Reader</a>
                </div>
            </div>
            <div class="col-12 col-md-4 px-0">
                <div>
                <a href="//www2.calstate.edu" target="csun">California State University</a>
                </div>
            </div>
            </div>
        </div>
        </div>
    </div>
</footer>

# Rounded Buttons

The .btn-rounded class is custom to metaphor. You can add this class to any bootstrap button in order to make it rounded.

Rounded Button Rounded Button Rounded Button Rounded Button Rounded Button Rounded Button

<button type="button" class="btn btn-rounded btn-primary">Rounded Button</button>
<button type="button" class="btn btn-lg btn-rounded btn-dark">Rounded Button</button>
<button type="button" class="btn btn-sm btn-rounded btn-warning">Rounded Button</button>
<button type="button" class="btn btn-rounded btn-outline-primary">Rounded Button</button>
<button type="button" class="btn btn-rounded btn-lg btn-outline-dark">Rounded Button</button>
<button type="button" class="btn btn-rounded btn-sm btn-outline-success">Rounded Button</button>

# Badges

The .badge-outline-{theme-color} is custom to metaphor. The default badge is a standard bootstrap component (with metaphor colors applied instead of the default bootstrap colors).

//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>
<span class="badge badge-info">Lorem Ipsum</span>
<span class="badge badge-warning">Metaphor</span>
<span class="badge badge-light">Light Badge</span>
<span class="badge badge-dark">Dark Badge</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>
<span class="badge badge-outline-info">Lorem Ipsum</span>
<span class="badge badge-outline-warning">Metaphor</span>
<span class="badge badge-outline-light">Light Badge</span>
<span class="badge badge-outline-dark">Dark Badge</span>

# Rise Arrow

A central graphic element around the CSUN concept is the Rise Arrow. This arrow helps visualize the key message: Through CSUN, we all rise.

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

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

//3-d rise arrow
<div class="rise-arrow rise-arrow--2tone"></div>
<div class="rise-arrow rise-arrow--middle"></div>
<div class="rise-arrow rise-arrow--bottom"></div>

//taller rise arrow (you can make it as tall as you want)
<div class="rise-arrow rise-arrow--2tone"></div>
<div class="rise-arrow rise-arrow--2tone"></div>
<div class="rise-arrow rise-arrow--2tone"></div>
<div class="rise-arrow rise-arrow--middle"></div>
<div class="rise-arrow rise-arrow--bottom"></div>

The rise arrow can easily be made bigger or smaller by adjusting the font-size of it's parent. (This was achieved by building the rise arrow with only ems and percentages).

<div style="font-size:2.5rem;">
    <div class="rise-arrow">
    </div>
</div>

<div style="font-size:1rem;">
    <div class="rise-arrow rise-arrow--2tone">
    </div>
</div>

<div style="font-size:4rem">
    <div class="rise-arrow rise-arrow--2tone">
    </div>
    <div class="rise-arrow rise-arrow--middle">
    </div>
    <div class="rise-arrow rise-arrow--bottom">
    </div>
</div>

# Horizontal Line

Add a class of .hr-metaphor to an <hr> element

---

To adjust the width of the <hr> element, apply the bootstrap width classes of .w-25, .w-50, .w-75

---

To adjust the placement of the <hr> element, combine the bootstrap width classes with .ml-0 or .mr-0

---

<hr class="hr-metaphor">
<hr class="hr-metaphor w-50">
<hr class="hr-metaphor w-25 mr-0">

# Datepicker

Include the datepicker.js file (included with MetaphorV2). Initialize with $('.date').datepicker(); The datepicker is accessible.