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:

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:

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:

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):

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: