- Dashboard
- Notifications

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

- Messages

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

- - #### Jacques Alba

    Edit your profile

  - #### Sign out

    Leave the demo and return to the sign in screen

- - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

  - #### Jens Alba

    Lorem ipsum dolor sit imet smd ddm lksdm lkdsm

## Hi, Jacques

You last visited two hours ago

C New article Text editor & UI elements Simply everything 2 Photo montage Beautiful gallery J iPhone app Fast and fluid N Location sandbox Google Maps API

- - iPhone app
  - Charts
  - Sample page
- - Error pages
  - Docs
  - Notifications

#### Right now?

Realtime analytics (demo only)

#### Past week

Realtime analytics (demo only)

#### To-do list

There's a third dimension

- - Clean up site structure
  - The Alternative Dimension
- - Create something useful and pretty
  - Layer 2
- - Laugh of a Norwegian
  - Layer 2
- - Make Pastel fantastic
  - Layer 2
- - Integrate all the charts
  - Layer 2

H
` 0 1 2 3 4 5 6 7 8 9 a b
C D E F G H I J K L M N O
P Q R S T U V W X Y Z @ !
# $ % & ' ( ) * + , - . /
p q r s t u v w x y z A B
c d e f g h i j k l m n o
" : ; < = > ? [ ] \ { } |
C Character: C

- Linear
- Pie
- Percentiles
- Orbit

- Introduction
- Getting started
- Navigation
- Layout, Grid & Cartons
- Welcome screen
- Themes
- UI elements
- Update System
- Notifications
- Modals
- Tooltips
- Animations
- Charts
- Editor
- Gallery
- Icons
- Tables
- Error pages
- Maps & Location
- iPhone web app
- Licenses & Attributions

# Introduction

Pastel is filled with features. By time it would probably be possible to figure anything out by looking at the included demo - that's just not very user friendly. For that reason I decided to write some thorough documentation - which can be read on this page. If you decide to purchase Pastel, all documentation will be available as separate Markdown files too.

If you are having trouble with some aspects and don't think the documentation answers them clearly, don't hesitate contacting me. But please at least skim the included documentation, it's written for you!

- Current location
- Roadmap
- Satellite
- Hybrid
- Modals

Current location
Roadmap
Satellite
Hybrid

- Buttons
- Tables
- Miscellaneous
- Layered to-do
- Chat
- Typography
- Grid & Layout
- Cartons
- Animations & Overlays
- Tooltips

- - Try clicking on an task (not just the checkbox itself)
  - The Alternative Dimension
- - Something pretty cool will be revealed
  - Layer 2
- - But only if you have a modern browser
  - Layer 2
- - Well it will still be revealed
  - Layer 2
- - Just without a fancy animation
  - Layer 2
- - You can use a to-do list to keep track of stuff
  - Layer 2
- - Lorem ipsum dolor
  - Layer 2
- - It's really easy
  - Layer 2
- - And really simple
  - Layer 2
- - Good luck with Pastel!
  - Layer 2

Name | Header 2 | Browser |
--- | --- | --- | ---
Arnulfo Derico | Neue Content | Chrome |
Micha Mahomes | row 2, cell 2 | Firefox |
Aldo Maycumber | row 2, cell 2 | Chrome |
Sydney Schwarm | row 2, cell 2 | Internet Explorer |
Thad Wemhoff | row 2, cell 2 | Safari |
Elmo Kostis | row 2, cell 2 | Safari |
Wanetta Herne | row 2, cell 2 | Chrome |
Chance Podany | row 2, cell 2 | Firefox |
Emilia Thaler | row 2, cell 2 | Internet Explorer |
Pearlie Ruther | row 2, cell 2 | Safari |
Zelma Roosevelt | row 2, cell 2 | Chrome |
Clayton Dano | row 2, cell 2 | Firefox |
Kurt Bomba | row 2, cell 2 | Chrome |
Annabelle Morein | row 2, cell 2 | Internet Explorer |
Noemi Hux | row 2, cell 2 | Safari |
Tanisha Houtchens | row 2, cell 2 | Safari |
Malinda Brick | row 2, cell 2 | Chrome |
Julio Yeldell | row 2, cell 2 | Firefox |
Nita Brion | row 2, cell 2 | Internet Explorer |
Lakeesha Wactor | row 2, cell 2 | Safari |
Sharron Wheelwright | row 2, cell 2 | Chrome |
Erik Mayville | row 2, cell 2 | Firefox |
Carmella Coffer | row 2, cell 2 | Chrome |
Malinda Phegley | row 2, cell 2 | Internet Explorer |
Max Bibler | row 2, cell 2 | Safari |
Roslyn Glatt | row 2, cell 2 | Safari |
Javier Gau | row 2, cell 2 | Chrome |
Marcie Dahlen | row 2, cell 2 | Firefox |
Lance Sabourin | row 2, cell 2 | Internet Explorer |
Julianne Mahle | row 2, cell 2 | Safari |
Jacques Halifax | row 2, cell 2 | Chrome |
Alana Nylander | row 2, cell 2 | Firefox |
Sofia Deveau | row 2, cell 2 | Chrome |
Veola Leiby | row 2, cell 2 | Internet Explorer |
Usha Babers | row 2, cell 2 | Safari |
Emanuel Heyl | row 2, cell 2 | Safari |
Devorah Kupka | row 2, cell 2 | Chrome |
Eleonor Breden | row 2, cell 2 | Firefox |
Nu Bokman | row 2, cell 2 | Internet Explorer |
Hunter Nauarro | row 2, cell 2 | Safari |
Marcelino Taper | Århus | Safari |

Include location

This is the look of a default carton. It has several pages, try clicking on one of the dots below.
It's as simple as adding another div to the parent. You don't even have to initialize anything in Javascript, it happens automatically!
3

## Paris

Lorem ipsum dolor

## Orange Blur

Lorem ipsum dolor

## Red Confetti

Lorem ipsum dolor

## Sugar

Lorem ipsum dolor

## Sea

Lorem ipsum dolor

## Green

Lorem ipsum dolor

## Adrift

Lorem ipsum dolor

## Heading

It only requires the addition of a H2-tag. Simple.

## Inception

You probably don't want to use the grid and pagination system like this example showcases, at least not on such a small area, but it proves that it's pretty bulletproof. See the inception if you click the second dot.
Perhaps too crazy?
2
3
1
2
1
2
Lorem ipsum
This is the look of a default carton. It has several pages, try clicking on one of the dots below.
Full width (12 columns)
1
11 columns
2 columns
10 columns
3 columns
9 columns
4 columns
8 columns
5 columns
7 columns
6 columns
6 columns

Hey. Copenhagen any good?

Jacques 4 days ago

?

Jacques 2 hours ago

You did not just create this comment with the magic of ajax?

You An hour ago

Oh yes I did.

Jacques 2 sec. ago

Donec sem mi, faucibus ac consectetur in, bibendum eget massa. Nulla at imperdiet magna.

You Just now

*London

You Just now

Hey. Copenhagen any good?

Jacques 4 days ago

?

Jacques 2 hours ago

You did not just create this comment with the magic of ajax?

You An hour ago

Oh yes I did.

Jacques 2 sec. ago

Donec sem mi, faucibus ac consectetur in, bibendum eget massa. Nulla at imperdiet magna.

You Just now

*London

You Just now

Hey. Copenhagen any good?

Jacques 4 days ago

?

Jacques 2 hours ago

You did not just create this comment with the magic of ajax?

You An hour ago

Oh yes I did.

Jacques 2 sec. ago

Donec sem mi, faucibus ac consectetur in, bibendum eget massa. Nulla at imperdiet magna.

You Just now

*London

You Just now

# Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget augue tincidunt porttitor sed vel libero. Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae hendrerit arcu iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie. Solor eget augue tincidunt porttitor sed vel libero. Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae hendrerit arcu iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget augue tincidunt porttitor sed vel libero. Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae hendrerit arcu iaculis.

## Heading 2

Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae

> Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae

### Heading 3

Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae

#### Proin imperdiet ligula

Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae hendrerit arcu iaculis.

#### Vestibulum in nisi et quam

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget augue tincidunt porttitor sed vel libero. Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae hendrerit arcu iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie. Solor eget augue tincidunt porttitor sed vel libero. Nullam aliquet molestie libero, pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae hendrerit arcu iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie dolor eget.

## Ordered list

1. Nullam aliquet molestie
2. pharetra porta lectus consequat nec. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula
3. Proin imperdiet ligula
4. Suspendisse molestie
5. Vestibulum in nisi et quam consectetur pretium. Proin imperdiet ligula sit amet sem eleifend vitae

#### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

The animations can be applied to everything. You only need to add the following two classes: animated + name of the animation.

Apply the animation to every demo below

## Hover over the screens to examine the details!

Want to try it? Visit http://std.li/7E. iOS 5 only (for the moment)