Adaptive filter search
Translation of an article by Chris Coyier with CSS-Tricks.com " Search with Filters Responsive Design Pattern ".
Design patterns are a very useful thing, especially in responsive design. Consider an example: on the big screen in a block with tabs in width many tabs fit, but on a mobile device the layout will move away. The solution is to use a special design pattern that compresses all tabs into drop-down items.
Brad Frost even collected a very good collection of adaptive patterns , very useful. Another example is a search form with a results filter. There are many places on the desktop:
')
On small screens there is not so much space, so you can simply move the right side with the results down:
For better display, you can hide / show filters by clicking:
The question arises: how to use filters if the page on a mobile device is scrolled down? The solution is to create a “filter bar” that will be tied to the top of the screen and therefore always available:
In the open state:
That turned out the pattern of responsive design . There is nothing particularly remarkable in the CSS code, the media query is used to change the structure. And in the JavaScript part, an example is used from the article Persistent Headers , with minor corrections.
Of course he does not solve all the problems, as usual. That's why they are patterns, not patterns. Should “filter bar” contain a search field? Maybe. What to do if filter items get bigger? Do I need a button "up"? All this needs to be addressed in the course of work on a specific project.
Design patterns are a very useful thing, especially in responsive design. Consider an example: on the big screen in a block with tabs in width many tabs fit, but on a mobile device the layout will move away. The solution is to use a special design pattern that compresses all tabs into drop-down items.
Brad Frost even collected a very good collection of adaptive patterns , very useful. Another example is a search form with a results filter. There are many places on the desktop:
')
On small screens there is not so much space, so you can simply move the right side with the results down:
For better display, you can hide / show filters by clicking:
The question arises: how to use filters if the page on a mobile device is scrolled down? The solution is to create a “filter bar” that will be tied to the top of the screen and therefore always available:
In the open state:
That turned out the pattern of responsive design . There is nothing particularly remarkable in the CSS code, the media query is used to change the structure. And in the JavaScript part, an example is used from the article Persistent Headers , with minor corrections.
Of course he does not solve all the problems, as usual. That's why they are patterns, not patterns. Should “filter bar” contain a search field? Maybe. What to do if filter items get bigger? Do I need a button "up"? All this needs to be addressed in the course of work on a specific project.
Source: https://habr.com/ru/post/187936/
All Articles