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

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

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
    • 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

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?

avatar

?

avatar

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

avatar

Oh yes I did.

avatar

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

avatar

*London

avatar

Hey. Copenhagen any good?

avatar

?

avatar

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

avatar

Oh yes I did.

avatar

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

avatar

*London

avatar

Hey. Copenhagen any good?

avatar

?

avatar

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

avatar

Oh yes I did.

avatar

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

avatar

*London

avatar

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.

Hover over the screens to examine the details!

Want to try it? Visit http://pattern.dk/pastel/iphone/. iOS 5 only (for the moment)