Subscribe via Feed

Themes and CSS Frameworks

Declan Sciolla-Lynch, Jul 16, 2009 12:06:25 PM

When writing sample XPage applications I tend to use the oneUI theme that is distributed as part of the IBM Lotus Domino server, the main reason being that it can make the sample applications look good while reducing the size of the NSF file.

When it comes to creating your own internal applications you may not want to use oneUI as it contains a LOT of CSS that you may never even use so that will mean you need to build your own style sheets that will include layout stylings, font settings and color schemes. Fortunately you don't need to start from scratch, there are a couple of CSS frameworks that work well with XPages and it's very easy to create a theme document for them.

The main CSS Frameworks that I have been looking at are Blueprint ( Modified MIT License & GPL License ) and Tripoli ( GPL License ) and a merging of the two, plus some bits from a few others, called BlueTrip ( GPL License ). When selecting a CSS framework one of the important things to look at is if it uses ID's to apply it's styles or if it uses classes. As XPages dynamically changes the ID's of elements rendered to a web browser you will need to use a CSS Framework that only deals with classes. You can quickly determine this by opening the CSS file and if you see any #'s at the start of a style definition then you know it's using ID's so avoid that particular CSS framework for use in XPage applications. So far I have found that the YahooUI ( BSD Licensed ) uses some ID's for layout controls so it it probably a bad choice.

Once you have picked the CSS Framework that you want to work with adding it to your application is very easy. In your Domino Designer client got the Resources -> Style sheets section in your NSF file and import the CSS files that are part of the framework. In Blueprint these consist of screen.css, print.css and ie.css. The main file, screen.css, will reset the browsers css to basic settings so that all browsers start with the same defaults, it then contains settings for standard elements like check boxes, input fields, buttons and fonts so that these elements will appear the same across any browser and lastly it contains a grid layout system that you can read about on the Blueprint website. This grid system is where a framework like blueprint will save you a lot of time.

The other two files are not necessarily needed, ie.css contains special css hacks so that some of the framework will work in Internet Explorer 6, if your not planning on supporting that browser then you should just leave it out entirely. print.css contains special css definitions that are only applied if a web page is printed. Currently in Xpages there is no way to specify the media type for a CSS file that is added either as a resource on the XPage or via a theme so it is probably best to leave this file out also but if you don't mind editing the css file you can wrap the css in an '@Media print{}' rule to work around this current limitation. Your theme document will look something like this when finished :


text/css
/screen.css


text/css
/print.css


text/css
/ie.css


text/css
/application.css

The extra theme reference to application.css would be your own custom css resource where you will add in all your own layout and color schemes for the application. As you can also see I am using the rendered= method to make sure the css for Internet Explorer 6 does not get sent to Firefox or other web browsers.

Using a CSS framework can help you cut down on some of the more basic parts of building your XPages web application. If your not interested in using the grids portion of blueprint then even it's reset and standardization sections will ensure that all browsers start on a level playing field.



10 responses to Themes and CSS Frameworks

David Leedy, August 23, 2010 3:03 PM

Are you talking about one of my NotesIn9 videos? I assume so.

In the theme documents that I use for blueprint there's a little server side javascript to determine if the ie.css file should be rendered to the browser or not. That's if it's ie6. I guess you could do additional tests for IE7 or 8. I've just not done that yet and not know if that's necessary. I'm not that up on the differences between the versions that ie.css addresses.

Regarding the other stuff. From my understands, XPages in 8.5.1 can't handle media types. So there's no print or screen/projection available right now. I believe that has been fixed in 8.5.2


Chris Roberts, August 23, 2010 2:35 PM

I was looking at the blueprint README and noticed this code for ie.css

<!--[if lt IE 8]>
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->

In your video this line is replaced in xpage theme by a code which deals with IE6
Could you explain why please ?
Many Thanks
Chris


David Leedy, July 27, 2010 4:57 PM

Cool! Glad to be of help. Thanks for the comments on NotesIn9. I really appreciate that!!! Lots more coming.

Dave


Lenni Sauve, July 27, 2010 4:41 PM

That clarifies things beautifully ! I had viewed your BluePrint screencast which is another reason I decided to use BluePrint. And I find your screencasts to be very helpful - just enough to take in at one time and very explanatory. So please do keep making them for us.

I think I understand now how it all works together. Thank you so much for your help!


David Leedy, July 27, 2010 4:35 PM

Lenni,
Just saw your 3rd post.
Re 3 - I assume that if you extend webstandard you won't really need to do anything else. You should be all set for the dojo stuff. If you really are trying to use the lotus classes then extend oneUI

Re 5 - Make sure that you're only using CSS Classes for Xpages Controls. Don't use #ID's. XPages will change the ID Name of the controls at rendering time. So stick with classes.

Dave


David Leedy, July 27, 2010 4:26 PM

Hi Lenni,
I'll take a stab at some of your questions. :-)

oneUI and Blueprint are different animals. I've not done a ton with oneUI - I prefer Blueprint for various reasons and use that instead of oneUI. But you have a good question, what about the lotusclasses? In the theme document what you want to do is EXTEND one of the server themes. I think that might have gotten missed in the original post by Declan. There are two - webStandard and oneUI. Since I don't want the bloat of oneUI I extend webStandard when working with Blueprint.
<theme extends="webStandard">

Why extend? Because that loads the files needed for the Dojo Controls like the date picker. You could extend oneUI and have access to the lotus classes but I'm not sure that makes sense really. You're paying too much for too little benefit I think. But you really want to extend WebStandard.

oneUI is not grid based. BluePrint is. So I think you really need to decide how you want to control the layout of your site and go from that. If you want the grid. Then use BluePrint and extend web standard. If you want oneUI's layout then just stick with that.

