Post date: Oct 13, 2011 6:32:26 PM
Background
Before diving into the rest of this post, review the following background material:
{less}: dynamic style sheets using variables, nested rules and functions; this makes .css far more code-maintainable than raw .css
Bootstrap: structured layouts and neat .css based UI tricks from the folks @twitter
Bootstrap for Mootools: behaviors to wrap the Bootstrap functionality
CSS selectors: understand the power of CSS selectors
For speedy websites, follow Aaron Newton's approach:
Whenever you can solve the problem with HTML, do it.
Whenever you can solve it with HTML + CSS, do it.
When you can't, there's JavaScript.
CSS and Less in QBO 3
Normally, all .css in QBO 3 will be rendered by calling Theme.ashx/Css. This will render in a single call all .css file configuration for the application, instructing the browser to cache the file for 24 hours. When rendering .less files, Theme.ashx will dynamically parse the .less file
Notes:
All style sheets should be placed in the root/Styles folder
each project deploys to the root
so qbo.ApplicationWeb/Styles deploys to /Styles
so qbo.DebtWeb/Styles deploys to /Styles
don't reuse style sheet names unless you intend to override an existing stylesheet
Each module should include a module class name in the outermost XSLT outermost tag
e.g. Valuation.Home.xslt includes <div class="container-fluid valuation">
e.g. Debt.Home.xslt includes <div class="container-fluid debt">
.less file must have Properties > Build Action marked as 'Content' to publish correctly
CSS and IE
IE 8 and later actually have excellent support for W3C standards. However, you need to tell IE to use a standards compliant mode. This basically means either:
Setting a DOCTYPE declaration at the beginning of HTML pages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
using a meta http-equiv tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
In order to leverage standards as much as possible, the <!DOCTYPE HTML> shall be used. This is accomplished in XSLT as follows:
<xsl:output method="html" indent="yes" doctype-system="html"/>
See:
http://msdn.microsoft.com/en-us/library/ms535242(v=vs.85).aspx
http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
Configuration
QBO 3 renders all css found in the website's Styles folder by calling Theme.ashx/Css. This handler processes files as follows:
Each file referred to in Config/Css.config will be emitted in the order it appears in Css.config
Each file in the /Scripts folder that does not exist in the Css.config file will be emitted in alphabetical order
If the Css.config file has minify="true", *.min.css will be emitted instead of *.css (assuming the .min version exists)
.less files will be parsed with the .less processor
The Css.config file allows you to control the order in which .css files are emitted. For example, the qbo3.less depends on the existence of the Bootstrap-related .less file. If you have .css files that nothing else depends on, you do not need to include them in the Css.config file.
If you are seeing odd css behavior, check your /Styles folder to see if there are unintended files there.
The Css.config file is referred to in web.config as follows:
web.config:
<!-- Group all QBO custom handler together for easy readability -->
<sectionGroup name="qbo" type="System.Configuration.ConfigurationSectionGroup, System.Configuration, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" >
...
<!-- this is to read the QBO 3 css configuration file -->
<section name="Css" type="qbo.Application.Configuration.StyleSheetConfiguration, qbo.Application"/>
...
<!-- this is so IIS can serve up .less files directly; this is optional but convenient -->
<section name="dotless" type="dotless.Core.configuration.DotlessConfigurationSectionHandler,dotless.Core" />
</sectionGroup>
...
<qbo>
...
<!-- the QBO 3 css configuration file contains all .css and .less files to render for a site. -->
<Css configSource="config\Css.config"/>
...
</qbo>
...
<system.webServer>
...
<handlers>
<!-- .less handler to serve up .less files directly; optional but convenient -->
<add name="less" type="dotless.Core.LessCssHttpHandler,dotless.Core" path="*.less" verb="*"/>
</handlers>
</system.webServer>
A same css.config is:
css.config:
<Css UseMinified="false">
<StyleSheets>
<StyleSheet Name="qbo3.css" Path="qbo3.css"/>
<StyleSheet Name="test.css" Path="test.css" IsLess="true"/>
</StyleSheets>
</Css>
Notes:
For reusable icons, see: http://famfamfam.com/lab/icons/silk/
For CSS-based triangles, see: http://davidwalsh.name/css-triangles
CSS Selectors
The combination of standard CSS selectors and the MooTools Slick pseudo-selectors enables very concise javascript to select HTML elements. Below are some examples.
// Get a list of checked PersonID checkboxes from a Search panel
document.id('Search').getElements('input[name=PersonID]:checked')