The UA Template is based off the Bootstrap framework. If you are unfamiliar with a front-end framework such as Bootstrap, we recommend you read through their documentation before starting with the UA Template.
There are many aspects of Bootstrap, such as certain components or JavaScript plugins, that are not covered in the UA Template documentation, so please refer to Bootstrap's documentation for a complete picture of what the UA Template can offer you.
The UA Template includes all front-end resources to help you build a web site in the style of the new ua.edu.
You'll find the following directories and files, logically grouping common resources into an assets/ folder. The docs/ folder includes example implementations of all front-end UI elements as well as several sample pages.
ua-template/
├── assets/
│ ├── css/
│ │ ├── style.min.css
│ │ ├── custom.css
│ │ ├── ua-logos/
│ ├── js/
│ │ ├── scripts.min.css
│ │ ├── vendors/
│ ├── img/
│ └── fonts/
├── docs/
├── img/
├── index.html
The UA Template automatically includes all currently available UA logos/identifiers. To ensure a consistent look among all UA websites, you are highly encouraged to utilize these assets as is.
Every single logo has been sized to fit exactly within the header space. Please see the Logos section in the documentation for more information.
The UA Template CSS is already compiled and minified, so modifications to that file directly are not recommended. Instead, we recommend placing new style rules into the custom.css file.
An empty CSS file assets/css/custom.css is provided with the template for you to place any custom CSS rules. This file is included in the header of all sample pages and when building your site, we recommend you include this file.
Navbars are responsive meta components that serve as navigation headers for your application or site. They begin collapsed (and are toggleable) in mobile views and become horizontal as the available viewport width increases.
Since Bootstrap doesn't know how much space the content in your navbar needs, you might run into issues with content wrapping into a second row. To resolve this, you can:
If you find your menu is overflowing at certain sizes, our recommended solution is to reduce the number of menu items. Your main nav should focus on the top five or six pages you want people to visit. Try to keep the labels to one or two words at most.
A more advanced method to deal with overflowing menu items is using Bootstrap's responsive utilities. This allows you to display all menu items at a certain size and hide less important items on a smaller screen size.
The final method to dealing with overflowing menu items is utilizing our custom Menu Overflow jQuery plugin.
To use, insert <script src="/assets/js/menu-overflow.min.js"></script> at the end of your footer, after jQuery and before the UA Template scripts.min.js file.
This plugin will calculate the width of the screen compared to the width of the main nav items and, if necessary, wrap overflow items into a "More" menu.