JOY!

Responsive CSS Preprocessor

CSS Properties

Supported Properties and Use

JOY! supports the following CSS properties for conversion. CSS Properties that are not on the list will be ignored by the preprocessor when it encounters the @joy function in your stylesheet.

Supported CSS Properties (In Alphabetical Order):

bottom: value | auto | inherit;
font-size: value | inherit;
height: value | auto | inherit;
letter-spacing: value| normal | inherit;
line-height: value | normal | inherit;
margin: value { 1 - 4 } | auto | inherit;
margin-bottom: value | auto | inherit;
margin-left: value | auto | inherit;
margin-right: value | auto | inherit;
margin-top: value | auto | inherit;
max-height: value | auto | inherit;
max-width: value | none | inherit;
min-height: value | none | inherit;
min-width: value | none | inherit;
padding: value { 1 - 4 } | auto | inherit;
padding-bottom: value | auto | inherit;
padding-left: value | auto | inherit;
padding-right: value | auto | inherit;
padding-top: value | auto | inherit;
text-indent: value | hanging | inherit;
top: value | auto | inherit;
width: value | auto | inherit;
word-spacing: value | normal | inherit;

Future CSS Property Support

Support for additional properties is currently under development.

border-radius: value { 1 - 4 } | none;
box-shadow: value { h-shadow , v-shadow , blur, spread } | inset | none;
background-size: value { length, percentage } | cover | contain;

If you have suggestions for additional CSS Properties you’d like us to implement please contact us and we’ll do our best to get you up and running.