For example, I want to create this code:
<ul id="nav">
....
</ul>
in other editors I can write smth like that: ul#nav
Can I use smth similar to this in WebStorm?
Yes you can. It's called Emmet (https://emmet.io/) and WebStorm supports standard Emmet abbreviations as well as such dynamic expanding.
WebStorm help pages:
https://www.jetbrains.com/help/webstorm/using-zen-coding-support.html
https://www.jetbrains.com/help/webstorm/settings-emmet.html
Related
The default title tag is <title>Foundation for Sites</title> after running terminal command npm start or npm run build.
Is it possible to have the title tag output <title>MY WEBSITE TITLE</title> instead?
It looks like you might be using the Basic Template. Utilize the Zurb Advanced Template instead. It's got nifty Handlebars templating and other goodies. And it's the one Zurb uses with their client work.
http://foundation.zurb.com/sites/docs/starter-projects.html
Once you download & extract the advanced template, open src\layout\default.htm. Update the title tag.
Zurb 6 uses Panini to generate the page. So you could separate out title to a {{ title }} variable.
I'm searching for shortcut in WebStorm for auto completing my html code. So in my case if I write code like .row and press something it should automatically write <div class="row"></div>.
Such "transformation" (abbreviation expansion) called Emmet .. and by default it uses Tab key.
But it can also be Enter or Space .. or even custom key of your choice -- you can change it at Settings/Preferences | Editor | Emmet
P.S.
For big chunks of code -- have a look at Live Templates (Code Snippets).
You can use the Tab key to auto-complete the code. For example:
Write .row#row and press Tab key will make <div class="row" id="row"></div>.
I think this would help.
I know this may be a very silly question, but I've not managed to find anything online about a potential solution.
I am using Sphinx 1.4 and the sphinx_rtd_theme to generate some documentation for my Django project. I've been trying to find a way to use font-awesome icons in the .rst files but have found no way to do it. I've had a look at the sphinx_rtd_theme source files and the fa-* icons are included in the theme.css file. However, I'm unaware of a way actually to have them included.
Is it a directive, interpreted text or anything similar? I've tried icon, fonticon and fa as either of the above and none worked.
Any help would be appreciated.
I know I can potentially use raw HTML, but I'd like to avoid that if at all possible.
You can use Sphinx's rst-class directive, as follows:
.. rst-class:: fa fa-fontawesome
the font awsome flag will be attached to this paragraph
rst-class will set the class attribute for the next element as specified.
The following code renders only the icon:
.. rst-class:: fa fa-font-awesome
|
Of course, you can also use custom classes to further style the element.
You can also use https://sphinx-panels.readthedocs.io/en/latest/#inline-icons:
:fa:`bars`
:fa:`spinner,text-white bg-primary fa-2x,style=fa`
I am just learning Sphinx and had the same question, but using raw HTML is fine for my case. Maybe this solution will be helpful to someone out there...
In the conf.py file, add a link to your Fontawesome Kit Code URL
html_js_files = [
'https://kit.fontawesome.com/##########.js',
]
Then, use fontawesome icons in Sphinx with the raw HTML directive
.. |fa-fort-awesome| raw:: html
<i class="fab fa-fort-awesome"></i>
Here is some text |fa-fort-awesome| with the icon in the middle.
Here is how it renders as HTML...
In order to make the icons available on HTML and Latex download FontAwesome Web Package from https://fontawesome.com/download, include font-awesome/svgs/solid into your project _static folder and make use of image directives like bellow:
The |fa-bars| function is to toggle the left Sidebar Menu between being collapsed behind the button or displayed on the screen.
.. |fa-bars| image:: _static/font-awesome/svgs/solid/bars.svg
:width: 20px
:alt: hamburguer button
Results:
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
The <i class="fa fa-bars"></i> function is to toggle the left Sidebar Menu between being collapsed behind the button or displayed on the screen.
I am currently in a situation where i need to remove the metamorph tags used in a ember js select box. I use a JS plugin that takes my select box and turns it into a styled select box which i have customized using css.
I currently have this ember js select box in my view.
<script type="text/x-handlebars" data-template-name="opportunities">
{{view Ember.Select
contentBinding="controller.filter"
optionLabelPath="content.metacode"
optionValuePath="content.description"
class="mydds opportunitylistcategory"}}
</script>
I just need a way to remove the metamorph code but for ember selectbox to still have binding etc enabled... I have read about removing metamorphic data with a jquery sortable but that hasnt helped me. Thanks in advance!
The best way to work around this is to use an Ember.CollectionView.
I've run into this issue with a simple unordered list (<ul><li>).
Here is an answer that demonstrates how to do it https://stackoverflow.com/a/11749736/701368
Edit
The original answer was for a version of Ember before 1.0.
I would recommend using the {{each}} helper with the itemViewClass attribute when dealing with newer versions of Ember.js. You can find the documentation here: http://emberjs.com/api/classes/Ember.Handlebars.helpers.html#toc_specifying-a-view-class-for-items.
So don't use the block level helper; you want to use {{each}} instead of {{#each}}.
I'm trying to create a simple Ember.js app to learn more about JavaScript MVC frameworks. However, it appears applying CSS styles to a view template isn't possible (or rather, I am ignorant of the proper way to do this):
Without template
<span class="myClass">
Some value
</span>
In this case, the style appears properly, as expected.
With template
<span class="myClass">
<script type="text/x-handlebars>
{{MyApp.someVariable}}
</script>
</span>
In this case, the style doesn't seem to be applied at all.
I even tried something like:
<script type="text/x-handlebars>
{{MyApp.someVariable classToAdd="myClass"}}
</script>
Which creates an even more bizarre output (I can't even find that element in the Chrome developer element tab).
Online tutorials don't mention this issue and I have tried researching other Stackoverflow issues (there are some about applying styles but not exactly like in this situation). Can anyone enlighten me as to what I am not doing properly?
I normally use ClassNames and classNameBindings property of Ember Views. That get the job done most of the time.
You can also try Ember layout property to wrap the template.
Found answer to this question in jquery's append() documentation
You need to convert text into html using jQuery:
template = Handlebars.compile(..);
html = template(json);
$('body').append($(html)); // <- don't forget to wrap it