The following are vital pieces of documentation for create websites at UNL.
- Grid Framework - Separate your content into a grid layout, adjusted for various breakpoint control.
- Content Bands - Harness to power of full-width with presentational displays to support your content.
- Image Templates - Image styling is available to easily dress up the visuals on your website.
- Color Palette - Discover which colors make a great design in the UNL Web Framework.
An Intro to the Framework
How does the Framework affect your content?
The WDN is focused on working with developers to help make their content shine within the constraints of the Framework. We acknowledge that this design, like any design, imposes constraints. But constraints are not a design goal. It is not a goal for the Framework to limit individual developers' creative content work, but rather provide users a consistent visual, and functional, experience. We strongly believe that, "content is king." Developers have the freedom to develop content styles, in their own namespace, to appropriately and effectively present content, while maintaining a strong UNL voice and brand. A consistent Framework allows the University to quickly adapt to changes and opportunities driven by the restless technologies that underlie the web. For instance, UNL was able to move faster than any other university to embrace mobile compatibility through responsive design in 2012, with Version 3.1 of the Framework. Version 4.0 of the Framework took responsive design in the opposite direction, embracing the larger displays and higher resolutions emerging on desktops and laptops with an expanded content area and a refreshed visual design. In the 4.1 version of the Framework, the canvas was futher expanded by doing away with a maximum width. The UNLedu Web Framework has a well-earned track record of embracing emerging technologies in design and development to provide a robust and scalable 'wrapper' that carries your web content to the world.
How do you use the Framework?
The Framework is distributed as standard HTML. Using it with your particular content management system or hosting environment is fairly simple. To use the Framework you should have a basic understanding of HTML. For example, you should understand what elements and attributes are and the basic structure of an HTML document.
The easiest way to take advantage of the Framework is to use UNL's content management system, UNLcms. This system has already implemented the Framework, thus abstracting away some of the more technical aspects of putting your content into the right places.
For others that have different system needs, let's go a little bit deeper, into what the Framework is made of. To maintain the consistent look of a page, the Framework uses a "template" file structure that is separated into regions that either must not be edited or can be edited. The non-editable regions define basic page structure elements and provide for common university elements to be shown on all pages. The editable regions give developers the open canvas to highlight their content. Dreamweaver templates, a special HTML syntax, are used to define the boundaries of these content regions. Originally, people would use these "template" files with the Adobe Dreamweaver application and the application would enforce the edit constraints of the regions. However, because of the syntax of the template regions, any editor can be used as long as you understand where you should and should not be making changes.
The non-editable regions have basic markup and usually some sort of instruction to include the content of a separate, centrally maintained HTML file. These include instructions are one piece of the Framework that is difficult to support on various content management systems and hosting environments, due to the variability of server-side languages used. The "template" files come in a variety of language formats to support some of the common server-side languages used on campus, like SHTML (HTML with SSI enabled), PHP, and JSP. In order to use the "templates" properly, you should have a good understanding of how your hosting environment needs to handle these include instructions. In some rare cases, you make have to slightly edit the "template" files to change the include instructions to something your server-side language supports. See the following illustration for a visual of how the include instructions are supposed to work. The include instructions are used because the content in those files has the potential to change at any time the Framework changes. By using the instructions rather than including the static content, you ensure that you stay up to date with the latest page structure expected of Framework pages.
- Fixed (recommended default)
The editable regions allow for you to enter the markup that is appropriate for the specific area of the page. Some regions have specific markup expectations, like the
contactinfo region or the
navigation region. Other regions are completely open for you to make your content shine, like
maincontent. The Style Book that accompanies each Framework release outlines the general expectation for each of these editable regions.
Developers often have questions about how to use the Framework with vendor provided applications. It is important to note that the Framework is not a header and a footer. Although it may appear like that, the Framework includes the markup for an entire page. To integrate a vendor application, you must be able to control the page HTML generated by the application. This way you can put the content, navigation, etc of the application in the appropriate areas for the Framework. Creating image slices (insert logo here) or other "piecemeal" implementations are not compliant.
What resources does the Framework have for your content?
So you have a basic page working with the Framework. Now you'd like to start putting in your content and making things look great. The Framework includes a number or widgets and styles that can be used throughout a page to make it fit your content needs. Have a look at our resources page for some samples of things that can be done.
When and how do you (or system administrators) sync a server with the template dependents?
Changes to the Framework happen frequently, to adapt to new browsers, to add new functionality, to repair reported bugs, and to improve the user experience. A new release is made about once a month. Sever admins are encouraged to check for a new release every night and sync if a new release is available. Changes to the release workflow have allowed for developers to know when a release is made by monitoring the release feed. Learn how to sync.