Pixelate is provided as a pub package for easy installation. Modify the pubspec.yaml file to include references to Pixelate and the default theme as follows.
name: your_cool_app
dependencies:
pixelate: any
pixelate_flat: any
If you use Dart Editor, select your project from the Files view, then goto Tools, and run Pub Install.
If you use the command line, ensure the Dart SDK is on your path, and then run: pub install
To start using a Pixelate component it needs to be referenced and added to the site's HTML. All components can be found within the packages/pixelate/components path. These can be added through the import tag within the HTML document as follows.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First Pixelate Component</title>
<!-- Import the Pixelate Component's stylesheet -->
<link rel="stylesheet" href="packages/pixelate_flat/stylesheets/expander.css">
<!-- Import the Pixelate Component -->
<link rel="import" href="packages/pixelate/components/expander/expander.html">
<!-- Initialize Polymer -->
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<px-expander header="My first component">
<p>Welcome to Pixelate!</p>
<p>This is your first component</p>
</px-expander>
</body>
</html>
Pixelate elements do not come with their own built in look and feel. Instead the elements can be styled externally through a theme. Theme's are provided as additional pub packages so its simple for a user to swap for a theme that fits the designer's whims.
The Pixelate author's provide the Pixelate Flat Theme, which is a modern, darkly colored, flat design. It is inspired by Square UI from Designmodo.