Custom look-and-feel with Force.com Sites and Blueprint CSS

At the core of Force.com Sites is an extremely simple, yet powerful concept: the ability to address a set of related Visualforce pages with a publicly accessible URL. Anyone with a web browser can access your application’s Visualforce pages, which in turn can incorporate a completely custom look-and-feel.

The sky is the limit…but where do you begin? Most developers investigating the Force.com platform will have a background in programming rather than visual design, and may be intimidated when building a UI from scratch.

Fortunately, there are some HTML/CSS “frameworks” that can give you a jump start. I’ve had success with one called Blueprint, and in this article I’ll show you how to use it with Visualforce and Force.com Sites.

Media_httpimgskitchco_tcqkg

A brief intro to Blueprint

In practical terms, Blueprint is a set of CSS files that provides a predefined look-and-feel for a web site, though it’s specifically designed to be easy to extend. To use it, you build your HTML as you normally would, and include the CSS classes defined by Blueprint to apply a layout and styling.

Here’s one of the examples from Blueprint’s Quick Start Tutorial:

<div class="container">
    <div class="span-24 last">
        Header
    </div>
    <div class="span-4">
        Left sidebar
    </div>
    <div class="span-16">
        Main content
    </div>
    <div class="span-4 last">
        Right sidebar
    </div>
</div>

In a typical scenario, what’s shown above would be the entire contents of the HTML body tag. Blueprint’s styling will only be applied to content within the container, providing an easy way to enable or disable it. The content will be displayed in a centered grid, which is subdivided into 24 units of width. Here’s a quick walkthrough of the remaining div tags:

  1. Create a block 24 units wide (span-24) for header content, and wrap to the next line after this block (last)
  2. Create a block 4 units wide (span-4) for left sidebar content
  3. Create a block 16 units wide (span-16) for the main content of the page
  4. Create a block 4 units wide (span-4) for right sidebar content, and wrap to the next line after this block (last)

Click on the image below to see a full sized version of the output, with Blueprint’s grid shown for clarity:

Media_httpimgskitchco_dehed

Basic grid with dummy content

This example isn’t very exciting, but with a little imagination you can see how a menu would work nicely in the header, perhaps with site navigation on the left side, and so on. Other examples and tutorials have been created as well, including one pictured below so you can see what Blueprint is capable of.

Media_httpimgskitchco_nmijj

Sample Blueprint page

Use with Visualforce

You may have realized that the CSS classes used above are defined in external files. Indeed, Blueprint’s documentation indicates that the following code should be placed in the head of the HTML document:

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

In the context of Visualforce, these CSS files would become Static Resources, and the link tag would not be used. What’s trickier is handling the conditional comment for the Internet Explorer-specific stylesheet, since the head of the document is not directly accessible in Visualforce.

After some digging, I came up with this workaround:

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
<apex:stylesheet value="{!$Resource.blueprint}"/>

&lt;!--[if IE]&gt;
<link rel="stylesheet" type="text/css" media="screen, projection" href="{!URLFOR($Resource.blueprintIE)}">
&lt;![endif]--&gt;

<div class="container">
    <div class="span-24 last">
        <h1>Congratulations</h1>
    </div>
    <div class="span-24 last">
        This is your new <span class="ie-test">Page</span>
    </div>
</div>

</apex:page>

The use of &lt; and &gt; allow the conditional comment to sneak by the Visualforce parser, while still getting rendered in the browser. To validate this approach, I defined the ie-test class as being red and bold in the IE-specific stylesheet, allowing me to clearly test whether Blueprint’s IE-specific styles would only be applied in that browser.

Media_httpimgskitchco_qbajj

VF Sites page rendered in IE

Media_httpimgskitchco_frndq

VF Sites page rendered in Safari

Other features of Blueprint

Now that we’ve got Blueprint up and running, let’s dive a little deeper and look at some of its aspects that match up nicely with Visualforce. One of VF’s nicer features is the dataTable component, which provides significant power and flexibility when rendering columnar data in an HTML table. Blueprint’s default styling of tables handles this quite well.

Here’s a simple use of the dataTable component in Visualforce:

<apex:page controller="BPTestController" showHeader="false" sidebar="false" standardStylesheets="false">
<apex:stylesheet value="{!$Resource.blueprint}"/>

&lt;!--[if IE]&gt;
<link rel="stylesheet" type="text/css" media="screen, projection" href="{!URLFOR($Resource.blueprintIE)}">
&lt;![endif]--&gt;

