Sakai Style guide

Colin Clark colin.clark at
Fri Jul 6 15:08:19 UTC 2007

Hi all,

Aaron's points here describe a useful style guide for developers. We had 
an interesting conversation in Denver last week about this exact topic.

In my mind, one of the problems we had with the previous style guide was 
that it was too prescriptive and narrow in focus to be able to 
accommodate the diversity of UI needs within the Sakai community. This 
is one of the key reasons we chose to start on the UI design patterns 
work as an alternative. They provide instruction on how to build user 
interfaces with enough flexibility to accommodate innovative new 
interactions or the need for institutional customization.

I think the vast majority of information about building UIs in Sakai 
should be in the form of UI design patterns. Pair these with excellent 
reusable components (eg. Fluid's components), HTML fragments, and CSS, 
and you've got a great combination. A next-generation style guide should 
be quite limited in scope, and should simply address the prescriptive 
gaps left by the design patterns and other material.

One thing Aaron forgot to mention in his email is that he has 
volunteered to help realize this new next-generation style guide! :)


Aaron Zeckoski wrote:
> This sounds like it is heading in generally the right direction for it
> to be useful for developers, however, I am not sure so I will lay out
> what I think you need for a style guide to be helpful to developers so
> they will actually use it.
> What developers need from a style guide:
> 1) Needs to have general controls (like design patterns I think) laid
> out and also examples of full pages that cover the 80% use cases (I
> will call both of these "pieces" here)
> 2) Every piece should include an html snippet as an example
> 3) Every piece should include the recommended CSS styles OR (even
> better) the class tags OR a combination
> 4) Widgets should be included which also have examples showing how to
> invoke them for the common display technologies
> Making the style guide readable and usable for developers:
> 1) It should be available online and google indexed (probably in a
> wiki or editable online text of some kind)
> 2) It should also be available as a PDF (maybe as an export)
> 3) It should be "prescriptive" (to quote Colin), and should lay things
> out as being the right way to do things (people will ignore it if they
> really want to, however, it should presented as "the Sakai way" or
> something like this.
> The goals of the style guide related to developers:
> 1) Demonstrate the consistent way to display "things" in a Sakai tool
> 2) Demonstrate the correct way to form HTML which is accessible
> 3) Demonstrate the proper CSS classes and styles to use
> 4) Demonstrate the usage of widgets and where they are appropriate to use
> I would recommend taking the stuff Gonzalo started on his pages (HTML
> and CSS) and using that to bootstrap the guide. I forget the link but
> I will copy him and hopefully he will paste it.
> :-)
> -AZ
> On 7/2/07, Daphne Ogle <daphne at> wrote:
>> Hi there,
>> I just ran across this definition of a style guide on the IXDA list:
>> "Many companies provide a "Style Guide." This is often a few branding
>> standards (the logo goes there) combined with a number of general design
>> guidelines. The document is saved to a hard drive and promptly never
>> seen or
>> read by anyone.
>> A standards guide is successful if the end user moves from one page to
>> another and has the experience that "Yes!  I have seen a page like this
>> before. And it works the way I expect." To have this happen we must
>> identify
>> the 10–20 types (roughly, could be more or less) of pages that
>> account for
>> 85% of the pages that will be designed. We then create standard page
>> templates for each of these. It is like having good DNA in the system/
>> site,
>> which brings unity and sense to the end result.
>> The guide is used in the building of actual HTML/CSS templates and in
>> making
>> sure that scope or feature creep does not muddle the clear design of the
>> system/site."
>> Perhaps this could be useful in our conversations around design
>> patterns vs style guide.  This definition seems in line with previous
>> discussions that design patterns and a style guide compliment each
>> other.  The style guide informs visual styles and layouts while the
>> design patterns focus on types of interactions.
>> Daphne Ogle
>> Senior Interaction Designer
>> University of California, Berkeley
>> Educational Technology Services
>> daphne at
>> cell (510)847-0308
>> [see attachment: "message0.html", size: 5027 bytes]
>> Attachments:
>> message0.html
>> ----------------------
>> This automatic notification message was sent by Sakai Collab ( from the DG: User Interaction site.
>> You can modify how you receive notifications at My Workspace > Preferences.

Colin Clark
Technical Lead, Fluid Project
Adaptive Technology Resource Centre, University of Toronto

More information about the fluid-work mailing list