Style guide

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

Colors

Primary

bgfgorangebluemark

Secondary

orange-quiet

Secondary: blues

blue-hintblue-quiet

Secondary: grays

gray-100gray-300gray-500gray-700gray-900

Headers

Headers all the way down…

Headers

Headers all the way down…

Headers

Headers all the way down…

Headers withCode

Headers all the way down…

Headers withCode

Headers all the way down…

Headers withCode

Headers all the way down…

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

Paragraph before.

Blockquote without paragraph. 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.

Paragraph after.

Pragraph inside 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.

Paragraph after.

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.parent → item or nil

The parent of this item

Admonitions

Here is a tip:

Here is a note:

Here is a caution:

Here is to-do item:

Figures

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.