Organizing a huge .css file with Visual Studio extension? - html

This is my css file:
Guys is there any extension in the visual studio that will help me organize my .css file?
Obviously i am a beginner in the .css / html languages.
Any help?
Thanks!

First of all, this is a minified CSS so you need a tool that is able to "un-minify" it.
As far as I know VS Code by default doesn't have a formatter for CSS that can do it, but for my minified CSS this one does the trick:
CSS Formatter
After installation, you can right click -> Format Document inside your CSS file.
As for "organizing a huge file" - I mean organizing it into smaller modules, you could use a preprocessor like SASS (or a bundler like Webpack for more "complicated" applications).

Related

Linting HTML/CSS

I'm looking to watch HTML/CSS files and run a linter when they are saved. I'm not using a specific build systems, rather, just calling node cli's directly from my package.json file.
I'm using ESLint to take care of javascript - can anyone recommend a similar linter for HTML/CSS?
use stylelint for stylesheets and Tidy for html

Locating html code in local joomla server files

I have been tinkering with joomla recently.I was able to change css style using chrome dev tool, which helped me locate the css code that is responsible for the style I inspect. Now I want the same for html codes. The template that I'm using has an offcanvas menu, and when I inspect it, I can see the codes that form the menu, and I want to modify them, as I did with many css codes, however there is no locate or open containing file for html elements. Is there a way to do this? Since I did not write this template, I don't know which is which and where. Many thanks.
You could use Joomla layout overrides to achieve what you describe, check out this link for full details:
https://docs.joomla.org/Understanding_Output_Overrides#Module_Layout_Overrides
The idea is that you move a copy of the module file you want to modify to
/templates/your_template/html/ and Joomla will override the original output with the output from your custom file. You can do the same with components and plugins, it's really powerful.
Another reason that overrides are the way to go is that there's no risk that you'll loose your changes when you update the extension you are customising.
If you Google Joomla overrides you'll find other resources and once you get started you'll find it's surprisingly easy :)
Good luck!
I don't recommend editing css or html in Joomla via the dev tools, because of the problem you're having - sometimes it's hard to know what(and where) exactly you're changing something.
If you have access to the file for the template it should have a pretty straightforward file structure, i.e. all the html is in a html folder, the css in a css folder etc. Learn more here.
I recommend locating those files and editing them with a text editor.
To make a file depends on the framework you add one to Joomla template is not used.
But in all cases you index.php is a file that can address the heads of a css your new address

Emmet preferences.json in Visual Studio Code to include Stylus (CSS preprocessor)

The emmet snippets that are included by default in Visual Studio Code work fine in CSS, HTML, LESS, SASS files. However I prefer using Stylus for my CSS coding.
These snippets don't seem to work in VS Code. I have installed the Stylus plugin, but this didn't help. Then I've found in the documentation of Emmet that I can change the preferences.json to add a syntax:
css.syntaxes
List of syntaxes that should be treated as CSS dialects.
css, less, sass, scss, stylus, styl
I cannot find where VS Code stores the emmet settings however, so I cannot check if this helps my problem.
So my question is, where can I change the preferences.json in VS Code? Even more helpful would be, how can I get the Stylus snippets of Emmet to work (so it gives me 'position absolute' when I type 'posa'-TAB for example)?
I filed this on the VS Code GitHub repo as an issue and they've added Stylus as a CSS alias.
Still they haven't told me where I could find this file. The change was made in a code file.
The issue: The issue on GitHub
So this solved my problem.

Can you use Sass and compass when you write your css styles in your HTML file? What should you watch?

I just started looking into sass and compass because I see a lot of code on codepen that uses it. I noticed in the documentation that you had to have something like a sass folder and it watches for changes in that folder and when a save event occurs it updates the stylesheet folder with the regular css. I'm used to writing my css, especially when I go through short tutorials or for practice in the style tag in the html file. Is it possible to write my sass in the HTML file? Do I have to now write my css in a different file? if not how would I do it?
No, you cannot to my knowledge. See Using SASS/SCSS syntax inside <style> tag.
The real question, though, is why would you want to use SASS at all? Some say it promotes and encourages poor CSS programming practice. The "features" it offers are in general of marginal usefulness. It adds another step to your workflow, and before you know it you will be fighting with gruntfiles and SASS versions and having Ruby installed properly. Personally I would also strongly advise against deciding to start using some CSS framework if it brings along the SASS/SCSS/LESS baggage.
Some preprocessors that we use in JS/HTML/CSS do have versions which can run in the browser, for development purposes. For example, you can run babel in the browser to convert ES6 to ES5. That is possibly because babel is written in JS, and it's not that hard to create a version which runs in the browser and does the transpiling on the fly. Or, to take one other example, you can arrange for Ember to compile templates from within the HTML. SASS, on the other hand, is not written in JS and there is no reasonable way to call it from the browser.

Modifying Bootstrap.css and updating the minified version in Visual Studio?

I am using VS Express 2013, trying to customize a bootstrap theme for a Roadkill wiki. I'm trying to replace the body color with a background image.
It's easy enough to modify the bootstrap.css, but in order to get site updates you need to push changes into bootstrap.min.css. So far, I am only aware of how to do this manually. I'm looking for any method whereby I can just have the minified version update automatically.
I'm guessing it's probably really simple to do, but I can't find any steps on how to do this.
Just create your own css file and override just the css settings you want to change.
Be sure to load your override css after bootstrap so your overrides take precendence.
This way you dont need to edit either boostrap css at all.
You are right in that it is really easy to do: see http://cssminifier.com/. I just pasted in the entire text of my custom bootstrap file, clicked "Minify", and copied the output back to overwrite the content of bootstrap.min.css.
(I took a copy of the .min file first, just to be safe.)
In Visual Studio 2013, if you are using ASP.NET MVC (you haven't mentioned which, but I suspect you are using MVC 5 since you are working with Roadkill wiki), bundling and optimizations to CSS and JavaScript files are done automatically when enabled, since the NuGet package Microsoft ASP.NET Web Optimization is installed.
From Microsoft, how to enable/disable... refer to the middle of the article "Controlling Bundling and Minification":
http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification