Swift CSS

Along side themes and branding, the CSS page is a way of customizing the design of your site. Like themes and branding the CSS page is located in the Design folder in the Swift tools folder. The CSS page is used for further design customizations in areas where branding and themes aren’t sufficient.

For now, CSS can be used on two levels:

1. Rows – all rows allows further CSS customization
2. Columns – As of now, only the text advanced column allows this feature

The CSS page consists of different CSS code collections – the Swift Demo site has three example collections. Just like themes can target specific elements, but is also used on a larger scale,  these collections allows you to create custom CSS code targeting specific elements such as one specific column. It also allows you to create a more general CSS code, that you might want to use on multiple rows/columns.

When entering the settings of either rows or the specified column, you will find a CSS section. In this section you can choose which of the created CSS code collections you want to apply on the element. What happens is that the classes created in a selected collection will be assigned to the element you are working on. The custom CSS code for the collection is thus assigned for the specific element.

CSS collections are created from the Swift Tools area – Swift Tools > Design > CSS (Figure 1.1).

To link the CSS page with the website, please remember to link them in the website settings. 

Figure 1.1 A list of CSS collections

To create a new CSS code collection:

1. On the CSS page, click New paragraph and select CSS 
2.  Name the collection an appropiate name and click OK
3. Add classes and write/paste your custom CSS

When creating a new CSS collection you will be shown a page as seen on Figure 3.1.

This page consist of three fields. Let's take them step by step. 

• Name - The name field is for naming the CSS collection. The process of naming the collection should be done, when the collection is created, however this field can be used should you change your mind about the name, e.g. you want it to be more specific. 
• CSS - This field is for actual CSS code. You can either write your code directly into the field or paste it from an editor. It just has to be valid CSS code. This field can be left blank intentionally, if for example you are using Bootstrap classes. The Swift Demo site has an example of this, which we will cover later on in this article. 
• CSS classes -  This is where you create the custom classes. Classes can be created by writing the names (excluding the ".") in the field at the bottom. Classes can be deleted by hovering them and clicking the red cross. Should you want to use utility classes from Bootstrap, this is where you add them.

The CSS collections can be used in different ways. Below is explained two of the three collections from the Swift Demo site. One using callout and one using Bootstrap utility classes. 

The CSS collections also allows for callouts like the purple star in the top right corner seen on A) on Figure 5.1.

Actually this example also uses the Bootstrap Utility Example collection. That's why it has rounded corners and a shadow. An explanation of that collection can be seen below. 

Figure 5.1 A) Where Custom Callout Example CSS collection has been assigned. B) Where it hasn't.

If you want to replicate this example, you want your CSS collection to look something like this Figure 5.2. 

Figure 5.2 The settings of the Custom Callout Example collection.

We've posted the CSS code below, should you want to check it out. 

A way to avoid writing CSS code yourself is using the utility classes from Bootstrap.

As seen on Figure 6.1 we've used a lot of classes from Bootstrap to create a CSS collection. These doesn't need any custom CSS in the CSS field to work. 

Figure 6.1 The setup of the Bootstrap Utility Example

Using this CSS collection on a text advanced will look something like this: (Figure 6.2)

Figure 6.2 An example of the Bootstrap Utility classes in use