PopulateJS: don't repeat yourself in HTML markup
The spread of LESS / SCSS, as well as the expected movements in the world of browsers and standards, the emergence of jQuery, finally, returned the fan in the layout of HTML-pages and in the front-end development.
But imagine that you need to create a section in an online store, a blog section, or the whole Habr home page? Yes, we divide the page into separate blocks and make markup for them, generate a lot of nested blocks, make CSS / LESS / SCSS for them. Of course, there are such wonderful tools as Zen-Coding, jQuery Templates templating engine, and for building grids, various CSS frameworks, like Bootstrap or Zurb Foundation.
But often you want to see how the layout of the lists behaves when there is not just a newly created element in them, but a multitude of elements. Surely, you copy-paste at least once in your life block markup to fill the page with content, especially when you don’t have a favorite CMS or web framework with a template engine running. And then deleted copy-paste. Or even worse, you are one of those who receive the HTML4 from the layout and you need to delete this copy-paste yourself.
A couple of days ago I created the populatejs library, which is designed to save you from the described troubles once and for all. In fact, it gives us syntactic sugar in CSS, which allows us to clone the content of HTML elements using CSS properties. For example, the “populate-7” class for any element will display on the web page 7 exactly the same elements instead of one, and the “populate-inner-3” class will display the element content three times.
')
For example, you need a test list of items containing a brief description of the products you have just stylized:
Instead of copying a block:
Use the .populate-5 class:
A list of 5 items will appear on the page. Need 5 items with two product pictures? No problem:
Or more description text:
How to finish the layout, remove the line with the library connection and feel free to convert your blank HTML markup to a template!
Naturally, pseudo-classes will also be applied to the elements: nth-child, declared in your CSS.
To connect the library and start using it right now, just paste the following code into the page after jQuery:
Now let's talk about what's under the hood.
Inside populatejs is a very simple engine that uses jQuery for selectors and its own way to bypass the DOM tree and handle declarations of CSS classes of elements (via the 'class' attribute in jQuery). All library code is written through tests using the wonderful QUnit framework. To run the tests, just open test.html in your browser.
When the HTML document is loaded by the browser, the library, during initialization, finds the nodes of the DOM tree marked with the classes .populate- * and .populate-inner- * and generates a list of the terminal nodes of such a subtree, and in fact the forest. After this, a reversal takes place, during which the passed nodes are marked with the class .populated and the operation of “cloning” is applied to them, copying the entire hierarchy of the heirs of these nodes.
I will be glad to any feedback from the community, and I will be especially happy if someone other than me will save this library a couple of gestures, as I have already saved.
1. Zen coding - we write HTML / CSS faster
2. We work with jQuery Templates
2. Bootstrap
3. Zurb Foundation
4. The official page of the library PopulateJS
5. QUnit js testing framework
5. GitHub source code
6. My twitter , if you need more operational support or you want to say "thank you".
Fork me on github !
But imagine that you need to create a section in an online store, a blog section, or the whole Habr home page? Yes, we divide the page into separate blocks and make markup for them, generate a lot of nested blocks, make CSS / LESS / SCSS for them. Of course, there are such wonderful tools as Zen-Coding, jQuery Templates templating engine, and for building grids, various CSS frameworks, like Bootstrap or Zurb Foundation.
But often you want to see how the layout of the lists behaves when there is not just a newly created element in them, but a multitude of elements. Surely, you copy-paste at least once in your life block markup to fill the page with content, especially when you don’t have a favorite CMS or web framework with a template engine running. And then deleted copy-paste. Or even worse, you are one of those who receive the HTML4 from the layout and you need to delete this copy-paste yourself.
A couple of days ago I created the populatejs library, which is designed to save you from the described troubles once and for all. In fact, it gives us syntactic sugar in CSS, which allows us to clone the content of HTML elements using CSS properties. For example, the “populate-7” class for any element will display on the web page 7 exactly the same elements instead of one, and the “populate-inner-3” class will display the element content three times.
')
How to use?
For example, you need a test list of items containing a brief description of the products you have just stylized:
<ul> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> </ul> Instead of copying a block:
<li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>
Use the .populate-5 class:
<li class="populate-5"><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>
A list of 5 items will appear on the page. Need 5 items with two product pictures? No problem:
<li class="populate-5"><img class="populate-2" src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>
Or more description text:
<li class="populate-5"><img class="populate-2" src="images/thumb.jpg" /><div class="title populate-inner-3">Lorem ipsum dolor...</div></li>
How to finish the layout, remove the line with the library connection and feel free to convert your blank HTML markup to a template!
Naturally, pseudo-classes will also be applied to the elements: nth-child, declared in your CSS.
To connect the library and start using it right now, just paste the following code into the page after jQuery:
<script type="text/javascript" src="https://rawgithub.com/vladignatyev/populate-js/master/js/populate.js"></script>
Now let's talk about what's under the hood.
What's inside?
Inside populatejs is a very simple engine that uses jQuery for selectors and its own way to bypass the DOM tree and handle declarations of CSS classes of elements (via the 'class' attribute in jQuery). All library code is written through tests using the wonderful QUnit framework. To run the tests, just open test.html in your browser.
When the HTML document is loaded by the browser, the library, during initialization, finds the nodes of the DOM tree marked with the classes .populate- * and .populate-inner- * and generates a list of the terminal nodes of such a subtree, and in fact the forest. After this, a reversal takes place, during which the passed nodes are marked with the class .populated and the operation of “cloning” is applied to them, copying the entire hierarchy of the heirs of these nodes.
Conclusion
I will be glad to any feedback from the community, and I will be especially happy if someone other than me will save this library a couple of gestures, as I have already saved.
1. Zen coding - we write HTML / CSS faster
2. We work with jQuery Templates
2. Bootstrap
3. Zurb Foundation
4. The official page of the library PopulateJS
5. QUnit js testing framework
5. GitHub source code
6. My twitter , if you need more operational support or you want to say "thank you".
Fork me on github !
Source: https://habr.com/ru/post/187264/
All Articles