Custom rules
Classes, IDs and Ti Elements
You can style any Ti Element, IDs or your own classes with as many attributes as needed. You can also optionally target specific platforms, devices, or add conditional blocks with global variables.
Whether you want to style a Ti Element (also known as a markup element), a custom id prefixed with a hash (#), or a custom class prefixed with a period (.), the structure is as follows:
Modifier Key
- For Titanium Elements, use the exact name of the element, such as
Label
,Button
, orScrollView
. - For IDs, we recommend sticking with the camelCase naming convention to follow the same convention that JavaScript uses.
- For classes, use the kebab-case naming convention to ensure compatibility with PurgeTSS v6.x and above. For example, use
.my-custom-class-name
instead of.myCustomClassName
.
PurgeTSS v5 or earlier projects
For projects created with PurgeTSS v5 or earlier that are now using version 6.x.x or above, please set purge.options.missing
to true in config.js
to get a report ( at the end of app.tss
) of any missing classes so you can update them to the new naming convention.
Default, Platform, Device, or Conditional Blocks
- To generate a global style, use either the lowercase
default
or the uppercaseDEFAULT
keyword. - To target a specific platform, use the
ios
orandroid
keywords. - To target a specific device, use the
tablet
orhandheld
keywords. - To target a condition with a global variable, use the
[if=globalVariableName]
keyword.
Property Values
- For
Titanium
constants,Alloy Configuration Values
, orGlobal Variables
, always enclose them in quotes. - For
color
values, you can usehex
,8-digit hex
,rgb(R,G,B)
,rgba(R,G,B,A)
,transparent
, or any of the standard color names. It is recommended to use hex values for colors to avoid any possible issues with the opacity modifier. - For
spacing
values, you can use different types of units:em
,rem
,%
,px
,dp
,cm
, orin
.%
,px
,cm
, orin
- These values are passed without any conversion.em
orrem
- Values in em or rem will be converted with this little formula:value * 16
.dp
- For these values, the unit type will be removed and the value will remain intact.
'config.js' file example
./purgetss/config.js
module.exports = {
theme: {
'#main-banner': {
DEFAULT: {
width: '300px',
height: '80px'
},
ios: {
clipMode: 'Ti.UI.iOS.CLIP_MODE_DISABLED'
}
},
'.gallery': {
DEFAULT: {
height: 'Ti.UI.SIZE'
},
ios: {
clipMode: 'Ti.UI.iOS.CLIP_MODE_ENABLED'
},
android: {
hiddenBehavior: 'Ti.UI.HIDDEN_BEHAVIOR_GONE'
},
handheld: {
width: '250px'
},
tablet: {
width: '500px'
}
},
TextField: {
DEFAULT: {
top: 10,
left: 20,
right: 20,
bottom: 0
},
'[if=Alloy.Globals.iPhoneX]': {
bottom: 'Alloy.CFG.iPhoneXNotchSize'
},
android: {
touchFeedback: true
}
},
}
};
Custom ‘./purgetss/styles/tailwind.tss’ file
/* Property: TextField */
/* Description: A single line text field. */
'TextField': { top: 10, left: 20, right: 20, bottom: 0 }
'TextField[if=Alloy.Globals.iPhoneX]': { bottom: Alloy.CFG.iPhoneXNotchSize }
'TextField[platform=android]': { touchFeedback: true }
/* Custom Classes */
'#main-banner': { width: '300px', height: '80px' }
'#main-banner[platform=ios]': { clipMode: Ti.UI.iOS.CLIP_MODE_DISABLED }
'.gallery': { height: Ti.UI.SIZE }
'.gallery[platform=ios]': { clipMode: Ti.UI.iOS.CLIP_MODE_ENABLED }
'.gallery[platform=android]': { hiddenBehavior: Ti.UI.HIDDEN_BEHAVIOR_GONE }
'.gallery[formFactor=handheld]': { width: '250px' }
'.gallery[formFactor=tablet]': { width: '500px' }
...