This PostHTML plugin "PostHTML Each" can repeat HTML code in a simple way. Like this
<!-- BEFORE -->
<div class="block" each="3"></div>
<!-- AFTER -->
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
How to repeat in a similar way in Nunjucks?
I don't think there's a nice one-liner as in your example for PostHTML but as mentioned in the comment you can use for tag. It needs a data source to iterate over, so use it with range function which will provide such.
{% for i in range(0, 3) -%}
<div class="block"></div>
{%- endfor %}
Docs:
for tag
range function
Related
I have a number of controls declared like this.
<div class="row">
<div class="col-sm-12">
<div>Caption</div>
<input type="text" class="form-control">
</div>
</div>
Trying to refactor my code, I introduced a component to encapsulate this particular behavior.
<div class="row">
<app-textbox [caption]="'Caption'"></app-textbox>
</div>
The markup for the component is just a copy of the original code.
<div class="col-sm-12">
<!-- <div style="width:100%;"> -->
<!-- <div class=""> -->
<div>{{data?.caption}}</div>
<input type="text" class="form-control">
</div>
The problem arising is with the class row seems not to propagate to the component. It spreads to the full width (as it's set to 12 but it's not the width of the component holding the class row - it's smaller). Analyzing the markup in the console of the browser, I can see that the only difference is that there's a tag for the custom control injected in the structure like this:
div class="row"
-- app-textbox
-- -- div class="col-sm-12"
-- -- input
while the "old-style" generates this:
div class="row"
-- div class="col-sm-12"
-- input
One way to handle it is to set the columns on the component in the main page like this.
<div class="row">
<app-textbox [caption]="'Caption'" class="col-sm-12"></app-input-text>
</div>
There are, however, two issues that bother me with it making me feel reluctant to this approach. First one is that the component still gets a (very tiny) extra margin of 15px on each side relative to the enclosing component (all the item have it but the custom app-textbox gets it twice, probably due to encapsulation). The other issue is that this kind of defeats the purpose of the encapsulation.
I've tried spreading the width of the components and setting different styles/classes to the input boxes etc. After a few hours, I realize that I'm at a loss.
Is it possible to make the injected tag app-textbox spread fully in its parent?
I had the same issue. Here is the way I solved it.
Original app.component.html:
<div class="container-fluid">
<div class="row">
<app-one></app-one>
<app-two></app-two>
</div>
</div>
Original one.component.html:
<div class="col-9">
<p>One</p>
</div>
Original two.component.html:
<div class="col-3">
<p>Two</p>
</div>
I moved 'col' divs from one and two components to the app component:
New app.component.html:
<div class="container-fluid">
<div class="row">
<div class="col-9">
<app-one></app-one>
</div>
<div class="col-3">
<app-two></app-two>
</div>
</div>
</div>
New one.component.html:
<p>One</p>
New two.component.html:
<p>Two</p>
For css to be visible in all your components, add it directly to the index.html file, or to app.component.css.
For example on the index.html as the last head element include:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
That URL was taken from : https://getbootstrap.com/docs/3.3/getting-started/
(I'm assuming that your Angular2 project was generated with angular-cli and the files follow the standard names)
About the extra margin, try checking app.component.html. Maybe there's a container div around it. Also check index.html itself
I would like to know if, according to BEM methodology, I can have the following structure:
.block1
.block1__element1
.block2
.block1__element2 <-- ??
Am I allowed to use an element from a parent block, inside a children block?
Thanks.
UPDATE:
This is the actual DOM structure:
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
// <-- ???
</div>
</div>
</div>
According to best practices of BEM methodology: am I allowed to move the element with head__user inside the menu block? Or all elements inside the menu block need to start with the menu__ prefix?
I hope this clears out the problem.
I been using BEM for sometime and from what I got it's not recommended nor intended to be used like that. You can nest different BEM elements to each other like menu-blockintohead-block, but menu-block items should not go outside its parent menu-block, like you should not put menu-block__item at the top of head-block. Does it makes sense? :)
To illustrate there are two ways to go. What should be noted here is that depending on the scale of your project and how you build things (component based?). If you don't have a large project and are not doing or reusing the menu else where you can do it both ways. Lets say your menu is huge amount of html/css I would do it like #1
This is not correct
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="head__something"></div>
</div>
</div>
</div>
Recommended solution
Based on this part of the documentation. Now you can chop your own header design into blocks, does this below match?
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="menu__something"><img src="" class="menu__image" /></div>
</div>
</div>
</div>
I think this variant is allowed:
<div class="head">
<div class="head__nav">
<div class="menu">
<div class="head__user"></div>
</div>
</div>
</div>
I haven't found the current part in the official BEM documentation, but I've found this part:
The block name defines the namespace, which guarantees that the elements are dependent on the block (block__elem).
A block can have a nested structure of elements in the DOM tree:
Example
<div class="block">
<div class="block__elem1">
<div class="block__elem2">
<div class="block__elem3"></div>
</div>
</div>
</div>
However, this block structure is always represented as a flat list of elements in the BEM methodology:
Example
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
This allows you to change a block's DOM structure without making changes in the code for each separate element:
Example
<div class="block">
<div class="block__elem1">
<div class="block__elem2"></div>
</div>
<div class="block__elem3"></div>
</div>
The block's structure changes, but the rules for the elements and their names remain the same.
I understand it as there is only one rule about HTML structure for elements in BEM: an element has to be inside its block (it doesn't matter how deep).
One possible problem that I can imagine for this case is using some of BEM tree formats. But if you don't need it, I think there's no problem.
I would consider making the potential head__something into simply something, and then to provide multiple modifications of it. e.g. something--head and something--menu.
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="something--menu" />
</div>
</div>
<div class="something--head" />
</div>
Also, refactoring further, I would consider getting rid of head__nav as it probably does not add any richer semantics than menu.
<div class="head">
<div class="head__user"></div>
<div class="menu">
<div class="something--menu" />
</div>
<div class="something--head">for those cases where you want <code>something</code> directly descending from <code>head</code></div>
</div>
I have to iterate over the html content of each div one by one.
<div class="category"> 1 </div>
<div class="category"> 2 </div>
<div class="sub-category"> <ul><li></li>....</ul> </div>
<div class="category"> 4 </div>
<div class="sub-category"> <ul><li></li>....</ul> </div>
<div class="category"> 6 </div>
I have tried
element.select("div.category")
element.select("div.sub-category")
it fetches data but not in sequence.
I just want to fetch one category then its sub-category. Also note that some category don't have sub-categories.
Kindly suggest anyone, the proper way to do this. Thanks.
You can use these syntaxes:
[attr^=value]: for elements with attributes that start with value
[attr$=value]: end with value
[attr*=value]: contain the value
In your case: "category" & "sub-category" both contain the substring "category" and end with "category" therefore you can use:
.select("div[class*=category]") or
.select("div[class$=category]")
Let's say I have a product within a collection. Is it appropriate to call the product "feature-collection__product" so it's still an element within the block of "feature-collection" or call it "feature-collection-product" so it becomes it's own block, as it has other elements within it, or something different.
<div class="feature-collection">
<div class="feature-collection__product">
<h2 class="feature-collection__product-title"></h2>
<h2 class="feature-collection__product-price"></h2>
</div>
</div>
OR
<div class="feature-collection">
<div class="feature-collection-product">
<h2 class="feature-collection-product__title"></h2>
<h2 class="feature-collection-product__price"></h2>
</div>
</div>
Most likely the correct answer is both:
<div class="feature-collection">
<div class="feature-collection__product product">
<h2 class="product__title"></h2>
<h2 class="product__price"></h2>
</div>
</div>
The situation when you have different entities on the same DOM node is called mix. In this case it's reasonable to have independent block product and also an element of feature-collection to set some styling for production inside feature-collection.
For more info about mixes please take a look at https://en.bem.info/methodology/key-concepts/#mix and https://en.bem.info/methodology/faq/#mixes
Does anybody know how to force exist to retrieve an HTML file "as is", not adding <?xml and not merging </-s?
Even wikipedia wikipedia says:
Include an extra space in empty-element tags: for example <br /> instead of <br/>.
Include explicit close tags for elements that permit content but are left empty (for example, <div></div>, not <div />).
Case:
HTML file stored in eXist DB:
<div id="idADADScreen">
<div id="idADADTop"></div>
<div id="idADADMiddle">
<div id="idADADLeft"></div>
<div id="idADADCenter"></div>
<div id="idADADRight"></div>
</div>
<div id="idADADBottom"></div>
</div>
When retrieved with wget, the empty tags are melt:
<?xml... ?>
<div id="idADADScreen">
<div id="idADADTop"/>
<div id="idADADMiddle">
<div id="idADADLeft"/>
<div id="idADADCenter"/>
<div id="idADADRight"/>
</div>
<div id="idADADBottom"/>
</div>
In a Chrome and all others, the object hierarchy laughs on />
<div id="idADADScreen">
<div id="idADADTop">
<div id="idADADMiddle">
<div id="idADADLeft">
<div id="idADADCenter">
<div id="idADADRight"></div>
<div id="idADADBottom"></div>
</div>
</div>
Right and bottom closed because there are two valid </div> s in the original