Molecules

The purpose of the molecules is to combine different properties and their values into a single definition. If you need to handle the vendor prefixes AbsurdJS provides another way. Check it out here.



size: [width]/[height]

sets the width and height of an element

JavaScript:
api.add({
body: {
    size: 100,
    p: {
        size: '300px/40'
    },
    section: {
        size: '/200px'
    }
}
}).compile(function(err, css) {
console.log(css);
});
CSS:
body {
    width: 100%;
    height: 100%;
}
body p {
    width: 30%;
    height: 40%;
}
body section{
    height: 200px;
}

cf: [all | before | after]

clear fix

JavaScript:
api.add({
    body: {
        cf: 'all',
        p: {
            cf: 'before'
        },
        section: {
            cf: 'after'
        }
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
body:before, 
body:after, 
body p:before, 
body section:after {
  content: " ";
  display: table;
  clear: both;
}

grid: [columns]/[selector]

grid definition

JavaScript:
api.add({
    'section.container': {
        grid: '3/div'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
section.container:before, section.container:after {
  content: " ";
  display: table;
  clear: both;
}
section.container div {
  float: left;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 33.33%;
}

moveto: [x]/[y]/[z]

translates an element to x/y/z position

JavaScript:
api.add({
    p: {
        moveto: '10/20/30'
    },
    div: {
        moveto: '50px/100px'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
p {
  transform: translate3d(10px,20px,30px);
  -webkit-transform: translate3d(10px,20px,30px);
  -ms-transform: translate3d(10px,20px,30px);
}
div {
  transform: translate(50px,100px);
  -webkit-transform: translate(50px,100px);
  -ms-transform: translate(50px,100px);
}

rotateto: [deg]

rotates an element

JavaScript:
api.add({
    p: {
        rotateto: '-45'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
p {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
}

scaleto: [x]/[y]

scales an element

JavaScript:
api.add({
    p: {
        scaleto: '1.3/1.3'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
p {
  transform: scale(1.3,1.3);
  -webkit-transform: scale(1.3,1.3);
  -ms-transform: scale(1.3,1.3);
}

animate: [string | object | array]

a shortcut to animate.css snippets. Valid values are: bounce, flash, pulse, shake, swing, tada, wobble, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp, fadeIn, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInUp, fadeInUpBig, fadeOut, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutUp, fadeOutUpBig, flip, flipInX, flipInY, flipOutX, flipOutY, lightSpeedIn, lightSpeedOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight, slideInDown, slideInLeft, slideInRight, slideOutLeft, slideOutRight, slideOutUp, hinge, rollIn, rollOut.

Triggering an animation by its name

JavaScript:
api.add({
    div: {
        animate: 'rotateInUpLeft'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
@keyframes rotateInUpLeft {
    0% {
      transform-origin: left bottom;
      opacity: 0;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }
    100% {
      transform-origin: left bottom;
      opacity: 1;
      transform: rotate(0);
      -webkit-transform: rotate(0);
    }
}
@-webkit-keyframes rotateInUpLeft {
    0% {
      transform-origin: left bottom;
      opacity: 0;
      transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
    }
    100% {
      transform-origin: left bottom;
      opacity: 1;
      transform: rotate(0);
      -webkit-transform: rotate(0);
    }
}
div {
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    animation-name: rotateInUpLeft;
    -webkit-animation-name: rotateInUpLeft;
}

Triggering an animation by setting more properties

JavaScript:
api.add({
    div: {
        animate: {
            name: 'slide-to-top',
            duration: '1000ms',
            iterationCount: 2,
            fillMode: 'both',
            timingFunction: 'ease',
            delay: '1000ms',
            direction: 'alternate',
            playState: 'running'
        }
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  animation-name: slide-to-top;
  -webkit-animation-name: slide-to-top;
  -moz-animation-name: slide-to-top;
  -ms-animation-name: slide-to-top;
  -o-animation-name: slide-to-top;
  animation-duration: 1000ms;
  -webkit-animation-duration: 1000ms;
  -moz-animation-duration: 1000ms;
  -ms-animation-duration: 1000ms;
  -o-animation-duration: 1000ms;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  -moz-animation-timing-function: ease;
  -ms-animation-timing-function: ease;
  -o-animation-timing-function: ease;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: 2;
  -moz-animation-iteration-count: 2;
  -ms-animation-iteration-count: 2;
  -o-animation-iteration-count: 2;
  animation-delay: 1000ms;
  -webkit-animation-delay: 1000ms;
  -moz-animation-delay: 1000ms;
  -ms-animation-delay: 1000ms;
  -o-animation-delay: 1000ms;
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-play-state: running;
  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
}

Only definition of animation.

JavaScript:
absurd.add({
    animate: ['show', {
        '0%': { color: '#FFF' },
        '100%': { color: '#000' }
    }]
}).compile(function(err, css) {
    console.log(css);
});
CSS:
@keyframes show {
  0% { color: #FFF; }
  100% { color: #000; }
}
@-webkit-keyframes show {
  0% { color: #FFF; }
  100% { color: #000; }
}

transparent: [float]

setting opacity

JavaScript:
api.add({
    div: {
        transparent: 0.3
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  filter: alpha(opacity=30);
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
  opacity: 0.3;
  -moz-opacity: 0.3;
  -khtml-opacity: 0.3;
}

gradient: [color]/[color]/[color...]/[deg]

Creating linear gradient.

JavaScript:
api.add({
    div: {
        gradient: '#F00/#00F'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  background: -webkit-linear-gradient(0deg, #F00 0%, #00F 100%);
  background: -moz-linear-gradient(0deg, #F00 0%, #00F 100%);
  background: -ms-linear-gradient(0deg, #F00 0%, #00F 100%);
  background: -o-linear-gradient(0deg, #F00 0%, #00F 100%);
  background: linear-gradient(0deg, #F00 0%, #00F 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000FF', endColorstr='#FFFF0000',GradientType=0);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000FF',endColorstr='#FFFF0000',GradientType=0);
}

Creating linear gradient with multiple stops.

JavaScript:
api.add({
    div: {
        gradient: '#F00/#00F/#BADA55/#000'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  background: -webkit-linear-gradient(0deg, #F00 0%, #00F 33%, #BADA55 66%, #000 99%);
  background: -moz-linear-gradient(0deg, #F00 0%, #00F 33%, #BADA55 66%, #000 99%);
  background: -ms-linear-gradient(0deg, #F00 0%, #00F 33%, #BADA55 66%, #000 99%);
  background: -o-linear-gradient(0deg, #F00 0%, #00F 33%, #BADA55 66%, #000 99%);
  background: linear-gradient(0deg, #F00 0%, #00F 33%, #BADA55 66%, #000 99%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF000000', endColorstr='#FFFF0000',GradientType=0);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF000000',endColorstr='#FFFF0000',GradientType=0);
}

Creating linear gradient by setting an angle.

JavaScript:
api.add({
    div: {
        gradient: '#BADA55/#000/50deg'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  background: -webkit-linear-gradient(50deg, #BADA55 0%, #000 100%);
  background: -moz-linear-gradient(50deg, #BADA55 0%, #000 100%);
  background: -ms-linear-gradient(50deg, #BADA55 0%, #000 100%);
  background: -o-linear-gradient(50deg, #BADA55 0%, #000 100%);
  background: linear-gradient(50deg, #BADA55 0%, #000 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBADA55', endColorstr='#FF000000',GradientType=1);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBADA55',endColorstr='#FF000000',GradientType=1);
}

Creating linear gradient by setting an angle and determining the stops' positions.

JavaScript:
api.add({
    div: {
        gradient: '#BADA55/#000 10%/#999 20%/#FF0/50deg'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  background: -webkit-linear-gradient(50deg, #BADA55 0%, #000 10%, #999 20%, #FF0 99%);
  background: -moz-linear-gradient(50deg, #BADA55 0%, #000 10%, #999 20%, #FF0 99%);
  background: -ms-linear-gradient(50deg, #BADA55 0%, #000 10%, #999 20%, #FF0 99%);
  background: -o-linear-gradient(50deg, #BADA55 0%, #000 10%, #999 20%, #FF0 99%);
  background: linear-gradient(50deg, #BADA55 0%, #000 10%, #999 20%, #FF0 99%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBADA55', endColorstr='#FFFFFF00',GradientType=1);
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFBADA55',endColorstr='#FFFFFF00',GradientType=1);
}

blur: [number]

Adding blur.

JavaScript:
api.add({
    div: {
        blur: 20
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  filter: blur(20px);
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -ms-filter: blur(20px);
}

brightness: [number]

Brightness adjustment.

JavaScript:
api.add({
    div: {
        brightness: 20
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  filter: brightness(20px);
  -webkit-filter: brightness(20px);
  -moz-filter: brightness(20px);
  -ms-filter: brightness(20px);
}

contrast: [number]

contrast adjustment.

JavaScript:
api.add({
    div: {
        contrast: 20
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  filter: contrast(20px);
  -webkit-filter: contrast(20px);
  -moz-filter: contrast(20px);
  -ms-filter: contrast(20px);
}

invert: [number]

invert adjustment.

JavaScript:
api.add({
    div: {
        invert: 20
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  filter: invert(20px);
  -webkit-filter: invert(20px);
  -moz-filter: invert(20px);
  -ms-filter: invert(20px);
}

saturate: [number]

saturate adjustment.

JavaScript:
api.add({
    div: {
        saturate: 20
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  filter: saturate(20px);
  -webkit-filter: saturate(20px);
  -moz-filter: saturate(20px);
  -ms-filter: saturate(20px);
}

sepia: [number]

sepia adjustment.

JavaScript:
api.add({
    div: {
        sepia: 20
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  filter: sepia(20px);
  -webkit-filter: sepia(20px);
  -moz-filter: sepia(20px);
  -ms-filter: sepia(20px);
}

calc: [property]/[expression]

Calculating a property.

JavaScript:
api.add({
    div: {
        calc: 'width/100% - 45px'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  -lh-property: 0;
  width: -webkit-calc(100% - 45px);
  width: -moz-calc(100% - 45px);
  width: calc(100% - 45px);
}

dropshadow: [property]/[expression]

Adding drop shadow.

JavaScript:
api.add({
    div: {
        dropshadow: '16px 16px 10px #000000'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
div {
  filter: drop-shadow(16px 16px 10px #000000);
  -webkit-filter: drop-shadow(16px 16px 10px #000000);
  -moz-filter: drop-shadow(16px 16px 10px #000000);
  -ms-filter: drop-shadow(16px 16px 10px #000000);
}

trsform: transformations

Alias to transform property. Sets the needed browser prefixes.

JavaScript:
api.add({
    section: {
        trsform: 'scale(1.2, 1.2) rotate(30deg)'
    }
}).compile(function(err, css) {
    console.log(css);
});
CSS:
section {
  transform: scale(1.2, 1.2) rotate(30deg);
  -webkit-transform: scale(1.2, 1.2) rotate(30deg);
  -moz-transform: scale(1.2, 1.2) rotate(30deg);
  -ms-transform: scale(1.2, 1.2) rotate(30deg);
  -o-transform: scale(1.2, 1.2) rotate(30deg);
}




comments powered by Disqus