Is passing liquid variables as inline styles commonly frowned upon? Here is an example of my markup:
<div class="span-8-12">
<h6> {{page.role}}</h6>
<h1 style="color:{{ page.accentColor }};"> {{page.title}} </h1>
</div>
<article class="intro">
<p style="color:{{ page.txtColor }};"> {{ page.summary }} </p>
</article>
I am setting h1 and p colors using the liquid variables in my posts. I know I could pass the variable directly to a CSS file, but then'd i'd have to write even more markup and CSS. Is this method valid or is there a better method on systematically changing values of color based off page variables?
Better would be to set a class, rather than directly setting the styles inline.
<div class=" {{ page.typeOfClass }}">
<div class="span-8-12">
<h6> {{page.role}}</h6>
<h1 > {{page.title}} </h1>
</div>
<article class="intro">
<p > {{ page.summary }} </p>
</article>
</div>
Then in your whatever.css set the styles for the different classes you want:
.someClass h1{
color:blue;
}
.someClass .intro p{
color:red;
}
for example.
Related
I would like to truncate a long string, who content html tag.
From my controller php.
content="<div>
<h1>my title</h1>
<p>para 1 ...</p>
</div>";
I would like to truncate this, so i did this in twig :
{{ content|raw|truncate(15) }}
But the html are broken, see bellow :
<div>
<h1>my ti...
I want to keep the end of tag, like this :
<div>
<h1>my titl...</h1>
</div>
Anyone have an idea ?
You can use the Twig Truncation Extension. As you can read in the doc:
{% set html %}
<h1>Test heading!</h1>
<ul>
<li>Hello world</li>
<li>Foo bar</li>
<li>Lorem Ipsum</li>
</ul>
{% endset html %}
{{ html|truncate_letters(20) }}
will output:
<h1>Test heading!</h1>
<ul>
<li>Hello wo</li>
</ul>
Hope this help
You can solve this with the text-truncate class of bootstrap.
<h1 class="text-truncate">my title</h1>
If you don't want to use bootstrap, you can do it directly in css with the property text-overflow:ellipsis as it is the case in bootstrap.
Here is an example in css.
I hope it will help you.
I have the follwing html
<div class="listing listing--with-margin">
#foreach($recipients as $recipent)
<span class="listing__item">{{ $recipent }} <input type="checkbox"></span>
<span class="listing__item">{{ $recipent }} <input type="checkbox"></span>
#endforeach
Should the class on the checkbox be
<input type="checkbox" class="listing__input">
or
<input type="checkbox" class="listing__item listing__input">
I think option 1 which allows me to write is a lot cleaner in the sass with less nesting.
If you take a look at the Naming page in the BEM documentation, at the bottom you'll see an example section, with a form block.
In the example, you will find the <form> element, with a couple of <input />s.
Each <input> has its own element class of either .form__input or .form__submit, both inheriting from the block .form class. They do not inherit more than one class.
However, you will notice that they have multiple modifier classes, which is acceptable.
There are 3 options for grandchildren element.
Flattening grandchildren
<article class="post">
<div class="post__meta">
<div class="post__category">...</div>
<div class="post__date">...</div>
</div>
...
</article>
Creating new blocks
<article class="post">
<div class="post__meta">
<div class="category post__category">...</div>
<div class="date post__date">...</div>
</div>
...
</article>
Extending the BEM naming convention
<article class="post">
<div class="post__meta">
<div class="post__meta__category">...</div>
<div class="post__meta__date">...</div>
</div>
...
</article>
I have a sidebar in my angular app and I am trying to make one div insight the sidebar scoll through the items and the content in the following div keep the same position (no scrolling). I have been looking at so many similar posts and tried everything but it just wont work. The problem is that either can you scroll through everything in the sidebar or not at all or that the bottom stayed (without moving) but then i the scrollbar was there for EACH item (and not for all items).
I used ng-repeat to put items on scope of the sidebar - is it perhaps different with angular that with reg. html?
Thanks!!
Ps. Im using gulp and the sidbar is a directive which I didnt include here. If anything is of importance, please let me know and I include it.
<li>
<a ng-click="openNav()"><i id="cart-icon" class="medium material-icons icon-design">shopping_cart</i></a>
<div id="mySidenav" class="sidenav closebtn" click-anywhere-but-here="closeNav()" ng-click="closeNav()">
<div class="sidebarBox">
<h2 class="sideBarHeader">Cart </h2>
<div class="sidebarContainer" ng-repeat="item in cart">
<img src="{{item.imageUrl}}" style="width:90px;height:100px;">
<div class="sidebarContent">
<p class="sidebarTitle">{{item.title}} </p>
<p class="sidebarSubtitle">Quality: {{item.quantity}}</p>
<p class="sidebarSubtitle">Price: ${{item.price}}</p>
</div>
<p class="sidebarLine"></p>
</div>
</div>
<br>
<div class="sidebarNoScroll">
<p style="color:black;font-size:22px;">Total</p>
<p class="sidebarTotal">${{ total() }}</p>
<button class="sidebarButtonContinueShopping" id='continue-shopping-button' ng-click="closeNav()">Continue Shopping</button>
<button class="sidebarButtonViewCart" ui-sref='cart' ng-click="closeNav()">View Cart</button>
</div>
</div>
</li>
css.
.sidebarContainer {
overflow:scroll;
height:224px;
}
.sidebarNoScroll {
overflow: hidden;
}
Wrap the container.
<div class="sidebarContainer">
<div ng-repeat="item in cart">
</div>
</div>
Is there a combination of selectors that would allow me to access the thumbnail list following the :target selected image1?
p.s. if that would help thumbnail list could be moved into gallery list as a last element... Then maybe I could somehow use ~ selector?
<div id="gallery-list">
<div>
<div id="thumbnail"> <img src="image1_thumb.png"> </div>
<div id="image1" class="overlay"><img src="image1.png"></div>
</div>
<div id="I_WANT_TO_SHOW_THIS_ALONG_WITH_image1_OVERLAY" class="thumbnail-list">
<img src="image1_thumb_mini.png">
</div>
</div>
p.s. if that would help thumbnail list could be moved into gallery list as a last element... Then maybe I could somehow use ~ selector?
Like as a sibling of #image1? If so, yes that will work. The selector you would use would then be #image1:target ~ .thumbnail-list. Either remove that parent div that doesn't have a class, or move .thumbnail-list into that div if it needs to be there.
But with your current structure, it's not possible because .thumbnail-list is a sibling of the parent of #image1, and there is no parent selector.
you can use this selector #image1:target ~ .thumbnail-list, if you change your HTML like this:
<div id="gallery-list">
<div>
<div id="thumbnail">
<img src="image1_thumb.png">
</div>
<div id="image1" class="overlay">
<img src="image1.png">
</div>
<div id="I_WANT_TO_SHOW_THIS_ALONG_WITH_image1_OVERLAY" class="thumbnail-list">
<img src="image1_thumb_mini.png">
</div>
</div>
</div>
I want to have two containers, because when I change the size, it also changes the size of the menu. Here's my index http://paste.laravel.com/GN8, I want this part:
#if ($news->count())
#foreach($news as $news)
<div class="container">
<div class="doc-content-box">
<legend>{{ $news->title }} <div id="spaceholder"></div>
<p>
<h6><i class="icon-calendar"></i> {{ $news->created_at }} {{ $news->author }}
</p>
</h6>
</legend>
<div style="margin-top:7px">
<p>{{ $news->content }}</p>
</div>
</div> <!-- /container -->
<div id="spaceholder"> </div>
#endforeach
#else
{{ 'There are no news.' }}
#endif
be width 749px, when I copy the .container which I added before, it just pulls it to the left.
I want it to be something like container-two.
I also have custom CSS that overrides container:
http://paste.laravel.com/JEt
Add the container this styling:
margin: 0 auto;