Implementing the CLF

Before getting your site up and running, follow the instructions below to configure your templates.

---

Select A CLF Theme

Choose from four CLF Themes for your site by selecting the appropriate CSS file hosted on the Content Delivery Network (CDN).

<!-- Option 1: White on Blue -->
<link href="...ubc-clf-full.min.css" rel="stylesheet">

<!-- Option 2: White on Grey -->
<link href="...ubc-clf-full-wg.min.css" rel="stylesheet">

<!-- Option 3: Grey on White -->
<link href="...ubc-clf-full-gw.min.css" rel="stylesheet">

<!-- Option 4: Blue on White -->
<link href="...ubc-clf-full-bw.min.css" rel="stylesheet">

Back to top

---

Add The Unit Name

Add your Unit's Name in the following code:

<div id="ubc7-unit-name" class="ubc7-single-element">
  <a href="/" title="[YOUR UNIT NAME]"><span id="ubc7-unit-faculty">Faculty Name</span><span id="ubc7-unit-identifier">[YOUR UNIT NAME]</span></a>
</div>

What if my unit has a really long name?

Not to worry, we've got you covered with a script that will dynamically adjust the font size on the unit name so that it fits nicely onto the bar. View the solution in action.

Back to top

---

Add The Faculty Name (if applicable)

Add your Faculty's Name in the following code:

<div id="ubc7-unit-name">
  <a href="/" title="Unit Name"><span id="ubc7-unit-faculty">[YOUR FACULTY NAME]</span><span id="ubc7-unit-identifier">Unit Name</span></a>
</div>

Back to top

---

Add The Campus Identity (if applicable)

Display your unit's campus mandate: Vancouver Campus or Okanagan Campus. If your unit has a global mandate and serves the whole university or if neither option is applicable, leave this field blank. See Campus Identity for guidelines.

<!-- Vancouver Campus -->
<a href="https://www.ubc.ca" title="The University of British Columbia (UBC)">The University of British Columbia</a>
<span class="ubc7-campus" id="ubc7-vancouver-campus">Vancouver Campus</span>

<!-- Okanagan Campus -->
<a href="https://www.ubc.ca/okanagan" title="The University of British Columbia (UBC) Okanagan Campus">The University of British Columbia</a>
<span class="ubc7-campus" id="ubc7-okanagan-campus">Okanagan Campus</span>

<!-- Global or Not Applicable -->
<a href="https://www.ubc.ca" title="The University of British Columbia (UBC)">The University of British Columbia</a>

Back to top

---

Edit The Unit Bar Colour

Your Unit Name bar may be customized with your own background colour, if you have one. If you do not have a unit colour, please use the UBC blue or UBC grey, whichever applies to the CLF theme you selected. Please note that the Unit Name and Faculty Name text must always be Arial and white. You can view all colour guidelines for more information.

1. Open the file: /_clf7_assets/css/unit.css.
2. Edit the HEX colour code for the background property of #ubc7-unit.

/** Unit Bar background color **/
#ubc7-unit {
	background: #2F5D7C; /* UBC grey */
}

If your unit doesn't have a custom colour, we recommend choosing from the CLF Theme Options below:

