About

Providing great documentation is a fundamental part of developing a library, API or tool. Users need easy access to usage instructions or information that is clear and easy to consume. DocLooks is a CSS framework designed specifically for documentation. It focuses on:

• Clarity
• Readability
• Simplicity

DocLooks uses the SMACSS methodology and features base styles, layouts and modules. It is built using SCSS and includes a range of variables for modifying the appearance.

Base Styles

Doclooks applies some styles to all elements without needing to add additional classes or markup.

Text

Doclooks uses a system font string (like GitHub) to ensure text looks its best on all operating systems. Blocks of text can be broken up into evenly spaced paragraphs. Common inline elements are supported and appropriately styled.

Headings

Different levels of headings can be used to structure your page.

<h1>Heading 1<h1>

<h1>Heading 2<h1>

<h1>Heading 3<h1>

<h1>Heading 4<h1>

<h1>Heading 5<h1>

<h1>Heading 6<h1>

Code

Some preformatted code within a block.

Lists

Lists include support for nesting with three levels of item markers

Unordered

Ordered

Definition

Quotes

Quotes can be created using the q or blockquote tag.

Modules

Modules are re-usable elements that can be used throughout your page.

Header

A page level header with navigation.

Title

A title for the article or page. It can optionally include a tagline to offer more description.

Table

Code Block

A multi-line block of code.

function greet() {
  console.log("Hello World!");
}

Line Numbers

Code blocks can have line numbers using span.code-block--line-number. Not that this example does not use <code> tags.

function greet() {
  console.log("Hello World!");
}

Inverted Colors

Code blocks can have an inverted palette using the is-inverted state.

function greet() {
  console.log("Hello World!");
}

Rounded Corners

Code blocks can have an rounded corners using the is-rounded state.

function greet() {
  console.log("Hello World!");
}

Jump List

A list of links that can be used as navigation. Nested links have different colours to reinforce the hierarchy. The sizes of different headers can be constrained using .jump-list--heading allowing you to keep your HTML semantically structured.

Section

Break up the page into sections. Dividing lines will only be placed between subsequent sections.

Demo

The demo module allows you to display code alongside a preview. You can optionally add a button

<p>Lorem Ipsum</p>

Horizontal Layout

Add the .is-horizontal state to lay out the code and preview side-by-side.

<p>Lorem Ipsum</p>

Default Colors

If your want to preserve the default theme - or just prefer the border - you can use the default colour for the preview using add the .is-default-color state.

<p>Lorem Ipsum</p>

Buttons

Buttons have a minimal style with a simple 3D effect to indicate that they are clickable.

States

States can be used to give buttons some extra semantic meaning and help the user.

Full Width

Buttons can be made to span the full width of their parent using the is-full-width class.

Rounded

Buttons can have an rounded corners using the is-rounded state.

Card

Cards can be used to create a simple cutout area for a small segment of content.

Split Columns

The split columns module can be used to be placed multiple elements side-by-side.

// Some code on the right
function greet() {
  console.log("Hello World!");
}

Log

States

Theme