CSS

We learned about building the layout of an Anymeta website today, using CSS (Cascading Style Sheets).
Firstly, on the top level of building the layout of a website templates can be used to access parts of code from the Anymeta folder. A template can be seen as a wrapper for code.
These lines of code can also access other parts of code, creating a possible network of different styling options for your website.
The standard Anymeta layout and styling options are also known as the common.

This approach to building the layout of a website works like a tree structure. This means that any code from a level further down the tree overrules any code from a higher level. This way it's very easy to make a general layout with the necessary project specific options.
Any code that has been changed to suit specific needs not included in the common is called an overwrite.

The templates create the layout of the page by using the generic code. Project specific exceptions can be seen in the style.css. All the text properties can be seen in the typography.css.

If we look more closely to what actually happens in de template, we see that the general layout is shown on top of the template page as follows:
a a b
c d e
f f f
This generates the basic structure of a website that has a large item on top, taking up two thirds of the width of the page. Next to this is an item taking up one third. The rest of the letters represent similar page distribution.

A class specifies styling properties for a certain markup in the page, for example the title. This can either be specific for all similar items, or can be used as an exception rule for one specific item. We can recognize a class by a point (.) before the code

Quite similar, but different to a class is an ID. It can be recognized by a hash-tag in front of the code (#). An ID is specific to one item only.

A cufon is a wrapper for a font that is not normally used on all browsers. This way it can be displayed everywhere without issues. It is important to add all text icons like exclamation marks etcetera, because not doing so can result in the website not showing these at all.

Margins and padding give us different spacing options between items on the page. A margin provides the spacing between two items. Padding creates the space around the text within an item.

A div contains a part of HTML code, and is needed to work with blocks of code.

If we want to insert a certain set into the template we need to give it a name to connect the two, for example: home.set. This refers to a certain set with the properties given to it in the admin. If we use a list-publish for this, we can change the properties in the admin as well, like item length etc, without the need of using a front-ender as support.

Labelfiles gives properties to an image, like length and width. This can be used as a general setting for all images in a certain list, or even the whole website.

The admintools houses the system specifics. Here are all the core tools which the website can access. In the admintool we can also decide which features are activated, and which are not.

We can play around with all these different features with a great add-on for your browser called Firebug. With this add-on you can see how a webpage is set up and change any parameter in the code. Unfortunately this only works on your own computer, not on the actual webpage...