The CSS Agent

The CSS Agent was simply designed to grant the DOM developer the ability to write complex inline styling of elements. For example, lets suppose we have an 2 responsive elements, each containing 50% of the parent height on desktop and tablet view, and each one containing a full row on mobile, on bootstrap it will look like that:

<div class="row">
        <div class="col-sm-6"></div>
        <div class="col-sm-6"></div>
</div>

Now lets say that both of these column elements have the same styling, and both look great on desktop. Now what will happen a lot of the times is that when we change the view to mobile, we will want to add some vertical margin between them. So the common option to do that is to add some id to the first one, then go to the stylesheet file, add a media query applying only to mobile view and adding some margin to that particular element. Another way to go about it (a better way in my opinion) is to have some class with a constant margin bottom value on mobile and use it each time you get across this need, then, on the other hand, you lose some of your flexibility and this might become annoying too.

The CSS Agent provides a simpler solution, it provides you with the ability to write these unique styling of elements that will be shown depending on the viewport and media queries that are predefined by the agent. Let's look at a simple example.

Let's Make It Simple!

In the example discussed above, all we have to do in order to implement two column elements with vertical margin between them on mobile is this:

<div class="row">
        <div class="col-sm-6" data-ca-xs="margin-bottom: 20px;"></div>
        <div class="col-sm-6"></div>
</div>

What we did here is telling the CSS Agent we would like to have a margin bottom of 20px on the first column element when viewing it on mobile. The way we approach the CSS Agent is by using attributes that start with ca- (abbreviation for CssAgent), or as shown in the example: data-ca- which is the HTML5 valid way. Then, we give the agent some constraints to determine when will this styling should be applied. These constraints are given by object called Reflectors.

Reflectors

CSS Agent reflectors are defined when the agent starts running, each reflector maps attribute name to window width constraints by containing a name, min window width value and max window width value. Whenever the window width will match the given min and max constraints, the attribute styling will be active. For example, we can define a new reflector, which contains the name 'xs' a min value of 0, and a max value of 768, and then when we will use this this HTML: <div class="row"> <div class="col-sm-6" data-ca-xs="margin-bottom: 20px;"></div> <div class="col-sm-6"></div> </div> the margin bottom rule will ve active only when the window width will is between 0 and 768 px.

The API

Start

CSSAgent.start([reflectors]);

What?

Optionally receive an array of reflector object (otherwise uses the agent default) and starts the agent.

Returns?

-

Parameter Name	Expected Type	Default Value	Description
reflectors	Array	`Noted below`	An array of reflector objects, each object contains 'name', 'min' and 'max' fields.

Example?

// start the agent using default reflectors
CSSAgent.start();
// start the agent using custom reflectors
CSSAgent.start([
        {name: 'small', min: null, max: 700},
        {name: 'big', min: 700, max: null}
]);
// this way, an example of a valid CSS Agent attribute will be

Default Reflectors

The CSS Agent default reflectors are bootstrap ready (according to v3.3.2) and contain:

xs - mobile only
sm - tablet devices only
md - small computer monitor (typically laptops)
lg - large computer monitor (typically desktops)
below-sm - mobile and tablet
above-sm - tablet, small and large computer monitors
below-md - mobile, tablet and small computer monitor
above-md - small and large computer monitors

To get a better understanding of it, it looks like that:

[
        {name: 'xs',            min: null,      max: 768},
        {name: 'sm',            min: 768,       max: 992},
        {name: 'below-sm',      min: null,      max: 992},
        {name: 'above-sm',      min: 768,       max: null},
        {name: 'md',            min: 992,       max: 1200},
        {name: 'below-md',      min: null,      max: 1200},
        {name: 'above-md',      min: 992,       max: null},
        {name: 'lg',            min: 1200,      max: null}
];

Note that null value is accepted as 'no limit' - meaning that if a max value is null, then the reflector will be active once passing the min window screen and with no upper limit.

Pseudo Selectors

The CSS Agent also supports inlining of CSS pseudo selectors. The agent currently supports hover and active, which can be applied by suffixing it to a reflector name, for example: <div data-ca-xs-hover="color: blue;"></div> will change the div font color to blue on hover on mobile view.

A Word About Good Practices

Inline styling in CSS (i.e. using style attribute) was created to achieve certain goals, but on the other hand might encourage a degree of laziness and code duplications. The idea is to learn to use inline styling in order to improve your code modularity, spare you the need of creating redundant id for elements solely for setting their style and inflate your CSS files so they become unreadable. The same with the CSS Agent, when facing a set of element that should be styled the same, the best practice remains defining a common class, adding the desired media query and settings the rules on the class within the media query.