Quick Start

Last updated: January 25, 2016

Download

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec imperdiet turpis. Curabitur aliquet pulvinar ultrices. Etiam at posuere leo. Proin ultrices ex et dapibus feugiat link example aenean purus leo, faucibus at elit vel, aliquet scelerisque dui. Etiam quis elit euismod, imperdiet augue sit amet, imperdiet odio. Aenean sem erat, hendrerit eu gravida id, dignissim ut ante. Nam consequat porttitor libero euismod congue.

  Download PrettyDocs

Installation

Step One

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.

Default code example:
bower install <package>

npm install <package>

Step Two

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

Un-ordered list example
  • Lorem ipsum dolor sit amet.
  • Aliquam tincidunt mauris.
  • Ultricies eget vel aliquam libero.
    • Turpis pulvinar
    • Feugiat scelerisque
    • Ut tincidunt
  • Pellentesque habitant morbi.
  • Praesent dapibus, neque id.
Ordered list example
  1. Lorem ipsum dolor sit amet.
  2. Aliquam tincidunt mauris.
  3. Ultricies eget vel aliquam libero.
    • Turpis pulvinar
    • Feugiat scelerisque
    • Ut tincidunt
  4. Pellentesque habitant morbi.
  5. Praesent dapibus, neque id.

Step Three

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.

Code

PrismJS is used as the syntax highlighter here. You can build your own version via their website should you need to.

 

Useful Tip:

You can use this online HTML entity encoder/decoder to generate your code examples.

HTML Code Example
<!DOCTYPE html>
<html lang="en">
    ...
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
    <div class="jumbotron">
        <h1>Hello, world!</h1>
        <p>...</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
    </div>
    ...
</html>
CSS Code Example
/* ======= Base Styling ======= */
body {
    font-family: 'Open Sans', arial, sans-serif;
    color: #333;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
LESS Code Example
/*
* Template Name: prettyDocs - Responsive Website Template for documentations
* Version: 1.0
* Author: Xiaoying Riley
* License: Creative Commons Attribution 3.0 License
* Twitter: @3rdwave_themes
* Website: http://themes.3rdwavemedia.com/
*/
@import "mixins.less";
@import "theme-default.less";
@import "base.less";
@import "doc.less";
@import "landing.less";
@import "responsive.less";
Sass Code Example
#main {
    $width: 5em;
    width: $width;
}

#sidebar {
    width: $width;
}
JavaScript Code Example
<script>
    function myFunction(a, b) {
        return a * b;
    }

    document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
Python Code Example
>>> x = int(input("
Please enter an integer: ")) Please enter an integer: 42
>>> if x < 0:
... x = 0
... print('Negative changed to zero')
... elif x == 0:
... print('Zero')
... elif x == 1:
... print('Single')
... else:
... print('More')
... More
PHP Code Example
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;

echo $txt;
echo "<br>";
echo $x;
echo "<br>";
echo $y;
?>
Handlebars Code Example
Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";

  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }

  return out + "</ul>";
});
Git Code Example
$ git add Documentation.txt

Callouts

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.

 

Aenean imperdiet

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium <code>, Nemo enim ipsam voluptatem quia voluptas link example sit aspernatur aut odit aut fugit.

 

Morbi posuere

Nunc hendrerit odio quis dignissim efficitur. Proin ut finibus libero. Morbi posuere fringilla felis eget sagittis. Fusce sem orci, cursus in tortor link example tellus vel diam viverra elementum.

 

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Link example aenean commodo ligula eget dolor.

 

Interdum et malesuada

Morbi eget interdum sapien. Donec sed turpis sed nulla lacinia accumsan vitae ut tellus. Aenean vestibulum Link example maximus ipsum vel dignissim. Morbi ornare elit sit amet massa feugiat, viverra dictum ipsum pellentesque.

Tables

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis.

Basic Table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Bordered Table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Striped Table
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Buttons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec imperdiet turpis. Curabitur aliquet pulvinar ultrices. Etiam at posuere leo. Proin ultrices ex et dapibus feugiat link example aenean purus leo, faucibus at elit vel, aliquet scelerisque dui. Etiam quis elit euismod, imperdiet augue sit amet, imperdiet odio. Aenean sem erat, hendrerit eu gravida id, dignissim ut ante. Nam consequat porttitor libero euismod congue.

Basic Buttons
CTA Buttons

Video

Responsive Video 16:9

Responsive Video 4:3

Icons

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec imperdiet turpis. Curabitur aliquet pulvinar ultrices. Etiam at posuere leo. Proin ultrices ex et dapibus feugiat link example aenean purus leo, faucibus at elit vel, aliquet scelerisque dui. Etiam quis elit euismod, imperdiet augue sit amet, imperdiet odio. Aenean sem erat, hendrerit eu gravida id, dignissim ut ante. Nam consequat porttitor libero euismod congue.

Elegant Icon Font

elegant icons

FontAwesome Icon Font

fontawesome

  AppKit - Bootstrap Angular Admin Theme for Developers

AppKit Theme

Love this free documentation theme?

Check out AppKit - an Angular admin theme I created with my developer friend Tom Najdek for developers. AppKit uses modern front-end technologies and is packed with useful components and widgets to speed up your app development.

[Tip for developers]: If your project is Open Source, you can use this area to promote your other projects or hold third party adverts like Bootstrap and FontAwesome do!

Xiaoying Riley