https://github.com/maccesar/purgetss
PurgeTSS is a toolkit designed to make it easier for Titanium developers to create visually attractive mobile apps. It offers features like customizable utility classes, support for icon fonts, a basic animation module, a simple grid system, and a "shades" command for generating custom colors.
https://github.com/maccesar/purgetss
alloy android appcelerator cli ios javascript nodejs purgetss titanium titanium-module
Last synced: about 2 months ago
JSON representation
PurgeTSS is a toolkit designed to make it easier for Titanium developers to create visually attractive mobile apps. It offers features like customizable utility classes, support for icon fonts, a basic animation module, a simple grid system, and a "shades" command for generating custom colors.
- Host: GitHub
- URL: https://github.com/maccesar/purgetss
- Owner: macCesar
- License: mit
- Created: 2020-07-14T18:56:34.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2025-06-19T21:01:22.000Z (10 months ago)
- Last Synced: 2025-06-19T21:30:55.334Z (10 months ago)
- Topics: alloy, android, appcelerator, cli, ios, javascript, nodejs, purgetss, titanium, titanium-module
- Language: JavaScript
- Homepage:
- Size: 55.9 MB
- Stars: 25
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
**PurgeTSS** is a toolkit for building mobile apps with the [Titanium framework](https://titaniumsdk.com). It adds practical utilities to speed up styling and reduce repeated setup work.
It includes utility classes, icon font support, an Animation module, a simple grid system, and the `shades` command for generating custom colors.
If you build UI-heavy screens, PurgeTSS helps you move faster without hand-writing long TSS files.
---
## What's New in v7.3.x
**File rename and improved error handling.** PurgeTSS v7.3 renames `tailwind.tss` to `utilities.tss` to reflect the project's standalone identity, and adds XML syntax validation to catch errors early.
### Breaking changes
- **File rename**: Output file is now `utilities.tss` instead of `tailwind.tss`
- Generated file: `purgetss/styles/utilities.tss` (was `purgetss/styles/tailwind.tss`)
- Distribution file: `dist/utilities.tss` (was `dist/tailwind.tss`)
### Major improvements
- **XML syntax validation**: Catches common Alloy XML malformations before processing
- Detects missing opening `<` brackets (e.g., `Label id=` instead of `
```
You can use any position, size, color, opacity, or transformation class from `utilities.tss`.
### Available methods
| Method | Description |
| --------------------------------------- | --------------------------------------------------------------------------------------------- |
| `play(views, cb)` / `toggle(views, cb)` | Animate views from current state to the animation state. Toggles `open`/`close` on each call. |
| `open(views, cb)` | Explicitly run the `open` state animation. |
| `close(views, cb)` | Explicitly run the `close` state animation. |
| `apply(views, cb)` | Apply properties instantly without animation. |
| `draggable(views)` | Make a view or array of views draggable inside their parent. |
### Callback event object
All callbacks (`play`, `open`, `close`, `apply`) receive an enriched event object:
```js
{
type: String, // event type ('complete' or 'applied')
bubbles: Boolean,
cancelBubble: Boolean,
action: String, // 'play' or 'apply'
state: String, // 'open' or 'close'
id: String, // Animation object ID
targetId: String, // ID of the animated view
index: Number, // position in array (0-based)
total: Number, // total views in array
getTarget: Function // returns the animated view object
}
```
When animating an **array of views**, the callback is called once per view with the corresponding `index` and `total` values.
```js
$.myAnimation.play([$.card1, $.card2, $.card3], (e) => {
console.log(`Animated ${e.index + 1} of ${e.total}`) // "Animated 1 of 3", etc.
if (e.index === e.total - 1) {
console.log('All done!')
}
})
```
### Multi-state animations
Use `open`, `close`, and `complete` modifiers inside `animationProperties` to define different states:
```xml
```
### Draggable views
```js
$.myAnimation.draggable($.myView)
// or with constraints:
$.myAnimation.draggable([$.card1, $.card2])
```
Use `bounds` to restrict movement, and `drag`/`drop` modifiers for drag-state animations. Use `vertical-constraint` or `horizontal-constraint` classes to limit the drag axis.
### Utility classes for animations
| Class pattern | Description |
| --------------------------------------------------- | ----------------------------- |
| `duration-{n}` | Animation duration in ms |
| `delay-{n}` | Delay before animation starts |
| `rotate-{n}` | 2D rotation in degrees |
| `scale-{n}` | Scale factor |
| `repeat-{n}` | Number of repeats |
| `ease-in`, `ease-out`, `ease-linear`, `ease-in-out` | Timing curve |
| `zoom-in-{n}`, `zoom-out-{n}` | Zoom animations |
| `drag-apply`, `drag-animate` | Drag interaction style |
| `vertical-constraint`, `horizontal-constraint` | Constrain drag axis |
### Utility functions
| Function | Description |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| `deviceInfo()` | Logs detailed platform and display information to the console. Works in both Alloy and Classic projects. |
| `saveComponent({ source, directory })` | Saves a view snapshot as PNG to the photo gallery. |
See the full documentation at [purgetss.com/docs/animation-module/introduction](https://purgetss.com/docs/animation-module/introduction).
In short, PurgeTSS keeps styling consistent and removes a lot of repetitive UI setup work.
### Visit the official documentation site at [purgetss.com](https://purgetss.com) to learn more.
## Requirements
- **Titanium SDK** (Compatible with all versions; 13.1.1.GA recommended for full property support)
- **Alloy Framework** (for most commands)
- **Node.js 20+** (required for the CLI tool)
## Table of Content
- [What's New in v7.2](https://purgetss.com/#whats-new-in-v72x)
- [Installation](https://purgetss.com/docs/installation)
- [Commands](https://purgetss.com/docs/commands)
- Customization
- [config file](https://purgetss.com/docs/customization/the-config-file)
- [Custom rules](https://purgetss.com/docs/customization/custom-rules)
- [apply directive](https://purgetss.com/docs/customization/the-apply-directive)
- [opacity modifier](https://purgetss.com/docs/customization/the-opacity-modifier)
- [Arbitrary values in XMLs](https://purgetss.com/docs/customization/arbitrary-values)
- [Platform and Device modifiers](https://purgetss.com/docs/customization/platform-and-device-modifiers)
- [Icon Fonts Libraries](https://purgetss.com/docs/customization/icon-fonts-libraries)
- Animation module
- [Introduction](https://purgetss.com/docs/animation-module/introduction)
- [Available utilities](https://purgetss.com/docs/animation-module/available-utilities)
- [Complex UI elements](https://purgetss.com/docs/animation-module/complex-ui-elements)
- [Grid System](https://purgetss.com/docs/grid-system)