Hacker News Reader

Comment by natefaubion | Hacker News Reader

Might I also suggest nib, and excellent set of Stylus extensions for working with CSS3. One of the most useful features is image inlining, especially for gradients. While they end up being a fixed size, they also work crossbrowser (at least with any browser that supports data URIs).

http://visionmedia.github.com/nib/ http://learnboost.github.com/stylus/

All the examples show how to integrate it within your Node project, but you can just as easily use it from the command like with the `u` flag.

  stylus -u nib <file>

View on HN

For some reason I've had a preference against using CSS frameworks like this because they often take you away from the pure CSS code. My reasoning being if you end up in an environment where do not have access to the framework can you complete the task at hand?

I guess I would say it's like learning Javascript before using jQuery (which I did) so that you have the basics down.

I suppose I'll have to try a few of them out to see how I feel about it.

Also, I'm quite partial to ColorZilla's Gradient Editor. http://www.colorzilla.com/gradient-editor/

I don't think so. It's not like it really does things for you or abstracts away the weirdness of CSS like jQuery does for JS. You can't write a functioning website without knowing all the quirks of CSS rendering. The only thing it's done for me is change my muscle memory. I write stylus code without the braces, colons, and semicolons so I often write syntactically wrong CSS on the first pass whenever I'm in an environment without Stylus.

Checkout Bourbon–a library of SASS mixins and variables. It aims to be very vanilla, so you'll write the mixins similar to plain CSS. http://thoughtbot.com/bourbon/

Thanks for the heads up on this. I'm really tired of using compass just for the css3 mixins.

If you're a Sass user (and even if you're not), you should check out Compass:

http://compass-style.org/

Compass has CSS3 helpers, automated sprite generation, semantic grid system support and lots more. It's a killer power tool for front-end devs and designers.

what's amazing about stylus/nib is that a "mixin" is just like a standard css call. So as soon as I include nib, my `border-radius` attributes automatically get vendored.

Surprised there's not more people using it. It does have major speed issues however with large projects. I have a few dozen stylesheets and it takes over 2minutes to compile the project for deployment.

Stylus' very liberal syntax feels nice at first, but when you start using more complex selectors, @media queries, etc, you come across bugs and ambiguities. Sometimes bugs where the fix is not obvious at all due to the syntax being so relaxed and ambiguous.

I would love a mix between Sass' reliability and Stylus' flexibility...

yes, three times yes. nib is the most powerful css gradient shim for a css preprocessing language (in this case Stylus) that I found so far.

Reply on news.ycombinator.com