Page source | GitHub Repository

Classes

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

Name	Function
`franklin-content`	wraps around the content of a page, so when a `mypage.md` is converted to some html, it gets inserted in the scaffolding as `<div class="franklin-content"> some html </div>` (*)
`franklin-toc`	wraps around the inserted table of contents
`fnref`	wraps around a footnote reference
`fndef`	wraps around footnote definitions
`fndef-content`	wraps around the content of footnote definitions
`fndef-backref`	wraps around the back-reference of a footnote definition

Notes:
(*) you can change this name setting the global page variable div_content in your config.md.

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:

\newcommand{\blurb}[1]{
    ~~~
    <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.