Miscellaneous Notes

Not everything fits into a perfect box. If you have checked all other articles in the Web Learning Center and you are unable to find what you are looking for, review these notes for miscellaneous nuts and bolts.

Bootstrap Columns Functionality

The global stylesheet is based on Bootstrap 3.

Bootstrap columns have several different options for changing column width based on different breakpoints. This is especially useful for complex layouts that need different sized columns for better readability at different screen sizes.

Columns within a row wrapper must all add up to 12, however, we can set multiple sizes for a given column. You may see the most common method is defining a column as .col-sm-3. This will size the column to three at every breakpoint at 768px wide and above. Anything less than 768px wide will fallback to a 100% width.

Multiple column sizes may be chained together on an element. For example:

<div class="col-sm-6 col-md-4">

Modifiers for Each Breakpoint

-xs- < 768px (mobile size)

-sm- >= 768px (tablet portrait and larger)

-md- > 992px (tablet landscape and larger)

-lg- > 1200px (13" screen and larger)

Compiling Sass

Many of our stylesheets such as the main global CSS, the homepage, virtual tour, etc. use Sass to compile a rendered CSS file that the browser reads. This helps in managing the complexity of our CSS across the board. Sass must be compiled on your local machine with the Sass script, and the rendered CSS file is what is uploaded and published.

Every Sass stylesheet depends on core.scss, which contains all of the variables and mixins. You may view that file to see a listing of all of the common color and font variables.

Icon Web Font

The custom Cal Lutheran Icon Web Font icon web font loads on every page and offers a variety of simple one-color shapes to be used as visual elements to aid in navigating the website. The icons are accessed by adding "icon-" before the name of the icon in the CSS class of an element. They are placed in the leading part of that element, however, with some overrides they can be placed after the element contents. Although the icon class can be declared on any type of HTML element, it is recommended to use the <i> tag on it's own. 

For example:

<i class="icon-bubbles"></i>                       

Live Search JS

Live Search is a jQuery plugin that is incorporated into global.js that loads on every page. You will need to initiate it on your page with a certain set of parameters:

$().liveSearch({
    // selector for the wrapper of the element containing the elements you are searching against
    filter_parent: '.directory',
    // selector for what elements' text you searching for
    filter_item: '.directory>tbody>tr',
    // search field placeholder text
    placeholder: 'Search Offices',
    // callback function during search
    on_search: function(){ $('#alphabet-list').hide(); },
    // callback function on clicking the clear button
    on_clear: function(){ $('#alphabet-list').show(); }
    // set a category for Google Analytics event tracking
    ga_cat: 'A-Z Directory'
});

Live Search Input Form

Use the following markup to designate where in your page you wish to include the form input:

<form id="live-search"></form>