Use Franklin's classes or add your own.

By now you know that you can add @@divname ... @@ anywhere you want in your content in order to define an environment and style it. Below we detail the default classes as well as some tricks that can be useful to style your content.

Franklin's classes

franklin-contentwraps around the content of a page, so when a is converted to some html, it gets inserted in the scaffolding as <div class="franklin-content"> some html </div> (*)
franklin-tocwraps around the inserted table of contents
fnrefwraps around a footnote reference
fndefwraps around footnote definitions
fndef-contentwraps around the content of footnote definitions
fndef-backrefwraps around the back-reference of a footnote definition

(*) you can change this name setting the global page variable div_content in your

Simple tricks

As soon as you're using a style more than once, it makes sense to create it as a command. This makes it much easier to maintain and re-use. For instance, consider the following simple examples:

    <span style="font-size:24px;font-weight:300;">!#1</span>
\newcommand{\note}[1]{@@note @@title ⚠ Note@@ @@content #1 @@ @@}

Further, you can pass the style as an argument:

\newcommand{\spstyle}[2]{~~~<span style="#1">#2</span>~~~}

and for instance:

\spstyle{font-variant:small-caps;font-size:15px;color:cornflowerblue}{formatted text}

gives you: formatted text.

In fact, that one is pre-defined in Franklin, \style{style}{text} does precisely that.