Adaptive layout with Restive.JS
To begin with, I would like to tell you that my specialization is Backend, but the layout and client part have to be dealt with constantly, especially in my projects, which I do alone. It has long been the unspoken rule that the site should be convenient on all devices, including all their diversity, especially in the age of popularization of the mobile Internet. Fortunately, CSS3 allows you to do this with the help of media queries (media queries) . But there is another way that seemed more convenient to me. Depending on the screen size, its orientation, type of device, global styles should be set to the html tag (and other elements can also). And in CSS, building on these classes, set specific styles for different occasions. So CSS will become more understandable and we will get rid of the use of media expressions. For this we need Restive.JS . Since I am a human practitioner, and the full description is better read on the plug-in site, in the article I will limit myself to creating an adaptive mini-page, during which, I hope, it will become clear why all this is necessary.
Persistently searched for articles about Restive.JS on Habré, but did not find.
The principle of operation is as follows. When changing the orientation or size of the window (as well as loading the page), global classes are added to the selected element of your DOM (recommended by html or body). These can be either standard classes installed by Restive.JS (is_mobile, is_landscape, etc.), or your custom ones, which are installed under certain conditions.
')
Yes, he needs jQuery. It runs once on the page for the selected selector, the developers advise to use html or body as more global, although there may be cases when you need to use other elements.
The entire configuration is passed to the constructor as an object, which must contain 3 main elements: breakpoints, classes, turbo_classes.
This parameter indicates the point-border. Restive.JS will constantly monitor your browser window and, if the conditions are met, set the appropriate class. Array Restive.JS also has standard point names that can be specified instead of pixels, they cover most screens, but they work with an exact match, i.e. for some intermediate or non-standard options, it is better to use points that are repelled by the number of pixels.
And in this array classes are specified for each point. The point with the index N corresponds to the class with the index N. That is, the length of these arrays is identical. In our example, it will be like this: if the user’s screen width is <= 320, the lt320 class will be installed, from 321 to 720 - lt720, from 721 and higher - without a class.
Without this parameter, Restive.JS will not add its standard classes. In essence, this is a string listing the classes you want to monitor. Standard values ​​that can be tracked are: is_mobile, is_phone, is_retina, is_tablet, is_pc, is_tv, is_portrait, is_landscape. For example, if you go to our demo from the iPhone, the alias classes will be installed mobile, phone, portrait (landscape).
When I open this page on my laptop, then html has only 2 classes: landscape and pc.
Add some content to our HTML. This will be a list, but on different screens a different number of list elements will be placed on one line. “Too easy task”, you will say and you will be right. But I would like to show exactly the essence of Restive.JS, everyone else gets to the rest himself, good, there is nothing complicated there. We also do a check on the device.
This is how we will use border classes in CSS. In my opinion, it is so much clearer than using media expressions (attention, an absolutely subjective opinion).
Also in Restive.JS there are several convenient events that can be especially useful (for example, when changing the orientation of the phone).
Open Demo on different devices, change the screen, etc.
GitHub page
Official documentation
Persistently searched for articles about Restive.JS on Habré, but did not find.
The principle of operation is as follows. When changing the orientation or size of the window (as well as loading the page), global classes are added to the selected element of your DOM (recommended by html or body). These can be either standard classes installed by Restive.JS (is_mobile, is_landscape, etc.), or your custom ones, which are installed under certain conditions.
Connecting Restive.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="restive.js"></script> <link rel="stylesheet" href="normalize.css"> <link rel="stylesheet" href="styles.css"> <script type="text/javascript"> $(document).ready(function () { $('html').restive({ breakpoints: ['320', '720'], classes: ['lt320', 'lt720'], turbo_classes: 'is_phone=phone,is_tablet=tablet,is_pc=pc,is_portrait=portrait,is_landscape=landscape' }); }); </script> </head> <body> </body> </html> ')
Yes, he needs jQuery. It runs once on the page for the selected selector, the developers advise to use html or body as more global, although there may be cases when you need to use other elements.
The entire configuration is passed to the constructor as an object, which must contain 3 main elements: breakpoints, classes, turbo_classes.
Breakpoints
This parameter indicates the point-border. Restive.JS will constantly monitor your browser window and, if the conditions are met, set the appropriate class. Array Restive.JS also has standard point names that can be specified instead of pixels, they cover most screens, but they work with an exact match, i.e. for some intermediate or non-standard options, it is better to use points that are repelled by the number of pixels.
Classes
And in this array classes are specified for each point. The point with the index N corresponds to the class with the index N. That is, the length of these arrays is identical. In our example, it will be like this: if the user’s screen width is <= 320, the lt320 class will be installed, from 321 to 720 - lt720, from 721 and higher - without a class.
Turbo classes
Without this parameter, Restive.JS will not add its standard classes. In essence, this is a string listing the classes you want to monitor. Standard values ​​that can be tracked are: is_mobile, is_phone, is_retina, is_tablet, is_pc, is_tv, is_portrait, is_landscape. For example, if you go to our demo from the iPhone, the alias classes will be installed mobile, phone, portrait (landscape).
When I open this page on my laptop, then html has only 2 classes: landscape and pc.
CSS for Restive.JS
Add some content to our HTML. This will be a list, but on different screens a different number of list elements will be placed on one line. “Too easy task”, you will say and you will be right. But I would like to show exactly the essence of Restive.JS, everyone else gets to the rest himself, good, there is nothing complicated there. We also do a check on the device.
<div class="device device-phone">Phone</div> <div class="device device-pc">PC</div> <div class="device device-tablet">Tablet</div> <ul> <li class="casablanca">Casablanca</li> <li class="moscow">Moscow</li> <li class="caracas">Caracas</li> <li class="dehli">Dehli</li> </ul> This is how we will use border classes in CSS. In my opinion, it is so much clearer than using media expressions (attention, an absolutely subjective opinion).
.device { display: none; width: 96%; font-size: 20px; padding: 2%; text-align: center; background: #eee; } .pc .device-pc, .tablet .device-tablet, .phone .device-phone { display: block; } ul { list-style: none; width: 100%; float: left; padding: 0; margin: 0; } li { width: 25%; height: 200px; line-height: 200px; font-size: 20px; float: left; text-align: center; color: #fff; background-position: cover; } li.casablanca { background: url(casablanca.jpg); } li.moscow { background: url(moscow.jpg); } li.caracas { background: url(caracas.jpg); } li.dehli { background: url(dehli.jpg); } .lt720 li { width: 50%; } .lt320 li { width: 100%; } Also in Restive.JS there are several convenient events that can be especially useful (for example, when changing the orientation of the phone).
Open Demo on different devices, change the screen, etc.
Links for further study
GitHub page
Official documentation
Source: https://habr.com/ru/post/229339/
All Articles