With all the ranting and raving by people (me), about CSS, and simple Html markup. I’ve had quite a few questions similar to “what exactly does that mean?” I’m going to take a few minutes and “decode” where we’re heading with our Html markup and CSS, and what the big drive was for our Frio release.

Prior to our Frio release, there was very little importance placed on the actual markup rendered for our controls and pages. In fact developers were instructed to use tables to control layout!  Of course this resulted in some horrible markup with deeply nested tables and made styling our content a much more monumental task.

During the Frio release we introduced our new “Public Web” and added new pages for Commerce and CRM tasks. Much of this code was outsourced and we imported some 40 new CSS files to style this new code. This code had pretty much the same “business logic first” mentality and had very bloated markup.  Trying to get a consistent look and feel by editing the CSS was pretty much impossible.  This exposed a very big problem with the current ASI UI approach.

Being the web standards junkie and loud obnoxious person that I am, I raised enough of a stink that I was tasked with the “CSS consolidation” of newly introduced CSS with our legacy, and in the process attempted to simplify much of our HTML.

Frio is far from our “end all” on our journey to clean removal of styling from Html,  but it’s drastically improved from our prior release.  In our upcoming “Coleto” release you’ll see even cleaner Html with much more emphases placed on 508 compliance and cross browser friendly CSS and Html. For now though, I’m going to talk about Frio.

In Frio, the theme was “simplify first, pretty second”. The Css consolidation was not intended to make our product very “web 2.0” or “wiz-bangy” (that’s for Coleto!).

Instead of using table based markup , as much as possible, we’ve moved to  a div based markup with the use of floats for columns. This results in a much smaller page size, and also allows content to flow easier with different screen resolutions. We’ve also added a css class for currency that uses a monospace font with right align to make monetary values line up.

We’re now fully supporting Asp.Net themes (check out http://msdn2.microsoft.com/en-us/library/ykzx33wh.aspx ). While our Medina release did offer some theme support, it was quite limited because quite a few files had hard coded references to CSS files. In Frio,  that’s all been fixed.

I’m going to briefly outline each file in our Themes and its purpose, and how they can be modified in the field.

01OrdersAdmin.css

This file is the “lone survivor” of the Css integration. The CartManager page uses a lot of JS that has hardcoded css classes, and we decided that since this file was only used on one page, we would leave it alone. It was left in the theme directory to allow customers (if they desire) to change it in the field. Note that this page is not even on the customer facing, so I wouldn’t advise any customers or consultants to change it.

Calendar.css

This is the Css file for our Calendar control. You’ll see the calendar display if you click the little calendar by any date field in imis. It’s very self explanatory and easy to modify.

CalendarSkin.CSS

Sorry about the title! This is actually the Css file for the Events calendar that you’ll see if you click the events tab and select the calendar option. It’s a full screen calendar display of upcoming events. It works with the EventCalendar.skin file (see below)

CommonImages.skin

This file contains skins for Images, hyperlink and Button controls that are used throughout iMIS. Changes to this file will result in changes not only to the public web, but also the full web. There’s another file (SiteSpecificImages.skin) that contains all the Controls that are different between the Public  and Full web views (see below for that one).

DocumentExplorer.css

As the name implies, this is the Css for our Document Explorer. It’s pretty self explanatory and easy to edit if you so desire. Note that this is another file that won’t have any effect on the Public web.

EventCalendar.skin

This is the skin for the events calendar. All the CssClasses mentioned in this skin file are contained in CalendarSkin.css

Grid.css

This is the Css for our Lister and QueryResultsGrid control. Any IQA query will be displayed with the Css contained in this file

Header.css

This is the CSS for the header of iMIS as well as the navigation tabs along the top of the screen.

Header.skin

This file contains skins for all the image and button controls in the Header.

iMIS.css

This is our “catch all” css file, it contains css for the footer, some generic styling (including the body tag) as well as some css for utility spans and divs.

InfoControl.skin

This is the skin file for newly created InfoControl.  (Check out (http://www.imiscommunity.com/cross_browser_more_info_control for information on that control)

Legacy.css

We should have called this file “LEAVEMEALONE.css” it contains Css for legacy controls. There’s really nothing in here that should be modified. T

NavLeft.css

The name says it all! This is the Css for our left nav. It’s pretty self explanatory.

NavMenu.skin

This is the skin files for our TreeView and Menu controls that are used for navigation. All the CssClasses in this file are contained in NavLeft.css

Panel.css

This file contains the styling for the iMIS PanelTemplateControl. This is where the orange background with the white arrow you see around sections of content is defined.

SiteSpecificImages.skin

As opposed to CommonImages.skin, this file contains the Images,HyperLink and Button controls that have different properties on Public web than they do on Full web.

TabStrip.skin

Soon to be retired since we’ll soon be retiring the use of the MS tabstrip, this file has skins for different displays of the MS TabStrip throughout iMIS.

TitleDesciptionControl.skin

This is file currently only contains one skin for the newly created TitleDescriptionControl (see http://www.imiscommunity.com/another_control_for_consistent_html_generation for more info on this control). We expect to add more skins to this file in the next release of iMIS.

WelcomePage.css

This file has the css for the default.aspx file in Full and Public web. Note the the version in Public web is dramatically smaller than the one in Full. We hope to clean up the one in Full very soon. In fact, the plan is to retire this file in the next release.

zPublicFacing.css

The title on this file is misleading, because changes to this file will affect Full web as well as Public. It’s a very small file that contains styling for the wizard steps along the top of the cart and events registration as well as the style for one css class that we’ll be retiring soon (formFieldRequired).

Hope this helps!