Introduction

ducky-css

General syntax rules:

Target elements using their class or ID as you would in standard CSS, followed by a :

.class:
#id:
div:

ducky-css property names are the same as standard CSS, but in replace of hyphens they're in camelCase.

for example: backgroundAttachment instead of background-attachment

.myClass:
backgroundColor = blue

#myId:
alignItems = center

_{Note: There are no curly braces or such; a group of CSS is started with the : , so if you'd like to keep things visually organized simply add an empty line between each group.}

There are also various shorthand properties available that combine common groups of CSS into one line. These follow the syntax of:

<shorthand>;;

For example, to absolutely center an element within it's parent container, you can do this by simply using the centered;; shorthand:

.centerParent:
position = relative

.centeredChild:
centered;;

In this case, the shorthand applies the following lines of CSS to the element in just one line:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);