67 lines
1.9 KiB
Markdown
67 lines
1.9 KiB
Markdown
|
<!--
|
||
|
|
reviewed: 22/12/19
|
||
|
|
-->
|
||
|
|
|
||
|
|
@def hascode = true
|
||
|
|
|
||
|
|
# Classes
|
||
|
|
|
||
|
|
\blurb{Use Franklin's classes or add your own.}
|
||
|
|
|
||
|
|
\lineskip
|
||
|
|
|
||
|
|
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
|
||
|
|
|
||
|
|
@@lalignb
|
||
|
|
| 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**:\\
|
||
|
|
\smindent{(\*)} \smnote{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:
|
||
|
|
|
||
|
|
```html
|
||
|
|
\newcommand{\blurb}[1]{
|
||
|
|
~~~
|
||
|
|
<span style="font-size:24px;font-weight:300;">!#1</span>
|
||
|
|
~~~
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
```html
|
||
|
|
\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>~~~}
|
||
|
|
|
||
|
|
```html
|
||
|
|
\newcommand{\spstyle}[2]{~~~<span style="#1">#2</span>~~~}
|
||
|
|
```
|
||
|
|
|
||
|
|
and for instance:
|
||
|
|
|
||
|
|
```plaintext
|
||
|
|
\spstyle{font-variant:small-caps;font-size:15px;color:cornflowerblue}{formatted text}
|
||
|
|
```
|
||
|
|
|
||
|
|
gives you: \spstyle{font-variant:small-caps;font-size:15px;color:cornflowerblue}{formatted text}.
|
||
|
|
|
||
|
|
In fact, that one is pre-defined in Franklin, `\style{style}{text}` does precisely that.
|