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
Related
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).
I have to develop some static HTML page, but I don't want to repeat myself copy/pasting common parts so, for example, I would like to include header and footer in every page.
I don't need something too much sophisticated, just and include feature.
Using Gulp as build system I would like to have my templates in the src/ folder and after a processing task, getting the complete html inside the dist/ folder.
I thought to use something like handlebars, but I don't know if this is the right framework and I don't know how to integrate it in Gulp for workflow described above.
Any hint?
You could absolutely use Handlebars to render static chunks of markup. But, unless you're also building some data-driven content, it might be overkill.
It sounds like you want something akin to PHP's include.
For that, you might want to check out .KIT files. I recommend gulp-codekit (documentation here), which is based on the .KIT file compiler built into CodeKit.
Like in this other thread, using gulp-file-include is the easiest choice for my needs.
Thanks everyone!
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.
Across the web I've found several tools regarding html to css convertors (to generate classes). a fine example is this convertor: http://primercss.com/index.php
However, I was wondering (And couldn't find by myself) if there are advanced tools that convert the html to scss - and if there are tools that I can customise the scss on the go (for example - to decide whether to nest a specific class inside another class).
I'm using in my project grunt so if there is a grunt plugin that might generate this sort of thing automatically that can also be good help.
I think you should read about this grunt plugin:
https://github.com/htmlhero/grunt-init-block
I use it on my projects and it's a very useful
Is there a way to render out minified html with Docpad? For reasons I'm too lazy to explain, grunt plugins are not a viable solution for me.
It sure is possible. The CoffeeKup plugin will actually minify your HTML when generating on a production environment for you automatically, and I think the LessCSS plugin does this too.
Personally, I use CloudFlare to minify everything post-deployment: https://support.cloudflare.com/entries/22076718-How-do-I-minify-HTML-CSS-and-JavaScript-to-optimize-my-site-
However, you could also easily write a plugin to minify the content as well. You could base it off the Uglify plugin which minifies javascript files using uglify-js. The trick would be to just decide which node module you would like to do it with. Happy to help further on this path with additional questions and answers.