FreeStyle Template

This information is for Developers/Designers who are writing CSS for the quickorder portal shop system. The template has been designed to allow for ease of styling and at the same time offering the CSS hooks and HTML wrappers required to achieve almost any design required.

Please see the FreeStyle Quick Start page to get started quickly, then come back here to learn about the template.

There are a few constants with regard to this template that directly affect how your CSS will render.

• XHTML Strict doctype
  • A strict doctype provides a more predictable environment for styling websites to work on all the major web browsers.
  • Requires knowledge of which HTML elements are allowed and therefore which elements require styling.
  • It puts IE into strict mode. If you are used to using the box model hack it is no longer necessary. However, strict mode does not fix a lot of bugs in IE. www.positioniseverything.net is an invaluable resource for learning about the bugs and how to fix them.
• Reset Style Sheet
  • It is helpful to set default styles that reset every element's default rendering. See (meyerweb.com - reset reloaded) for an example. This means that all browsers will have a consistent starting point from which to style the website.
  • It does require that the basic elements such as <h1> <p> <strong> <em> are all defined in the main CSS file. A style sheet (default.css) is provided if you prefer not to start from scratch.
• The Markup
  • Accessible (WAI,WCAG,AAA)
  • Search engine visibility
  • CSS hooks and HTML wrappers for achieving most designs (3-column, 2-column, 1-column and mixtures of these depending on location)
  • Source-order
  • Semantic use of class and id

The first thing to do is understand how you will include your custom CSS files in the template:

• upload at least one CSS file to your site's static directory. You should have the FTP details already (if not ask Industry Software support).
• in the admin area under 'Site Content' > 'Dependencies' add a new dependency.
• fill in the filename eg. style.css or script.js, you can also create files under the static folder if you want to organise your files eg. css/ie.css
• you can choose a media type if it is a CSS file you are including.
• it is best to include your CSS before any javascript so use 'sort order' to achieve this.
• you can target files to specific versions of internet explorer using conditional comments

It is impossible to author CSS without getting to know the markup. This is broken up into 3 main sections.

1. Layout
2. Boxes
3. Basics

It is useful to read these sections to get an idea of how the HTML is structured however you can skip right to a list of the various CSS hooks available to you here.

You can use one of the image button sets with FreeStyle or (ideally) use the Blank button set to get regular browser buttons. You can style these with CSS in all manner of ways. The following CSS will make a regular button use a background image and hide the standard text:

  input.submit {
    overflow: hidden;
    width: 150px;
    height: 33px;
    text-indent: -999px; /* hides the regular text */
    background: url(submit-button.png) no-repeat left top; /* replace 150x33 pixel area with image of button */
    cursor: pointer; /* make the button appear clickable on hover */
  }
 
  /* you can swap out the background image on hover aswell to highlight it */
  input.submit:hover {
    background: url(submit-button-hover.png) no-repeat left top;
  }