EQCSS Element Query for Responsive design -Tutorial Savvy

eqcss:element queries provides another approach to implement responsive design.
eqcss is different then @media queries.
@media queries addresses responsive design based on height,width,media type etc.
eqcss queries provides more than media queries.It mean is has all the capability of media queries with additional element level responsive design.
You can find more information on eqcss queries in the following link:-

https://www.npmjs.com/package/eqcss

In this demo, “we will learn to use eqcss queries to implement responsive design”.
To install eqcss module can be installed using npm install eqcss –s command.The following screenshot shows the terminal with eqcss installation.

To demonstrate EQCSS we have created a demo project name eqcss-demo.The project structure is as follows:-

The example contains 2 paragraph of different character length.By suing eqcss we have added a elementary media query, if the paragraph contains more then 5 characters then the text color will be red and if the paragraph has maximum of 3 character than the font color will be blue.
The index.html file has the demo code.The code content of index.html file are as follows:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset=utf-8>
    <title>EQCSS Responsive design demo</title>
    <style>
        @element 'p' and (min-characters: 5) {
            $this {
                color: Red;
            }
        }
        @element 'p' and (max-characters: 3) {
            $this {
                color: Blue;
            }
        }
    </style>
</head>
<body>
    <p>Hello developers. welcome to EQCSS. </p>
    <p>Bye</p>
</body>
<script src="node_modules/eqcss/EQCSS.min.js"></script>
</html>