Pastel is a unique, feature packed Dashboard with an intuitive and stunning interface.
Version 1.0.1 has just been released! See change log at the bottom of this page.
Main features
Log in screen with animations
The log in screen features a nice dark color scheme with big avatars, subtle textures, flying animations and a beautiful log in form.
200+ carefully crafted glyphs
Pastel includes two icon sets: iconSweets 2* and Entypo. Both are using @font-face fonts to make vector icons in any size or color.
iPhone web app with native gestures
If the Pastel mobile layout doesn’t suffice, the included iPhone web app will! Go to http://std.li/7E on your iPhone (add it to your Home Screen!) It’s ready to use in about three seconds from the first tap. It looks and feels just like a native app. Main features:
- Beautiful user interface with subtle textures.
- Built-in notifications (same as the desktop version of Pastel) with swipe gesture for deletion.
- Easy chart creation.
- Maps support (including geo-location) with marker and blue dot
- Chat bubbles
- Layered to-do list with 3D reveal animations
- Tabs and modal views
I only support iOS 5 officially at the moment, due to the new scrolling features Apple introduced with it. I’ve however tested it on different phones and it works fine on most. Expect both feature and compatibility updates.
Unobtrusive notifications
I’m including a modified version of my popular Codecanyon notifications plugin. It’s beautiful, lightweight and fast. Main features:
- Super easy to use
- Handsome small notifications
- Beautiful CSS3 animations.
- Time since creation of a notification – updated every 4th second!
- Include either an image or a vector icon in your notification.
- Timeout, set your notification to hide itself after a certain amount of time.
- Callback function, have full control of what will happen after the user clicks on a notification.
Two very different themes
Pastel includes two themes: Skeuo and Feather. Feather is a lighter more breathing theme – a great starting point if you want to customize the appearance heavily. Expect more themes and variations down the road.
Beautiful full-screen gallery
Turn normal photos into a full fledged gallery in seconds with the included Pastel Gallery plugin. Easy navigation with the arrow keys.
Maps and geolocation
If you need to create maps, the Pastel Maps plugin got you covered. It uses the Google Maps Image API for map images. You can easily search for a certain location or fetch a user’s location in HTML5 browsers.
Overlays and menus
It’s dead simple to create a gorgeous black dropdown menu with a few lines of HTML code. Alternatively you can use the Pastel modal plugin to make more sophisticated overlays with animations.
Charts
It’s easy to make beautiful charts of any kind. Pastel even includes a color tooltip plugin to make the information really pop.
UI elements
Pastel includes a lot of different user interface elements, you easily can incorporate in your own application, whether it is a form (with validation), a tags system or the cool checkbox toggles.
Other key features
- Fluid and responsive layout: The default layout is fixed at a 1100px width, on smaller screens Pastel will automatically rearrange UI elements until the single mobile column view is reached.
- Fluid grid: An easy to use CSS grid framework based on percentages. If you place more than one section in a grid container, it will automatically get a simple pagination.
- HTML5 Offline cache with update system: Use the Dashboard, even when no internet connection is present. It will automatically notify users (with notifications) when new updates are available. Works in most major browsers, IE9 and downwards excepted.
- Comprehensive documentation: Every aspect of Pastel has been documented.
- Hash navigation: No need for constant browser refreshes.
- Markdown editor with live preview and code highlighting is included.
- 30 CSS3 animations are included – every HTML element can easily be animated.
- Tooltips can be applied to every HTML element.
- Really beautiful error pages are included. Canvas 3D with color particles that tracks the movement of the mouse or your finger on a touch-enabled device.
- Date picker plugin: Turn an input field into a date picker in seconds.
- Interactive tables are very easy to initialize. Pastel includes both a simplified (iOS-like) and more traditional pagination.
- Interactive select boxes with search support.
- AJAX validation of forms with very little code.
- Easy-to-use tabs: You don’t have to write a single line of code to make tabs work, everything is handled by the Pastel framework.
- CSS3 buttons are using the built-in CSS color palettes with support for vector icons.
- Very rich modal plugin is included. Three different themes, 30 different animations, AJAX load support, fluid or fixed size.
- Touch optimized: While Pastel does include a seperate iPhone web app, the main Dashboard is optimized for mobile devices. Taps will be registered almost immediately.
- Layered to-do list: With a 3D turn animation and color degrading appearance.
- Colorful chat bubbles, iOS-like are included. Easy themeable.
- Cross-browser compatible: Works in IE8 and upwards. Missing CSS3 features degrades naturally.
- Tags creation: Turn a text field into a beautiful tagging form.
- Animated progress bars in different styles.
- For fun: Pull-to-refresh: Only supported on Chrome and Safari on Mac.
- iconSweets 2 files are not included with Pastel, but I’ve made an agreement with the icons’ creator, so you can use them directly from my server, as long as you only use them with Pastel and don’t download them off the server.
Questions or feedback
Don’t hesitate sending me a mail if you stumble upon a bug, have a question the documentation doesn’t answer or simply have a feature request.
Change log
New in 1.0.1 (released 10 March 2012)
- Support for external links. Check out the section Navigation in the docs.
- All-new file input plugin
- Much more lightweight than the previous plugin
- Doesn’t break when used with the validation plugin
- Documentation fixes
- You can now open the documentation locally on browsers that blocks ajax loading of local files (Chrome, Firefox etc.) Note: Only the seperate docs in the Documentation-folder will work locally. The docs in the Dashboard itself still requires uploading to a server (either on your own machine or on the internet).
- Some minor documentation errors have been fixed. Added small paragraph on how to use external links in the section Navigation.
Read UPDATE .md for complete change log and install instructions.
