CSS

Custom styles

Each page can be enhanced by using custom styles, you can create the following sass files (each to be placed in the /css directory):

• global.scss - global styles file that are included on every page,

• post.scss - post/page specific styles,

• home.scss - styles to be included on the homepage,

• category.scss - styles to be included on category pages.

Each scss file is compiled to a css file, auto-prefixed and minified when being published. Partial files can be loaded, so you can split your styles into multiple files. Normalization and some default styles are already included in the global Phaistos css library.

Utility classes

The following utility classes are globally available and can be used inside HTML templates.

Display

Flexbox

All flexbox utility classes (except of .u-flex-[1-5]) can also be postfixed with the --smmodifier to limit the styles being applied for small screens (below 991px), e.g. .u-flex-col--sm.

Margins and paddings

The margin and padding utitility classes have the following structure .u-[type][position]-[size], with:

• [type] - the type m for margin, p for padding,

• [position] - where the margin/padding should be applied, t for top, r for right, b for bottom and l for left. This part can be omitted and the styles will be applied at all positions,

• [size] - the size of the margin/padding: xs (0.5rem), sm (1rem), md (1.5rem), lg (2rem), xl (3rem), 0 (0).

For example the class .u-pl-md would add a padding of 1.5rem on the left side.

All margin and padding utility classes can also be postfixed with the --smmodifier to limit the styles being applied for small screens (below 991px), e.g. .u-pl-md--sm.

Typography

The following typography classes can be applied in your HTML templates: