Boogaloo CSS Guidelines

When developing an extension for Boogaloo, there are certain reusable CSS patterns in Boogaloo CSS that you can use to style your extension.

Basic Styling Patterns

Boxes

.box - One common style used to make blue boxes in Boogaloo (with padding, margin, and borders) is .box, which can be added to any element. This class, used throughout much of Boogaloo, will give your extensions a consistent look with the CMS.

<div class="box">
<!-- insert whatever you'd like in the box -->
</div>

.box.enriched - To make rounded corners for a box in CSS3-compatible browser, add the .enriched class to an element with the .box class.

<div class="box enriched">
<!-- insert whatever you'd like in the box -->
</div>

.box.alt - To create a green box instead of a blue box (both are commonly found in Boogaloo), you can add the .alt class with the .box class.

<div class="box alt">
<!-- insert whatever you'd like in the box -->
</div>

Buttons

.button - To make green buttons, you can add the .button class to anchor or button elements. Most of Boogaloo's buttons have rounded corners in CSS3-compatible browsers, so you are required to use the .enriched class as well.

<a class="button" href="#">save</a>
<!-- this button has square edges -->

<a class="button enriched" href="#">save</a>
<!-- this button has rounded edges -->

.button.warning - To make a button stand out as requiring caution (such as a delete or warning button) add the .warning class to the button. The button will be red, which is standard for the Boogaloo buttons with warnings.

<a class="button warning" href="#">save</a>
<!-- a red button with square edges -->

<a class="button warning enriched" href="#">save</a>
<!-- a red button with rounded edges -->

Form Patterns

If your extension uses a form for entering data, Boogaloo has a pre-created, styled pattern to provide a clean look for forms.

Inside a <fieldset> element, use the following pattern to provide an input element, select element, or other field element for Boogaloo styling:

<label>
  <span>field title/name goes here</span>
  <input /> (or other form element)
  <span class="error">error message here</span> (this can go above the input element if you desire)
</label>

<asp:label id="lbl_txt_id" runat="server" associatewithcontrolid="txt_id">
  <span>field title/name goes here</span> 
  <asp:requiredfieldvalidator runat="server" />
  <asp:textbox id="txt_id" runat="server" cssclass="longest" />
</asp:label>

Sometimes you'll be supplied with form fields that don't nicely fit within this pattern. For example, fields generated by <asp:checkboxlist> or <asp:radiobuttonlist> can't all be fit inside a <label> element since each checkbox or radiobutton in the list is its own form field. In this case, the following code pattern (making use of the "pseudolabel" class) can be substituted for a visual equivalent to the above pattern:

<div class="pseudolabel">
  <span>field title/name goes here</span>
  <asp:checkboxlist /> (or other field element of choice)
</div>

Multiple Columns in a Form

If you want to include multiple columns in a form, the following two patterns will help.

The first pattern uses the class "column," along with one of the following classes: "half," "third," or "quarter." The result is an inline-block element with a column either half, a third, or a fourth of the size of the container. The following is an example for a two-column form:


<div class="column half">
  <label>
    <span>First Name</span>
    <input type="text" />
  </label>
</div>

<div class="column half">
  <label>
    <span>Last Name</span>
    <input type="text" />
  </label>
</div>

Multiple Columns in a Form - Horizontal Tabbing

One possible drawback to the above pattern is that the user must to tab vertically down the elements of the first column (if the column contains more than one field) before addressing the fields in the second column. This may be confusing and undesirable in some cases.

In such a situation, here's an alternate pattern to use. If you want to be to tab horizontally against columned elements, put all the labels inside a single div with the "tabIndex" class, along with a "half," "third," or "quarter" class. The following is an example of horizontal tabbing for two columns:

<div class="tabIndex half">
  <label>
    <span>First Name</span>
    <input type="text" />
  </label>
  <label>
    <span>Last Name</span>
    <input type="text" />
  </label>
</div>

Last edited Oct 23, 2009 at 6:32 PM by teecer, version 27

Comments

No comments yet.