<div class="container">
    <div class="span-24 last">
        <h1>DataTable</h1>
    </div> 

    <div class="span-14">
        <apex:dataTable value="{!accounts}" var="a" id="acctTable">
            <apex:facet name="caption">My Accounts</apex:facet>
            <apex:facet name="footer">Page 1 of 1</apex:facet>
            <apex:column >
                <apex:facet name="header">Name</apex:facet>
                <apex:outputText value="{!a.Name}"/>
            </apex:column>
            <apex:column >
                <apex:facet name="header">Street</apex:facet>
                <apex:outputText value="{!a.BillingStreet}"/>
            </apex:column>
            <apex:column >
                <apex:facet name="header">City</apex:facet>
                <apex:outputText value="{!a.BillingCity}"/>
            </apex:column>
            <apex:column >
                <apex:facet name="header">State</apex:facet>
                <apex:outputText value="{!a.BillingState}"/>
            </apex:column>
        </apex:dataTable>
    </div>
    <div class="span-10 last">
        <!-- large right margin -->
    </div>
</div>

</apex:page>

And here’s the table rendered with Blueprint’s styling:

Media_httpimgskitchco_biemr

DataTable test

Blueprint also includes some nice styles to handle user errors and notices. This maps nicely to the pageMessages component. Here’s a quick example in Visualforce:

<apex:page controller="BPTestController" showHeader="false" sidebar="false" standardStylesheets="false" action="{!throwError}">
<apex:stylesheet value="{!$Resource.blueprint}"/>

&lt;!--[if IE]&gt;
<link rel="stylesheet" type="text/css" media="screen, projection" href="{!URLFOR($Resource.blueprintIE)}">
&lt;![endif]--&gt;

<div class="container">
    <div class="span-24 last">
        <h1>PageMessages</h1>
    </div> 

    <div class="span-14 error last">
        <apex:pageMessages />
    </div
</div>

</apex:page>

Here’s the throwError method from the controller:

public PageReference throwError() {
    ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Sample error message'));

    return null;
}

And this is the rendered error widget:

Media_httpimgskitchco_glhse

PageMessages sample

Summary

Force.com Sites, when combined with Visualforce, is great in that you can present any look-and-feel to your web site’s visitors. But when presented with a blank canvas, developers may not know quite where to begin. That’s where Blueprint comes in.

Though it’s no substitute for having talented designers on your team, Blueprint usually saves time and can be very helpful for proof-of-concept work or internal applications. And what’s even better is how well it works with Visualforce and the Force.com platform.

Advertisements

Force.com Sites and the hidden Profile

Salesforce.com has been a leader in the SaaS and PaaS markets since those buzzwords were coined, though as a web developer my interest was piqued with the advent of Force.com Sites. For the uninitiated, Sites is a feature of the Force.com cloud computing platform that allows a developer to create a publicly available web site or application with a completely custom UI. The native look-and-feel of Salesforce.com is great for a broad category of business applications, but Sites allows you to shoot for the moon with your user experience.

Sites builds on Force.com’s native capabilities, allowing developers to use powerful technologies like workflow and fine-grain security controls without building them from scratch. Since most organizations will need to enforce some level of data security, it’s worth exploring how that intersects with making information available to the public.

The hidden Profile

If you’ve worked with Salesforce.com for any length of time, you’ll no doubt be familiar with the concept of a Profile. Essentially, a Profile is a set of privileges which can be granted to multiple users to avoid the grunt work of configuring security on a user-by-user basis. A detailed discussion of Profiles is beyond the scope of this blog post, though they are documented extensively elsewhere.

Force.com Sites also leverages the concept of a Profile to determine which pieces of data are visible on a given web site, though it’s not immediately obvious that this Profile is hidden. To be more specific, a new Profile is created automatically by the platform when a new Site is created. The name of this Profile is the site’s Label, followed by the word “Profile” (as shown below):

Media_httpimgskitchco_drygk

Site configuration

When viewing the list of Sites configured for your org, click the Site Label to view the screen above. From there, click Public Access Settings to view the details of the hidden Profile.

Media_httpimgskitchco_qjfku

The Profile generated automatically for that site

The name of the Profile is worth noting, especially when it comes time to deploy the site to a production org. Configuring a Profile can be a bit tedious and error prone, so once this is done correctly in a sandbox, it’s convenient to migrate this configuration rather than rebuilding it. When migrating with Eclipse, this hidden Profile will appear in the list of objects that can be deployed to another org, but it is not shown on the list of Profiles viewable under Setup in the web UI.

Media_httpimgskitchco_ftfcw

The new profile is missing from this list

This simple fact can make the security configuration of a Site somewhat confusing, but once you become familiar with it, the mystery goes away. The fact that this Profile is hidden is beneficial for large organizations that have many individuals administering a single Salesforce.com org, not all of whom may understand the purpose of every Profile.

Summary

It’s not uncommon to get tripped up by security configuration issues when beginning to work with Force.com Sites. The key is to simply configure the hidden Profile correctly in a sandbox, then migrate that profile to production rather than rebuilding it by hand.