#	CLF Theme Option	Unit Bar Background Colour
1	White on Blue	UBC Grey (#2F5D7C)
2	White on Grey	UBC Blue (#002145)
3	Grey on White	UBC Grey (#2F5D7C)
4	Blue on White	UBC Blue (#002145)

Back to top

---

Configure The Search Tool

The Search Tool beneath the Global Utility Button can be configured to search your site's domain by default.

1. Enter your Unit Name in the <value> property
2. Enter your site domain in the <value> property. E.g. *.science.ubc.ca, *.teach.educ.ubc.ca

Important: The asterisk (*) should not be removed as it acts as a wild card and tells Google Search to display results for all pages under your domain.

<!-- UBC Global Utility Menu -->
<div class="collapse expand" id="ubc7-global-menu">
  <div id="ubc7-search" class="expand">
    <div id="ubc7-search-box">
      <form class="form-search" method="get" action="https://www.ubc.ca/search/refine/" role="search">
        <input type="text" name="q" placeholder="Search this website" class="input-xlarge search-query">
        <input type="hidden" name="label" value="Search [UNIT NAME]" />
        <input type="hidden" name="site" value="*.unit.ubc.ca" />
        <button type="submit" class="btn">Search</button>
      </form>
    </div>
  </div>
  <div id="ubc7-global-header" class="expand">
    <!-- Global Utility Header from CDN -->
  </div>
</div>
<!-- End of UBC Global Utility Menu -->

Back to top

---

Add The Unit Address

Replace the default text for the bottom left section in the Unit Sub Footer with your unit's name, campus location (if applicable), mailing address, phone, and e-mail. For consistency, please change only the highlighted text below.

<div class="span10" id="ubc7-unit-address">
  <div id="ubc7-address-unit-name">[Unit Name]</div>
  <div id="ubc7-address-campus">Vancouver Campus | Okanagan Campus</div>
  <div id="ubc7-address-street">1234 Street Name</div>
  <div id="ubc7-address-location">
    <span id="ubc7-address-city">Vancouver | Kelowna</span>, <span id="ubc7-address-province" title="British Columbia">BC</span> <span id="ubc7-address-country">Canada</span> <span id="ubc7-address-postal">V0V 0V0</span>
  </div>
  <div id="ubc7-address-phone">Tel XXX XXX XXXX</div>
  <div id="ubc7-address-email">E-mail email@ubc.ca</div>
</div>

Back to top

---

Add Social Media Icons

Many units use social media channels to engage with their audiences. Add your Social Media Icons in the bottom left of the Unit Sub Footer.

<strong>Find us on</strong>
<div id="ubc7-unit-social-icons">
  <a href="https://www.ubc.ca/" title="Facebook icon"><i class="icon-facebook-sign"></i></a> 
  <a href="https://www.ubc.ca/" title="Twitter icon"><i class="icon-twitter-sign"></i></a>
</div>

If you don't wish to use this feature, just comment out or delete the above code.

Custom Colours for Social Media Icons

Your Social Media Icons' colour may also be customized.

1. Open the file: /_clf7_assets/css/unit.css.
2. Edit the HEX colour code for the colour property of #ubc7-unit-social-icons.

/** Social Icons **/
#ubc7-unit-social-icons i {
	color: #002145;
}

Back to top

---

Custom Styles

The CLF Templates come with default styles and scripts that should meet just about every design need. However, if you wish to create your own styles, add them to the file: /_clf7_assets/css/unit.css, and please ensure that they meet the Design Specifications.

Back to top

---

Configure Primary Navigation

The Primary Navigation appears in two places in the CLF Template code. At desktop and tablet resolutions, the Primary Navigation appears at the top of your website content. For smaller resolutions, such as smartphones, the Primary Navigation appears at the top and bottom of your website content. Displaying the navigation twice for smaller resolutions, at the top and bottom of a page, follows good usability practice, helps users navigate to other sections of the site a lot easier and it is a convention for mobile experiences.

When editing your navigation with your own information architecture, be sure to update both sections in your code.

Primary navigation with basic dropdowns

Top Primary Navigation

<!-- UBC Unit Navigation -->
<div id="ubc7-unit-menu" class="navbar expand" role="navigation">
  <div class="navbar-inner expand">
    <div class="container">
      <div class="nav-collapse collapse" id="ubc7-unit-navigation">
        <ul class="nav">
          <li class="active"><a href="#" title="Home">Home</a></li>
          <li><a href="#" title="First Link">First Link</a></li>
          <li><a href="#" title="Second Link">Second Link</a></li>
          <li><a href="#" title="Third Link">Third Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <div class="ubc7-arrow down-arrow"></div></a>
            <ul class="dropdown-menu">
              <li><a href="#" title="Action">Action</a></li>
              <li><a href="#" title="Another Action">Another action</a></li>
              <li><a href="#" title="Something else">Something else</a></li>
              <li class="nav-header">Navigation header</li>
              <li><a href="#" title="Separated link">Separated link</a></li>
              <li><a href="#" title="One more">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.nav-collapse -->
    </div>
  </div><!-- /navbar-inner -->
</div><!-- /navbar -->
<!-- End of UBC Unit Navigation -->

Bottom Primary Navigation

<!-- Footer Area Unit Menu - Mobile Only -->
<div id="ubc7-unit-menu" class="navbar expand" role="navigation">
  <div class="navbar-inner expand">
    <div class="container">
      <div class="nav-collapse collapse" id="ubc7-unit-navigation">
        <ul class="nav">
          <li class="active"><a href="#" title="Home">Home</a></li>
          <li><a href="#" title="First Link">First Link</a></li>
          <li><a href="#" title="Second Link">Second Link</a></li>
          <li><a href="#" title="Third Link">Third Link</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <div class="ubc7-arrow down-arrow"></div></a>
            <ul class="dropdown-menu">
              <li><a href="#" title="Action">Action</a></li>
              <li><a href="#" title="Another Action">Another action</a></li>
              <li><a href="#" title="Something else">Something else</a></li>
              <li class="nav-header">Navigation header</li>
              <li><a href="#" title="Separated link">Separated link</a></li>
              <li><a href="#" title="One more">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!-- /.nav-collapse -->
    </div>
  </div><!-- /navbar-inner -->
</div><!-- /navbar -->
<!-- End of Footer Area Unit Menu -->

Primary navigation with split dropdowns

This custom made primary navigation works only within the unit menu (id="ubc7-unit-menu"). The split dropdowns also accommodate touch behaviours, because the dropdown is activated by the split arrow button while the parent can be used a separate link. View a sample of the split dropdowns navigation.

Top Primary Navigation with Split Dropdowns

<!-- UBC Unit Navigation -->
<div id="ubc7-unit-menu" class="navbar expand" role="navigation">
            <div class="navbar-inner expand">
                <div class="container">
                    <div class="nav-collapse collapse" id="ubc7-unit-navigation">
                        <ul class="nav">
                            <li class="active"><a href="/" title="Home">Home</a></li>
                            <li><a href="#" title="First Link">First Link</a></li>
                            <li><a href="#" title="Second Link">Second Link</a></li>
                            <li><a href="#" title="Third Link">Third Link</a></li>
                            <li class="dropdown">
                                <div class="btn-group">
                                    <a class="btn" href="#">Split dropdown</a>
                                    <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="ubc7-arrow blue down-arrow"></span></button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" title="Action">Action</a></li>
                                        <li><a href="#" title="Another Action">Another action</a></li>
                                        <li><a href="#" title="Something else">Something else</a></li>
                                        <li class="nav-header">Navigation header</li>
                                        <li><a href="#" title="Separated link">Separated link</a></li>
                                        <li><a href="#" title="One more">One more separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Basic dropdown <div class="ubc7-arrow down-arrow"></div></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" title="Action">Action</a></li>
                                    <li><a href="#" title="Another Action">Another action</a></li>
                                    <li><a href="#" title="Something else">Something else</a></li>
                                    <li class="nav-header">Navigation header</li>
                                    <li><a href="#" title="Separated link">Separated link</a></li>
                                    <li><a href="#" title="One more">One more separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.nav-collapse -->
                </div>
            </div><!-- /navbar-inner -->
        </div>
<!-- End of UBC Unit Navigation -->

Bottom Primary Navigation with Split Dropdowns

<!-- Footer Area Unit Menu - Mobile Only -->
        <div id="ubc7-unit-alternate-navigation" class="navbar expand visible-phone" role="navigation">
            <div class="navbar-inner expand">
                <div class="container">
                    <div class="nav-collapse collapse">
                        <ul class="nav">
                            <li class="active"><a href="#" title="Home">Home</a></li>
                            <li><a href="#" title="First Link">First Link</a></li>
                            <li><a href="#" title="Second Link">Second Link</a></li>
                            <li><a href="#" title="Third Link">Third Link</a></li>
                            <li class="dropdown">
                                <div class="btn-group">
                                    <a class="btn" href="#">Split dropdown</a>
                                    <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="ubc7-arrow blue down-arrow"></span></button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" title="Action">Action</a></li>
                                        <li><a href="#" title="Another Action">Another action</a></li>
                                        <li><a href="#" title="Something else">Something else</a></li>
                                        <li class="nav-header">Navigation header</li>
                                        <li><a href="#" title="Separated link">Separated link</a></li>
                                        <li><a href="#" title="One more">One more separated link</a></li>
                                    </ul>
                                </div>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Basic dropdown <div class="ubc7-arrow down-arrow"></div></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" title="Action">Action</a></li>
                                    <li><a href="#" title="Another Action">Another action</a></li>
                                    <li><a href="#" title="Something else">Something else</a></li>
                                    <li class="nav-header">Navigation header</li>
                                    <li><a href="#" title="Separated link">Separated link</a></li>
                                    <li><a href="#" title="One more">One more separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div><!-- /.nav-collapse -->
                </div>
            </div><!-- /navbar-inner -->
        </div><!-- /navbar -->
        <!-- End of Footer Area Unit Menu -->

Back to top

---

Configure Secondary Navigation

The Secondary Navigation option allows site owners to add deeper navigation or side navigation to their content.

Simple, One-level Secondary Navigation

<div class="scrollnav" role="navigation">
  <ul class="nav nav-list bootstrap-sidenav">
    <li><a href="#"><div class="ubc7-arrow right-arrow"></div> Secondary Nav First Link</a></li>
    <li><a href="#"><div class="ubc7-arrow right-arrow"></div> Secondary Nav Second Link</a></li>
    <li><a href="#"><div class="ubc7-arrow right-arrow"></div> Secondary Nav Third Link</a></li>
    <li><a href="#"><div class="ubc7-arrow right-arrow"></div> Secondary Nav Fourth Link</a></li>
    <li><a href="#"><div class="ubc7-arrow right-arrow"></div> Secondary Nav Fifth Link</a></li>
    <li><a href="#"><div class="ubc7-arrow right-arrow"></div> Secondary Nav Sixth Link</a></li>
  </ul>
</div>

Complex, Multi-level Secondary Navigation

Keep in mind that for good usability and a functional responsive website, it's always best to trim down and simplify your navigation as much as possible.

Data attributes

Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a css selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.

To add accordion-like group management to a collapsible control, add the data attribute data-parent="#selector". Refer to the demo to see this in action.

Markup

<div class="accordion sidenav simple" id="a4">
    <!-- Parent 1 -->
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#a4" href="#c1">
                <div class="ubc7-arrow down-arrow"></div>
            </a>
            <a class="link" href="#">Parent link #1</a>
        </div>
        <div id="c1" class="accordion-body collapse">
            <div class="accordion-inner">

                <!-- Children Content -->
                <div class="accordion" id="a5">

                    <!-- Child 1 -->
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#a5" href="#c3">
                                <div class="ubc7-arrow down-arrow"></div>
                            </a>
                            <a class="link" href="#">Child link #1</a>
                        </div>
                        <div id="c3" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <a href="#">
                                    <div class="ubc7-arrow right-arrow"></div>
                                    Grandchild #1
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- End of Child 1 -->

                    <!-- Child 2 -->
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#a5" href="#c4">
                                <div class="ubc7-arrow down-arrow"></div>
                            </a>
                            <a class="link" href="#">Child link #2</a>
                        </div>
                        <div id="c4" class="accordion-body collapse">
                            <div class="accordion-inner">
                                <a href="#">
                                    <div class="ubc7-arrow right-arrow"></div>
                                    Grandchild link #2
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- End of Child 2-->
                </div>
                <!-- End of Childen -->
            </div>
        </div>
    </div>
    <!-- End of Parent 1 -->

    <!-- Parent 2 -->
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#a4" href="#c2">
                <div class="ubc7-arrow down-arrow"></div>
            </a>
            <a class="link" href="#">Parent link #2</a>
        </div>
        <div id="c2" class="accordion-body collapse">
            <div class="accordion-inner">
                <a href="#">
                    <div class="ubc7-arrow right-arrow"></div>
                    Child link #1
                </a>
            </div>
        </div>
    </div>
    <!-- End of Parent 2 -->

    <!-- Parent 3 -->
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#a4" href="#c5">
                <div class="ubc7-arrow down-arrow"></div>
            </a>
            <a class="link" href="#">Parent link #3</a>
        </div>
        <div id="c5" class="accordion-body collapse">
            <div class="accordion-inner">
                <a href="#">
                    <div class="ubc7-arrow right-arrow"></div>
                    Child link #1
                </a>
            </div>
        </div>
    </div>
    <!-- End of Parent 3 -->
</div>
</div>

Back to top

---

Configure Breadcrumbs

To add Breadcrumbs to your site, use the following code as a guide for your own page navigation.

For units with a faculty association, be sure to make the first breadcrumb a link to your faculty's homepage.

<!-- UBC Unit Breadcrumbs -->
<ul class="breadcrumb expand">
  <li><a href="#" title="Faculty Name">Faculty Name</a> <span class="divider"></span></li>
  <li><a href="#" title="Unit Name">Unit Name</a> <span class="divider">/</span></li>
  <li class="active">Page Name</li>
</ul>
<!-- End of UBC Unit Breadcrumbs -->

Back to top

---

Back to top

---

Content Layouts

With the embedded 12-column fluid grid system in the underlying code of the CLF, creating columns for your content layout is easy and flexible. The CSS classes that define column widths range from 'span1' to 'span12'. When creating columns for your content layout, you can create anywhere from 1-12 columns, just as long as they all add up to the total 12.

<!-- 1 Column Content Layout -->
<div class="span12">
  Full column content...
</div>

<!-- 2 Column Content Layout (50/50) -->
<div class="span6">
  First column content...
</div>
<div class="span6">
  Second column content...
</div>

<!-- 2 Column Content Layout (66/33) -->
<div class="span8">
  First column content...
</div>
<div class="span4">
  Second column content...
</div>

<!-- 3 Column Content Layout (33/33/33) -->
<div class="span4">
  First column content...
</div>
<div class="span4">
  Second column content...
</div>
<div class="span4">
  Third column content...
</div>

Back to top