I did a screencast on using BluePrint in XPages on NotesIn9
http://notesin9.com/index.php/2010/02/03/episode-011-speedgeeking-xpages-and-ui-layout/

The stuff on the server theme is this... Currently Blueprint files need to be added to each and every NSF that wants to use it. This will work from the domino server and also XPages in the Notes Client just fine. But if we didn't want to add it to each NSF, we could install the BluePrint files on the server itself. And we could even extend Blueprint. That's really cool if you are doing a lot of web only apps, but since it's not in the NSF it would replicate to the client. Technically I think you can install it in the bowels of the client but that seems silly. Just use the NSF if you need the client to work.

The oneUI Dummy file is actually really cool. What that does is if you add it as a resource to your XPage or custom control, then in the style section you'll see the names of the available classes. Without it you need to already know what they are. Think of it as a defination file.

That's on of the things about themes. Using a theme is a little tougher to develop I think because you don't really get the rendering in DDE. But if you add the CSS files directly to a page, then you'll see a lot of the style rendering and also the list of classes.

To add a style to a viewControl - you need to select the and go to the Style properties and add your class.

Sorry I can't really help you with some of the oneUI specific questions. I don't like it so I don't use it. However I did recently learn of one killer feature if you're working with International Apps. It's very easy to translate your page from "left to right" reading to "Right to Left"

I'm not a CSS expert. So I don't want to have to learn and be stuck with all the lotusFooter stuff. I want to learn how to write the CSS to get the look and feel that I want. I don't want all my stuff to look the same - though obviously that can be a benefit depending on your situation. BluePrint gives me a Grid. That makes it VERY easy to place my content on the screen. Then I need need to work on getting the content to look how I want it to.

Hope this helps! Let me know if you need anything else.


Lenni Sauve, July 27, 2010 4:15 PM

Clarification (so that you don't think I'm completely bonkers!):

Re #3 above - our Notes clients have different configurations so I can't just reference the files locally.
Re #5 above - I can follow instructions in information posted, but I am not getting the expected results - so I'm not knowing if this is a result of problems with the themes, or if I'm not understanding how the CSS is invoked. Or hey, maybe both.


Lenni Sauve, July 27, 2010 2:49 PM

sorry, accidentially submitted before finished...
...In looking at the IBM Lotus User Interface Developer Documentation, I'm thinking that this is what is described as a Grid, and I see where there is code for a tables.css, but how do I actually 'call' that tables.css if I create it?

Thanks so much for any clarification you can provide.


Lenni Sauve, July 27, 2010 2:45 PM

Hi Declan!

I have just completed an application which uses xPages for both the web and the Notes client, and am now applying the look and feel. I should mention that I am using quite a bit of dojo in my application. I have read everything I can find on themes and css, including your series above, the BP207 Make your xPage Apps "Pop!" with CSS and Themes slides that you and David Leedy presented at Lotusphere 2010, and learned a lot about xPages by completing your tutorial. I have several questions regarding themes and css, and I'm hoping that you can clarify these for me:

1. If I use the blueprint theme, I'm understanding from the above that I would use it instead of the oneUI theme, because the oneUI theme contains css that I may never use? If I don't use the oneUI theme, how does the CSS recognize lotus classes?
2. If I use the oneUI theme:
a) Could I just include the blueprint files as resources in that theme to get the equalizing of all browsers and the grid layout capabilities?
b) In the wiki there is an article that contains an area called Using Themes. I followed the instructions there to create a theme called oneuiv2-core, which extends webstandard. Then I followed the instructions to create a theme called oneuiv2-default, which extends oneuiv2-core. However, the Redbook Wiki: Best Practices for Developing Web Applications Using Domino 8.5, there are instructions for creating a oneui_v2_core theme, but that extends oneui_basic. So do I need to create a oneui_basic theme too? Does that extend webstandard? I'm assuming that the extra step is because I'm using 8.5.1 and not 8.5.2, where I hear that oneuiv2 is included automatically? Although I'm thinking there should be the beta version with 8.5.1 - right?
3. Because I am also using these themes for the Notes client, and page 36 of the slides for your presentation identified above says "server based themes cannot be used by xPages in the Notes Client", I'm thinking that inside of each of these themes, instead of referencing /.ibmxspres/global/theme..... inside the resource href tags, I should just be putting the name of the css file and then including the file in my CSS files within the database. Would this also be true for webstandard too?
4. I've also been reading about and have taken a copy of OneUIDummy.css. But I don't really understand what it is for. Is this just a reference that I keep handy to know which selections I can make from oneui? Or do I include it in the files in the database and, if so, I don't understand how it really gives me a leg up. Do I put my code in it inside of the curly braces??
5. Lastly, I'm so sorry to be so dense about this, but I still don't understand how exactly I call or reference either the theme or a CSS, especially for the Notes client. My application isn't as straightforward as having a lotusFooter, lotusContent, etc. How can I apply specific styling say to a viewPanel on a Custom Control? In looking at the


Sean Cull, July 29, 2009 3:21 PM

Thanks for these articles, some basic questions

1) do you need a theme definition resource in each db or can the server use a server based one ? - it seems like you need one

2) where is the default theme set on the server and can I get a copy of it ?

3) Am I right in thinking that it is the theme document that generates the xspTabbedPanelOuter and similar tags i.e. an incorrect theme would mean no tags

4) are references to the themes case sensitive in the properties - there are lots of variations of oneui floating about in the demos

5) are themes known to be flakey in 8.5.0 FP1. I get all sorts of weird behavior like deleting the blue theme document ( from the xpages wiki ) breaks the oneui theme even though it is not referenced. the other one is not being able to get the tabbed panel to appear correctly - I am just using default, oneui and blue from the demos - I have not extended them

Thanks a million Sean