This was a team project for the University of Tennessee at Chattanooga, my alma mater and current employer. I was hired by UTC as web development specialist in late 2012, and worked with a cross-discipline team on the redesign, information architecture, 10,000 page migration to CMS and user training for over 300 web editors.
The design was built on Bootstrap, a versatile framework that includes a flexible, responsive grid system, icon font, and LESS/CSS styling for nearly any imaginable UI element. The site looks great on desktop, tablet and mobile phone; images are resized according to users’ maximum screen width by Adaptive Images.
We worked with OmniUpdate to port the functional HTML templates to the OU Campus Content Management System.
A companion WordPress theme was created to retrofit the UTC Blogs MultiSite. Enhanced WordPress RSS feeds in the media namespace populate news feeds on the home page.
Deets for Devs
For initial HTML development, I used Kickstrap.
I found a lot of great examples and code at WrapBootstrap and Bootsnip.
Our custom CSS files work for both the OU Campus site and WordPress blogs, because templates for both are built on Bootstrap… on WordPress, we use a child theme with a BootSwatch style custom CSS.
We host our own CSS, but pull fonts and JavaScript libraries from CDNs. Off-Canvas, drop-down sidenav was custom built using Bootstrap components, but now Jasny’s Bootstrap 3.0 fork (jasny.github.io/bootstrap) has a similar extension.
LESS Files: along with the entire development site (was easier to zip this way). Download & unzip, it will run as a local site if you like…
Start with kickstrap.less, see what it includes — mostly the standard Bootstrap LESS files. Next look at theme.less, which jumps to Kickstrap/themes/utcms/theme.less, which has all of the custom stuff and some comments. Read the comments and then look at the individual files to see what’s going on: basically, anything that’s commented out uses the base Bootstrap CSS. At some point, I would like to change this workflow to pull the standard Bootstrap CSS from a CDN, and only load the override CSS.
Most of our specific changes are in variables.less, navbar.less, main.less (final custom overrides and tweaks) and logotype.less (for the header). I used CODA as an IDE, with CodeKit as my LESS compiler.
No comments yet.