Less than 20K, uncompressed and unminified. Requires only jQuery.

What is it? DynCSS parses your CSS for -dyn-(attribute) rules. These rules are Javascript expressions evaluated on browser's events like scroll and resize . The result is applied to the CSS attribute you have specified as suffix. For example, this will center vertically .header , dynamically changing margin-top as the window is resized: .header { -dyn-margin-top: '(@win-height - @el-height)/2.0'; } Here, @win-height is the dynamic height of the window and @el-height is the dynamic height of the current element ( .header in this case). The header of this page has been centered in this way. You can even create parallax effects by using the window's scrollTop and dynamically applying a CSS transform: .header { -dyn-webkit-transform: '"translate( 0px , #{-1*@win-scrollTop}px) "'; } Since the webkit-transform value is a string, the above snippet creates one by interpolating the dynamic value with #{..} .

Features You can make dynamic any CSS property — provided that it is writable by jQuery's .css() method. You do this by appending the -dyn- prefix and specifying a quoted Javascript expression. You can use placeholders to access dynamic information about the document; here's a list of built-in placeholders you can use: Prefixes Description @win-foo dynamically evaluates window.foo() @el-foo dynamically evaluates $(current-selector).css(foo) @jq-foo dynamically evaluates $(current-selector).foo() The syntax should be parsable by any CSS preprocessor. For example, I am using it with lessc for this website. Custom functions You can introduce custom functions to be evaluated at run-time, by adding them to window.dynCss.lib . For example, here's how you can introduce a center function that returns the centers of the current window: window.dynCss.lib.center = function() { return {x: window.width()/2, y: window.height()/2 }; } To use it in a rule, invoke it with the @ prefix: -dyn-margin-left: '@center().x'; Virtual properties - new To enable more precise positioning of elements, the following dynamic properties of position=fixed elements have been introduced: property name affects -dyn-fixed-vertical-center top -dyn-fixed-horizontal-center left They take implicitly into account the size of the element in order to center it horizontally; for example: .element { position: fixed; -dyn-fixed-vertical-center: '@fixedVerticalCenter(".element2")'; } will vertically align .element to .element2 (another fixed element).

Responsiveness DynCSS allows to easily program responsiveness in your CSS. To do so you define a list of breakpoints and the dynamic variable to watch (which is typically the size of the window). You can do this in a <script> tag in your HTML; here's how you set two breakpoints at 481 and 961 on the window's width variable @win-width : <script> window.dynCss.api.setBreakpoints([481,961],'@win-width'); </script> Now, you can define how each property behaves above an below the breakpoints; for example, we can change dynamically the font size: .header__title { -dyn-font-size: '@selectFrom(["3em", "4em", "5em"])'; } selectFrom is a built-in function that returns one of the elements of the input list by using the breakpoints specified with setBreakpoints . Here, the font size will be 3em under 480px, 4em under 960px, and 5em above 960px.

Dynamic styles DynCSS allows to add a class dynamically to all elements of a given selector, based on a condition to be evaluated at run-time; this is useful to build scroll spies. You can specify the class name to be added with -dyn-set-state-(class-name) : .to-be-highlighted { -dyn-set-state-highlight: '@isVerticallyVisible("#my-section")'; } here, we add a .highlight class to all elements .to-be-highlighted whenever the function @isVerticallyVisible returns true. We assume that isVerticallyVisible receives a selector and checks whether it is in or out of the view port. Here's a custom definition of isVerticallyVisible in Livescript, but you can write your own of course: isVerticallyVisible = (el, threshold) -> r = jQuery(el)[0].getBoundingClientRect(); w = jQuery(window) vp = {} vp.top = w.scrollTop() vp.bottom = w.scrollTop() + w.height() if not threshold? threshold := w.height()/3 value = | r.top >= 0 and r.top < (threshold) => true | r.top < 0 and r.bottom > (threshold) => true | otherwise => false return value