Template Options
Body Area Only
In cases where the application requires no navigation and will utilize the entire body area for functionality and user introduction information, the body only area can best accommodate this design.
An example scenario would include a single page application or home screen.
Horizontal Main Nav
Main nav is optional and can be displayed horizontally or vertically within the primary display area. Horizontal and vertical main nav cannot be used together. Choosing to use horizontal main nav will depend on content and real-estate. Smaller menus with short text will best accommodate this design. At no time should a nav element wrap breaking the design.
An example scenario would include multiple navigation elements (5 or less) and/or navigation elements with short text.
Horizontal Main Nav with Children
There may be scenarios in which the main nav categories will require child navigation. Child navigation only exists after navigating away from the homepage.
An example scenario would include a multiple page application with nested navigation.
Horizontal Main Nav with Right Sidebar
If a design requires an isolated section for supporting or related content, using the optional right column sidebar will best accommodate this design. This section can be used for links outside of the site that relate to the body content or for help files and tips. Right sidebar can exist in body area only, with vertical main nav, or horizontal main nav.
Vertical Main Nav
Main nav is optional and can be displayed horizontally or vertically within the primary display area. Horizontal and vertical main nav cannot be used together. Choosing to use vertical main nav will allow for greater flexibility with less real-estate concerns as using horizontal main nav.
An example scenario would include a multi-page app with many menu items or lengthy text that cannot fit horizontally.
Vertical Main Nav with Children
There may be scenarios in which the main nav categories will require child navigation. Child navigation only exists after navigating away from the homepage and will always reside nested within vertical main navigation.
An example scenario would include a multi-page app with nested navigation.
Vertical Main Nav with Right Sidebar
If a design requires an isolated section for supporting or related content, using the optional right sidebar will best accommodate this design. This section can be used for links outside of the site that relate to the body content or for help files and tips. Right sidebar can exist in body area only, with vertical main navigation, or horizontal main navigation.
Example Login Screen
If requirements include a Login screen, start the page with available sample markup. Validation is not included.
Widgets
A library that consists of Bootstrap and JQuery elements as well as sample code snippets for more complex UI elements such as carousel, data grid, and responsive tables.
HTML5 & CSS3
HTML5 & CSS3 are the latest and recommended syntax for front-end development. To keep pace with the evolution of design and for maintainability purposes, the template was built using these two technologies. Both are largely supported in all modern browsers.
The project includes two unique css files; som-custom.css and styles.css. som-custom.css was used to create the templates which includes Bootstrap overrides and custom classes. style.css is available to development teams to extend front-end development. Default media queries have been added to the file. Bootstrap and the template were build mobile first. All css should be applied to the mobile device by default and then altered in media queries for tablet and desktop.
Bootstrap
Bootstrap is a powerful front-end framework for faster and easier web development. The template leverages grid scaffolding and navigation for responsive layouts. It also offers development teams consistent UI features such as typography, forms, buttons, and icons.
JQuery
JQuery is a free, open-source JavaScript library designed to simplify client-side scripting of DOM elements. The JQuery library is included in the template to aide in front-end development.
Media Queries
Combined with a fluid grid, media queries enable media device responsiveness based on screen resolution. Standard breakpoints have been used in the template but there are several media queries available in the mediaqueries.css file to help with project requirements.
Cross Browser Tested
The templates were cross-browser tested with IE8, IE9, IE10, Firefox, Chrome, and Safari.