CSS – frameworks
A CSS Framework
is a collection of pre-built cascading style sheets (CSS) designed for a specific layout and styling of web applications. These frameworks are usually well documented, configurable, and tested for popular browsers. CSS frameworks are increasingly used as a best practice for developing web applications as the benefits of using them outweigh the drawbacks.
A CSS Framework provides these advantages:
- Reduced development time: Developers are able to focus on the core functionality of the application versus the look and feel by using pre-built CSS classes for layout and styling.
- Improved user experience and reduced training needs: Due to the consistent look and feel across various web applications.
- Accommodate various browser versions and screen resolutions: You can see what browsers are support so you do not have to try to build a CSS that covers all the quirks.
- Documentation: Very few in house frameworks have documentation.
Some of the drawbacks of using a CSS framework include:
- A learning curve to understand a framework and its configuration options.
- Potentially being locked into a specific layout and navigation structure.
Some of the popular CSS Frameworks are listed below:
- OneUI (from IBM)
- Blueprint (for information on using Blueprint with XPages, see David Leedy's Notes in 9 videos at notesin9.com)
- YUI 2 (from Yahoo)
- iUi (for mobile applications)
When picking a framework, make sure it supports using classes and not IDs. XPage control IDs are dynamic and created when it is rendered, so you can not be sure you have the correct ID.
Instead of using
you would use
Select your framework before starting to code. It is not that easy to change the layout after the application is built.
Using OneUI V2
All the resources for the OneUI framework (style sheets and images) are already accessible because it is delivered as part of the Domino server, Notes client, and Domino Designer. You do not have to import them separately for each application. Classes for Dojo are also included. This makes it easier to use this framework within Domino applications.
Different HTML tags that are used for web development are referred to during the lesson. All the HTML tags and attributes are supported by XPage and can easily be embedded in the code as-is. Most HTML are entered through the source view where you see the actual XML source for the XPage.
For more information, see the OneUI Developer document at http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/components/framework.htm
Using the OneUI classes
The OneUI provides class
to render the basic layout of the page. There are classes to style the banner, navigation, footer content, and more.
The following figure shows the One UI breakout:
is the main container for the rendered web page. This is where the background color and the width of the site are set.
sits at the very top of the UI and contains application links, utility links (help, log in), and the application logo. It picks up the background of the page. It is plain white in the figure above.
The title bar
contains application, or sectional, navigational tabs. It also can contain a search component.
The place bar
sits under the title bar, to show you what "place" you are in. It usually indicates an area that you can join, such as an activity or community. The bottom border of the title bar serves as the top border of the place bar.
is the body of the page. It contains the left column, content, and right column.
Left column – Local navigation
The left column
is usually the navigation within a section of the application. For example, a time entry application would have a section that may take you to projects, time reports, and so on. In the Time report section, the application navigation would be to show submitted time reports, all months, and unsubmitted time reports.
area is where the forms and views are displayed.
Right Column – Sidebar
The right column – sidebar
provides additional sections that can be viewed by the user. This is similar to the left column and can be used for navigation based on how you want to layout your page.
sits at the bottom of the page and contains links to Help and other features.
The basic HTML layout of the page is:
<body class="lotusui tundra">
In general, when linking CSS into your page, the following order must be used:
1. Base Styles: required
2. Component Styles: required
3. Layout Styles: optional
4. Base Theme Styles: required
5. Component Theme Styles: required
6. Layout Theme Styles: optional
7. Dojo Styles (dijit.css): optional
Note: this file is from dojo's dijit and theme directory.
8. Dojo Override Styles: optional
9. Dojo Override Theme Styles: optional
10. Product-Specific Styles
For the OneUI, the CSS file order is:
3. Dojo File: dijit.css (optional)
4. dojo.css (optional)
5. dojoTheme.css (optional)
6. your custom css
When working with any framework, break up your model page structure into custom controls.
One of the best ways to build your application is to create a custom control for each section of the framework. This way you can easily find the section to change and also can:
- Modularizes page structure.
- Provides more flexibility going forward.
- You will probably want to in the future anyway so easier to do it now.
The follow shows an example of the custom controls for the OneUI:
Do not forget to come up with a naming standard to help make your life easier. Here we use layout_sectionname
for page section and ccControlname
for content sections.
The mainframe control contains all the other layout controls, so it is what is placed on the XPage.
The panel named mainframe has the lotusMain style applied to it. All a developer has to do now is to create an XPage, drag the mainframe custom control on to it, and the custom control that contains the content they want.
The CSS files you create can be placed either in the NSF or in the /data/domino/html folder on the server.
- Available to all web application on the Domino server
- Not visible in design pane. Use dummy CSS to get around this.
- Can be automatically GZIP compacted - ( server configuration).
- Can use dummy CSS to include in the NSF - ease of updates, see in design pane.
- Downloaded only once to the browsers.
In the NSF
- Available only to current application.
- Visible in design pane.
- Easy to access and edit.
- Downloaded to the browser for each application it is used in,
Take care to include only once on XPage (if on each control, it will be downloaded each time)
The CSS Frameworks used across application should be stored on Domino and a CSS that has changes and additions is stored in the NSF. This lets you make minor changes needed for the specific application when needed.
Parent topic: 5.0 User interface considerations