⚡️-fast tiny CSS management tool sprinkled with API sugar
-fast tiny CSS management tool sprinkled with API sugar
Features
width:10 === '10px'
).supports()
and .supportsProperty()
!important
flag applicationTable of Contents generated with DocToc
quickcss(element, property)
quickcss(element[], property, value[, important])
quickcss(element[], properties)
quickcss.animation(name, frames)
quickcss.register(rule[, level, important])
quickcss.clearRegisered([level])
quickcss.supports(property, value)
quickcss.supportsProperty(property)
quickcss.normalizeProperty(property)
quickcss.normalizeValue(property, value)
var quickcss = require('quickcss')
// Fetch *computed* styles
quickcss(element, 'width') //=> 133.92px
// Apply styles
quickcss(element, 'width', 100) //=> 100px
quickcss(element, 'height', '50%') //=> 50%
// Multiple element application
quickcss(elements, 'font-size', 18) //=> 18px
// Multiple style application
quickcss(element, {
'position': 'fixed',
'fontWeight': 600,
'line-height': '1.3em'
})
// !important flag
quickcss(element, 'opacity', 0.5, true) //=> opacity:0.5 !important
// Deleting style
quickcss(element, 'position', null) //=> 'static'
// Animation registration (with auto-prefixing)
quickcss.animation('spin', {
'0%': {
'opacity': 0.2,
'transform': 'rotate(0deg)'
},
'100%': {
'opacity': 1,
'transform': 'rotate(360deg)'
}
})
quickcss(element, property)
Returns the element's computed value for the given property.
font-size
or fontSize
).// Assuming that {fontSize:'2.5em'}
quickcss(element, 'font-size') //=> 40px
quickcss(element[], property, value[, important])
Formats and applies value
for the given property
on element
.
font-size
or fontSize
).property
. For some properties, values will be normalized and translated to provide API sugar.!important
flag.quickcss(element[], properties)
Iterates over properties
, using the key as the property
and applies its value to the element
.
{property:value}
pair object.
font-size
or fontSize
).property
.quickcss(elements, {
'background-color': '#0f0f0f',
fontSize: 12,
opacity: 0.2
})
quickcss.animation(name, frames)
Registers the provided animation which can be used globally on the page. All properties will be automatically prefixed if needed.
{step:properties}
pairs.
50%
{property:value}
pair object.quickcss.animation('spin', {
'0%': {
'transform': 'rotate(0deg)'
},
'100%': {
'transform': 'rotate(360deg)'
}
})
quickcss(element, 'animation', 'spin 200ms linear 0ms infinite')
quickcss.register(rule[, level, important])
Registers the provided rule
object globally and returns the class name string which can be added to any element later.
{property:value}
pair object.
font-size
or fontSize
).property
.2
will override rules declared in level 1
and 0
. Default level is 0
.true
will cause all declarations to be declared along with an !important
flag.var newClass = quickcss.register({
width: 100,
opacity: 0.5,
color: '#000'
})
element.className += ` ${newClass}`
quickcss(element, 'width') //=> '100px'
quickcss.clearRegisered([level])
Clears/erases all of the globally registered rules for the given level
.
0
.quickcss.supports(property, value)
Checks if the provided value
is a valid value for property
.
quickcss.supportsProperty(property)
Checks if the provided property
is supported by the browser.
quickcss.normalizeProperty(property)
Converts the property name into kebeb-case e.g. 'fontSize' ->
font-size``.
quickcss.normalizeValue(property, value)
Converts the value to a valid CSS value e.g. 50 ->
50px``.
For many properites you can supply a value with typeof number
instead of string
(i.e. 10 vs "10px"
) and the value will be automatically normalized to a px
string. These properties include width
, height
, margin-left
, font-size
, z-index
, and more (refer to REQUIRES_UNIT_VALUE).
There is one property that receives slightly different normalization which is the line-height
property. If a numerical value is provided, it will be converted to em
.
quickcss(element, 'width', 10) //=> '10px'
quickcss(element, 'line-height', 10) //=> '10em'
MIT Daniel Kalen