I'm using Foundation Zurbs class selectors for using building a page in HTML. I am using Emmet/Zen Coding for building the page and cannot figure out how to use the Emmet Shortcuts for class selectors that have spaces in them.
So to clarify the Emmet shortcode below:
div.large-4*3
produces the code
<div class="large-4"></div>
<div class="large-4"></div>
<div class="large-4"></div>
However, the Zurb class selectors have a space " " in them of the order of
"large-4 columns"
if i try to use this class selector in the shortcode syntax as below
div.large-4 columns*3
it produces the following html
div.large-4 <columns></columns>
<columns></columns>
<columns></columns>
How do i write the Emmet Shortcode that produces:
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
Regards
K*
large-4 and columns are separate CSS classes. In the HTML class attribute you specify them in a space-separated list but in CSS you simply concatenate the selectors e.g. the CSS selector for <div class="large-4 columns"> would be div.large-4.columns. Assuming that this shortcode takes a CSS selector and generates the equivalent HTML you would then just need the *3 on the end.
Related
Doesnt seem to work. Is there a fix? It seems readmore is expecting sections and artcles; however, foundation uses divs i.e. row and columns. How to fix?
You can use any HTML5 tag with Foundation's grid. The default grid uses Flexbox, no floats and the styles are class based, not tag based.
Example:
<article class="grid-x grid-margin-x">
<div class="section medium-4 cell">
<!-- your content -->
</div>
</article>
TYPO3 website is using TYPO3 extension of Smarty.
In one existing template called header.tpl I have this code:
<div class="header">
...
</div>
<div class="nav">
...
</div>
Is there some way to hide div element with the class "nav" using if condition? This header.tpl is used on every page, but I want to achieve that only on page with id=3 (in TYPO3) the navigation part will be hidden.
For example:
<div class="header">
...
</div>
{if (???) }
<div class="nav">
...
</div>
{/if}
Thank you very much for your help.
If you use the TYPO3 extension of Smarty, there are special plugins that give you the possibility to access data from TYPO3.
You can find them here: https://github.com/rtp-ch/smarty/tree/master/Classes/SmartyPlugins/Frontend
I'd say to use {if $data.uid == 3}, but I also need to see more of your setup to be sure.
I have a 3 column layout in my app. I'm using Semantic UI. So, the layout is:
<div class='ui celled grid'>
<div class='left column'>...</div>
<div class='middle column'>...</div>
<div class='right column'>...</div>
</div>
So, straightforward.
In my application.hbs it is simply:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
{{outlet}}
</div>
And the other 2 columns are in my sub-controller/templates. And this works fine until I need a View. If I need a View, then Ember makes the HTML layout become:
<div class='ui celled grid'>
<div class='left column'><!-- menu --></div>
<div class='ember-view'>
<div class='middle column'><!-- content --></div>
<div class='right column'><!-- content --></div>
</div>
</div>
And the wrapping <div class='ember-view'> breaks my layout. Because I don't always need a View I need a way to make the HTML the same for with or without a View.
At this point, I see 2 solutions. I'll either have to rework my layout in some way (that I'm yet to work out). Or I can get rid of the wrapping div.
But is it possible to get rid of the wrapping div? I tried this:
export default Ember.View.extend({
tagName: null
});
But that doesn't work. I also tried a span, but that still breaks my layout.
Any ideas?
Thanks.
Try using
tagName:''
The empty string as the tagName's value on your view.
Update:
When I brought this to the attention of ember.js contributors, they suggested inheriting the view from
Ember._MetamorphView
https://github.com/emberjs/ember.js/pull/4790
I've checked the documentation but cannot find out how to have Zurb Foundation auto-wrap text in columns like Word does, example here: http://note.io/1aunnZM
Can anyone help, please?
You would need to use CSS3 Multiple Columns instead of Foundation's columns.
HTML
<div class="row">
<div class="small-12 columns newspaper">
ALL YOUR TEXT HERE
</div>
</div>
CSS
.newspaper {
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
Here's the full demo.
In my template I'm writing:
<div class="content video">{{ each.text }}</div>
And I'm getting:
<iframe width="300" height="200" src="http://www.youtube.com/embed/1C1HLH-hOZU" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowfullscreen></iframe>
I want that text to be the part of the mark up,not as text.What say?
Do you mean the output of each.text is escaped and you see the text in your browser rather than the rendered markup?
This is because Django's template engine autoescapes output by default for security reasons. You might want to use the builtin safe filter like this:
<div class="content video">{{ each.text|safe }}</div>
Or another way is to use mark_safe in your view.