Nanoc»Style guide

This page is designed to collect all the different elements used on the Nanoc website.

Block-level elements

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

Preformatted text

Some code:

def say_hi_to(person, params = {})
  puts("What’s up, #{person.first_name}?")
rescue
  puts("Uh… hi?")
end
# Old approach -- NO LONGER WORKS!
compile '*' do
  rep.filter :erb
  rep.layout 'default'
end
# New approach
compile '*' do
  filter :erb
  layout 'default'
end

Some terminal input and output:

~% bundle exec nanoc
Loading site data… done
Compiling site…

Site compiled in 26357.65s.

Unordered lists

These are short lists (no paragraphs):

  • A short but cute
    • unordered list
    • with exactly
  • five
  • elements

These are long lists (with paragraphs):

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  • Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

Ordered lists

These are short lists (no paragraphs):

  1. An ordered list
  2. with three
  3. elements
    1. and even
    2. some sub-elements
  4. followed by a root-level element

These are long lists (with paragraphs):

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  2. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.

Definition lists

Nanoc
A tool for generating static sites
DSL
Domain-specific language
Digital subscriber line
moshi
mothership
Something scary

Some definition lists with tags:

@item.parentitem or nil
The parent of this item

Admonitions

Here is a tip:

Prefix lines with TIP: to turn them into tip admonitions.

Here is a note:

Admonitions are handled by a Nanoc filter and not by Markdown.

Here is a caution:

The rm command can cause data loss.

Figures

Screenshot of what a brand new Nanoc site looks like

Inline elements

link to URL
The Nanoc website is pretty.
link to item
For details, see the About Nanoc page.
link to fragment
For details, see the Figures section.
link to item with fragment
For details, see the Glob patterns section on the Identifiers and patterns page.
emphasis
You should never have to reboot your computer after installation.
strong emphasis
You should never have a passwordless root account.
command
The compile command is used to compile a site.
user input
To use it, type nanoc compile into the terminal.
replaceable text
Replace repo-url with the URL of the repository.
abbreviation
Be elegant (and maybe incomprehensible) with Ruby DSLs.
first term
To achieve this goal, we use the outdatedness checker.
code
The def keyword is used to define a function or method.
filename
Open the content/index.md file.
product name
We love the cri library for building command-line interfaces.
Remove productname, as it doesn’t provide any value and should not be styled differently.
URI
Go to http://example.com/ to see a sample web page.