UC Santa Barbara Graphic Identity
The UC Santa Barbara utility bar offers a simple and effective way to connect our family of campus websites. It reinforces our graphic identity and lets website visitors know where they are at all times. If you choose to feature the utility bar on your website, no content or padding should appear above it. The utility bar should only be used in the given color combination. The search function can be adapted to search your local site. If you have questions about implementation, email firstname.lastname@example.org.
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.
ucsb-web-utility-bar/ ├── _/ │ ├── components/ │ │ ├── js/(pre-minified js) │ │ ├── sass/(sass files) │ ├── css/ │ │ ├── main.css (compiled & minified css) │ │ ├── ie-8.css (compiled & minified css) │ ├── js/ │ │ └── main.js (compiled & minified js) ├── images/ │ ├── ucsb-wordmark, search icon, etc ├── utility-bar-nosearch.html └── utility-bar.html
The utility bar is responsive. Each breakpoint can be customized to your site's needs.
/* Extra small devices (phones, less than 480px) */ /* No media query since this is the default - mobile first design */ /* Large phone (480px and up) */ $largephone: 480px; /* Small devices (tablets, 768px and up) */ $tablet: 768px; /* Medium devices (desktops, 992px and up) */ $desktop: 992px; /* Large devices (large desktops, 1200px and up) */ $largedesktop: 1200px;
You can integrate your site search using the utility bar search box. To better accommodate custom searches, you can specify the search box's placeholder text. If your site doesn't have a search mechanism, you can create a search engine through Google Custom Search.
* The search box is optional for your website. You may incorporate the UCSB utility bar without the search box.
The utility bar may not be edited or altered in any way beyond the options presented when embedding.