Ulysses Style Sheets for CSS artists

Ulysses Style Sheets is our solution for styling PDF and DOCX exports. If you are familiar with CSS, learning Ulysses Style Sheets will be pretty easy. Just duplicate one of the built-in styles by double-clicking it and edit it with one of your favorite text editor. We provide plugins for autocompletion and syntax highlighting in Text Mate 2 and Sublime Text 2. There is also a simple syntax-highlighting plugin for BBEdit and TextWrangler.

Similar to CSS, a ULSS style sheet consists of style classes that will be applied to your text depending on a style selector. For example, setting the font size of a level 1 heading can be easily done with the following style class:

heading-1 {
    font-size:      33pt
}

To simplify styling, we’ve added some advanced features to ULSS and skipped some less relevant features from CSS. This chapter will give you a short overview on important differences and similarities. To get an comprehensive overview on all available style settings, have a look at the full reference.

Generic Selectors

Besides selectors for concrete markups (e.g. inline-strong), ULSS also supports generic selectors. Generic selector are matching an entire category of markups. For example, you may create a style for all headings using the heading-all class. Currently, the following generic classes are available:

Relative Selectors

Similar to CSS, a style selector may not only select a single markup, but may contain a condition relating multiple styles. For example, the selector heading-all + paragraph states that a certain paragraph class should only be used when following a heading. ULSS supports the following relations from CSS:

Style Inheritance

Ulysses Style Sheets are also cascading: the style of an inner markup overrides the style of an outer markup.

In contrast to CSS, there is no ranking on the specificity of a style class: If multiple style classes can be applied to a markup (e.g. heading-all and heading-1), styles are just preferred by their ordering in the style sheet. Styles declared later in the style sheet will override earlier declarations.

Mixins

If you like to share style settings among multiple style classes, you can use style mixins. A mixin extends a style class just as if it would be a part of it:

@code { 
    font-face:   "Menlo"; 
    font-weight: normal;
    font-slant:  normal;
}

block-code : @code { }
inline-code : @code { }

In the above example, the settings from @code are applied in both block-code and inline-code, saving you the need to write the same settings multiple times.

Variables and Expressions

To improve the readability of your style and to make it easier to create variants of it, you may use variables. For example, you can store a commonly used color inside a variable and re-use it among multiple styles:

$light-grey = #eeeeee

inline-mark { background-color: $light-grey; }
inline-annotation { background-color: $light-grey; }

Variables can even contain simple calculations (“expressions”) anywhere in your style sheet:

$base-color = #FEFECC
$dark-base-color = $base-color * 0.8

Of course, expressions may be also used inside style settings:

inline-annotation { background-color: $base-color * 0.5; }