Published in
2 min readMar 18, 2016
- 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>- The output of this demo looks like following screenshot:-
- The demo code can be downloaded from following link:-https://github.com/saan1984/eqcss-demo
The post EQCSS Element Query for Responsive design appeared first on Tutorial Savvy.
