The Black Square CMS allows the client to edit the content of individual pages, but the global areas of the site, and the design, are not editable. There is no need for them to be, because the site is custom designed by us for the client’s individual needs. Our design carefully defines exactly what colours, fonts and general layout are required. It also defines what form of menu to use, where the logo should go, etc, and implements these in the site.
Assemble-a-site, however, does not provide a design for each site. Rather, we provide a basic skin for the site, and allow the client to create their design using that. The skin is designed to give the client maximum variation and choice while maintaining the structures we require in the site to make it work and, hopefully, maintaining a certain minimum level of quality in the site
I am calling this concept “Skins” because that is the name we first put to it when we came up with the ideas. After much discussion, we will probably brand the concept as “Themes”, because that is the term WordPress uses for the same (or similar) functionality. This is not final, so for now, Skins it is. If you have an opinion on this, please let us know, either way.
Each site can have only one skin, which is applied to every page on the site. The skin performs its duties by dividing its management into two distinct areas; global layout and style.
Global Layout
The global layout defines how the global elements of the site are laid out (surprisingly). We have defined ten distinct areas of a global template that may be used by any skin. The skin can choose to use any or all of these ten areas, depending on its purpose and complexity. The system works very similarly to the General Content editor – each area works just like a content column, and the user may add one or more content blocks to each column.
| Column Name | Description |
| Left Header | Positioned at the top left of the design, all content blocks are stacked horizontally, and the column is left aligned. |
| Central Header | Positioned in the centre of the header, all content blocks as stacked horizontally, and the column is centre aligned. |
| Right Header | Positioned at the top right of the design, all content blocks are stacked horizontally, and the column is right aligned. |
| Full Width Header | Positioned underneath the other header columns, this column stretches right the way across the page. Content blocks stack vertically, and stretch the full width of the column |
| Left | Runs down the left of the page content. Vertically aligned. |
| Right | Runs down the right of the page content. Vertically aligned |
| Full Width Footer | Positioned below the page content, but above the other footer columns, this column stretches right across the page. Content blocks stack vertically. |
| Left Footer | Positioned at the bottom left of the design, all content blocks are stacked horizontally, and the column is left aligned. |
| Central Footer | Positioned in the centre of the footer, all content blocks as stacked horizontally, and the column is centre aligned. |
| Right Footer | Positioned at the bottom right of the design, all content blocks are stacked horizontally, and the column is right aligned. |
The horizontally aligned columns provided us with real challenges, but we’ll deal with that in a separate post.
The system uses content blocks, just like the General Content so that we can use the same blocks in both. So, for example, the Standard Content, Image Link and Link List content blocks will be available in the global layout editor. We will also create a number of additional content blocks specifically for the global layout editor; the most obvious of these will be the menu content block, which will give the user the power to choose a style of menu, and position it in any of the available positions. We will deal with these blocks in another post as well.
Style
The style element is managed using a style editor. The CSS of the skin can contain variables, and these variables may be set by the client using the style editor. These variables may be colours, fonts, sizes or just about anything else that can fit into a CSS file. This rather simple system provides a vast amount of variation to a simple design.
We haven’t fully explored the possibilities inherent in this system, but we envision skins with gradient backgrounds that allow the user to choose the colours of the gradient, for example. We will definitely let you know about all the cool things we come up with in future posts.
