Metaphor uses the following fonts:
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.
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)
<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>
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>
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>
<div class="rise-arrow">
</div>
Note: only the .badge-outline-{theme-color} is custom to metaphor. The other elements are standard bootstrap components with csun branding applied.
//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>
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.
<i class="fas fa-user"></i>
<i class="far fa-user"></i>
<i class="fab fa-facebook"></i>
Include the datepicker.js file (included with MetaphorV2). Initialize with ('.date').datepicker();