Writing HTML for Boss

"If you always do what you've always done, you'll always get what you've always got"


The four golden laws for designing new sites (or preparing existing sites) to run on Boss are:

1) The Boss canvas is yours

Anything client side is achievable because you're in complete control of all markup that arrives at the client's browser.
This is achieved with the Boss templating system and the Boss API which incidentally is where you can get into the nitty gritty of how Boss displays its content areas (see Law 2).
So whether you use Photoshop, Fireworks, Illustrator or Paint you're free to continue as you always have.

2) Consider the templates and content areas

Boss is designed with a predisposition to treating every page as having a template area and content area(s). The template is what exists when a brand new page is created - it's only editable by the designer logins. The content area is not necessarily needed but it's where content that you want your client to manage themselves goes. On most sites every page utilises both areas as most commonly sites need to be fully editable.
There are default templates which can be modified for handling all the differing content templates that come with Boss.
Some examples:

Simple Page
Shopping cart page
Page not found (404)

Importantly all page content area's are wrapped in a div with a class of "content".
<div class="content anotherclass">...</div>

3) A tale of two folders

We're talking folder structures and there are two which relate to the number 2 golden law.

/assets : all images, css,  js and media files that are template related  go here - this normally means all css and js files - you can structure this folder and any sub folders however you like.

/assets/css/boss.editor.css is loaded by the Rich Text Editor in boss so it's good to include this in the head (or import it in your style sheet) and place and text/content default declarations in there as a starting point, i.e:
body{font-family:arial...}
h1{...}
h2{...}
p{...}
a{...}
a:hover{...}
etc...

/store : all content related files. This folder also has a specific directory structure where the console likes to organise the files that are uploaded. It's intended that the Boss system handles the links to these files and where it puts them automatically to make managing content as easy as possible.

4) How to handle links

Because Boss does some fancy URL rewriting to keep content Search Engine Friendly we recommend linking to all files in the /assets directory like this:
examples:

src="/assets/header.png"
src="/assets/css/master.css"
but not:
src="assets/header.png"