KSS styleguides generator for Rails - alternatives to NKSS - css

What KSS style generator do you guys use for Rails? I tried with NKSS but I don't quite like it (maybe because I'm not used to document CSS yet).
Anyone of you knows what Github uses?

I have found https://github.com/dewski/kss-rails also. I never documented my CSS but you can give a try.

Related

How to use atomizer (automatic css generator for atomic css) extension on VSCode?

can someone help me. I really want to use atomic css in my project. I see in vscode that there's atomizer extension that generates atomic css classes but I'm had a hard time using it. I don't know how to use it. I read the guide but still can't. Please help.
Are you talking about the "vscode-atomizer" extension?
If yes, then you need to have a config file (atomizer.json) in the root of your project for this extension to work.

Brackets SCSS file to CSS file

When I was studying Multimedia I got a free copy of PhpStorm.
Using PhpStorm I managed to some techincal magic using Ruby(I can't exactly remember how it worked) to write code in SCSS and phpstorm would automatically create a new file and compile all my code to usable CSS code.
I believe I remember something about a 'filewatcher' but im not sure.
Is there any way to do the same in Brackets?
maybe an addon to Brackets or something?
Thanks
I think you're talking about compilers that translate SCSS into CSS (and their integration in PhpStorm).
So maybe you will be interested in Brackets-SASS Plugin.

How to properly integrate HTML5 Boilerplate with Twitter Bootstrap?

In my Play 2.0 project I already have Bootstrap integrated (as the less files, Play can compile them in the fly) but now I found Boilerplate and I think it would be a nice idea to make use of it also.
After a bit of googling I found this:
http://www.quora.com/Is-Bootstrap-a-complement-OR-an-alternative-to-HTML5-Boilerplate-or-viceversa
So, looks like integration should be possible, and there are even 2 projects which try to do that. The only problem is that they do completely different things and I'm not sure which one is correct.
https://gist.github.com/1422879 in its current state seems to just ignore styles.css file coming from Boilerplate. It's renamed to h5bp.css, but I don't see h5bp.css included anywhere.
https://github.com/elgreg/html5-boilerstrap on the other hand uses both of them, just splitting styles.css file into two parts (h5bp_normalize.css and styles.css, bootstrap.css is included between them). But aren't there any conflicts between Boilerplate and Bootstrap this way?
So I'm a bit lost. What is the proper way of doing things in this case?
Just use Initializr, it's the semi-official solution and it has a huge set of options too. Bootstrap + H5BP is supported out of box!
http://www.initializr.com/
I've removed reset styles from twitter bootstrap(by removing less #import statement) and pasted it into html5-boilerplate(in user styles section). Worked fine.
Workless http://workless.ikreativ.com is another Bootstrap/H5BP combo.
the Gist https://gist.github.com/1422879 is H5BP + twitter bootstrap integration

LESS CSS - Extract the CSS generated

I am trying to use LESS CSS to write my CSS. I have imported the style.less and less.js file in that order.
Now i wanna extract the CSS that LESS generates.. is there any way i can do that ? i dont want to use the script to generate it dynamically in production. just for development.
You can extract the CSS using the Firebug extension in Firefox. The compiled CSS appears under the menu choice "inline" in the CSS tab.
http://incident57.com/less/ if you're fortunate enough to use OS X, and there's a ruby gem too http://rubygems.org/gems/less although this has been superseded by the node.js implementation installed through npm. Check http://lesscss.org/ for more information.
There's also http://www.dotlesscss.org/ for windows, but not sure how useful it is.
And in 2013 we have:
http://less2css.org/
Seems to work just fine for me. Just copy/paste.
Chances are you'll want to minify your CSS after this, so:
http://cssminifier.com/
For others who'd stumble here, in modern browser you can see it in the LocalStorage. I use Chrome and it's in the dev toolbar under Resources.
In my case we also want to save the css file automatically (we have a tool that generates a template), we can do it easily with javascript.
This returns the generated CSS, just replace it with the right path, as you see it under the Resources tab:
localStorage.getItem('http://domain.com/css/main.less');
Then we send that through Ajax to save it in a css file. When switching to production we remove the less and replace it by the generated css file.

Is there a jQueryUI LessCss template out there?

We are making extensive use of LessCss and and jQueryUI in a current project and we've looked all over for the jQueryUI theme in Less format. Has any one come across this? And if so, can you point me in the right direction?
Yes there is a template file for jqueryui + lesscss on sourceforge
http://jqueryuilesscss.sourceforge.net/
I will be adding LessCss functions and slimming down the vars as I explore this more. The aim is to also add non js reliant :hover for all inputs/buttons etc
Leafo of the PHP .less project just released a feature that is designed to generate a .less source from a css file. Presumably you should be able to use this to do what you are looking for.
http://leafo.net/lessphp/
Go here and try the lessify stuff https://github.com/leafo/lessphp
This is how I made jQuery widgets follow the compiled twbs theme (for example bootswatch).
https://github.com/DC-development/jquery-ui-less

Resources