Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
712 lines (642 sloc) 16.6 KB

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

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

cf: [all | before | after]

clear fix

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

grid: [columns]/[selector]

grid definition

api.add({ 'section.container': { grid: '3/div' } }).compile(function(err, css) { console.log(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

api.add({ p: { moveto: '10/20/30' }, div: { moveto: '50px/100px' } }).compile(function(err, css) { console.log(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

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

scaleto: [x]/[y]

scales an element

api.add({ p: { scaleto: '1.3/1.3' } }).compile(function(err, css) { console.log(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

api.add({ div: { animate: 'rotateInUpLeft' } }).compile(function(err, css) { console.log(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

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); }); 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.

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

transparent: [float]

setting opacity

api.add({ div: { transparent: 0.3 } }).compile(function(err, css) { console.log(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.

api.add({ div: { gradient: '#F00/#00F' } }).compile(function(err, css) { console.log(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.

api.add({ div: { gradient: '#F00/#00F/#BADA55/#000' } }).compile(function(err, css) { console.log(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.

api.add({ div: { gradient: '#BADA55/#000/50deg' } }).compile(function(err, css) { console.log(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.

api.add({ div: { gradient: '#BADA55/#000 10%/#999 20%/#FF0/50deg' } }).compile(function(err, css) { console.log(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.

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

brightness: [number]

Brightness adjustment.

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

contrast: [number]

contrast adjustment.

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

invert: [number]

invert adjustment.

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

saturate: [number]

saturate adjustment.

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

sepia: [number]

sepia adjustment.

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

calc: [property]/[expression]

Calculating a property.

api.add({ div: { calc: 'width/100% - 45px' } }).compile(function(err, css) { console.log(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.

api.add({ div: { dropshadow: '16px 16px 10px #000000' } }).compile(function(err, css) { console.log(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.

api.add({ section: { trsform: 'scale(1.2, 1.2) rotate(30deg)' } }).compile(function(err, css) { console.log(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); }