According to this post, Bootstrap 4 offers an opt-in flex box grid.
There’s a boolean variable in the _variables.scss file called
$enable-flex. If you set this to true and recompile, a ton of things
happen.
Q: How do you recompile Bootstrap? I typed:
git clone https://github.com/twbs/bootstrap
on the command line and my windows computer just hung. I finally had to Ctrl+C and exit.
To compile scss files you need SASS compiler:
http://sass-lang.com/
You can find versions for linux and windows.
Import bootstrap-flex into your SASS compiler which also sets $enable-flex:true
Demo here
UPDATE:
As of Bootstrap 4 Alpha 6, flexbox is now the default.
http://www.codeply.com/go/p/bootstrap_4.0.alpha.6
http://www.codeply.com/go/p/bootstrap_4.0.0
It looks like scotch.io has a flex box compiled version.
Related
For the last week or so, every .VUE file I work with has no syntax highlighting. I usually have the extension Vetur to help with synthax highlighting and other tweaks to .VUE files.
Things I've tried so far:
uninstall/reinstall Vetur
change file associations in VScode
make sure .vue files have no errors
You can install 'Vue 3 Support - All In One' from extensions in vs code. Then the issue with syntax highlighting will fix.
Disable Volar/Vetur extension
Install and enable Vue 3 Support Extension
Reload VSCode
As i see for lang="pug" there is no needs to use other extension as like below:
https://vuejs.github.io/vetur/highlighting.html#custom-block
So I think the problem may be on your project file, please check new vue project to be sure that the problem is not from your files and config of the project !
As Sebastian Brosch said in a reply
This worked for me:
https://github.com/vuejs/vetur/blob/master/docs/FAQ.md#no-syntax-highlighting--no-language-features-working
TLDR: Run command reinstall command in vscode and select vetur extension
I need to write SASS code in a strict arrangement order (e.g. z-index before display before background...). IntelliJ offers custom CSS and SCSS arrangements. Is this also possible for SASS or is there any plugin or cli that ships a solution?
Code rearrangement is currently only supported for CSS and SCSS; if you miss SASS support, please file a feature request to youtrack, https://youtrack.jetbrains.com/issues/WEB
I'm new to coding and I'm using the Express framework in Sublime.
When I create .ejs files, (for example footer.ejs) for some reason Sublime shows these files as Plain Text files, instead of .ejs files, even though I have NPM installed ejs.
Furthermore, when I click on "Plain text" in the bottom right of Sublime, EJS doesn't show up as an option.
My package.json shows that I have ejs installed: "ejs": "^2.5.9".
Does anyone know what I'm doing wrong? And how I can get .ejs files to automatically default to EJS instead of plain text? Thanks!
The short version of the answer to your question is that installing a package via npm doesn't have any effect on Sublime. In order to add support for EJS to Sublime you need to install a package for it in Sublime.
Package Control has a couple of packages, EJS and EJS 2 (and maybe also Hyperloop EJS, if that's a thing; I'm unfamiliar with EJS).
Just at first blush it seems like EJS 2 might be the better first bet; it's been more recently updated and is using the newer sublime-syntax syntax format and seems to support more things. Take that with a grain of salt though, since I have no experience with either one.
You can select the command Package Control: Install Package from the command palette and then select one of those packages to install it. If you're going to try them both, do it one at a time and use Package Control: Remove Package before installing the next one so that they don't compete with each other.
If those commands aren't in your command palette, you don't have Package Control installed yet. In that case you can select Install Package Control from the command palette to install PC first. If that doesn't work there are also instructions on how to install it manually.
Once you have a package installed, you can close and reopen the file to apply the correct syntax, or use the menu as you mention in your question.
Let's make it short and simple.
Syntax highlighting and auto completions are not great if you were to download ejs package.
Instead I recommend you to use html syntax highlighting.
Open Command pallet using ctrl+ shift + P or cmd + shift + P.
Set Syntax: HTML
I would like to add materialize or something similar to a Foundation 6 Zurb Template build. Is it possible to add just the sass styes? How could that be done?
There is also Material Foundation, but it uses grunt instead of gulp. Would this cause a conflict? How is it added to the Zurb Template? Thank you!
If it's just css/scss, you can just copy the files to your project and import them using sass partials.
// Copied file: _material.scss
#import "path/to/file"; // No file ext or leading _
Edit: Whether or not gulp and grunt conflict depends on how you have things set up. If they both work with the same files I could see them conflicting.
Given:
The Swig template engine: http://paularmstrong.github.io/swig/
Webstorm has a plugin for it: Textmate bundles support
A Textmate bundle for Swig is available: https://github.com/paularmstrong/Swig.tmbundle
I expect I should be able to get Swig highlighting fixed, but I'm only getting half way.
Below is the resulted highlighting I get. The Swig code is highlighted as expected, but HTML is not highlighted anymore.
I've tried installing and enabling the HTML textmate bundle as well, but when both the HTML and the Swig bundle are activated, the code is highlighted as only HTML. If I disable the HTML bundle but have the Swig bundle still active, I only get Swig highlighting.
My Question: How do I get Swig code and HTML code highlighted in the same file in WebStorm on Windows?
Result:
This is my Textmate Bundles configuration in WebStorm 9:
Again, simply selecting the HTML bundle to enable it doesn't work.
Swig has nearly identical syntax to Twig, so we can assume they can be used interchangeably speaking of syntax highlighting and code completion.
The thing is that PHPStorm it has a Twig support throught a plugin (which is awesome BTW), but sadly it is not available in the others IDEs thought the Plugins menu.
This issue can be solved by:
manually downloading the plugin from the official repo at https://plugins.jetbrains.com/plugin/7303?pr=
then installing it manually thought the Plugin interface,
then or use the .twig extension on files or adding a new mapping in the File Types system menu for the type Twig, with wildcard *.html or *.swig, how you prefer.
I'm using the *.html workaround and work like a charm, both Swig & HTML syntax highlighting + code completion.
Hope this helps you like it did to me :)