top | item 5830190

Roots – Better CSS

55 points| dakrisht | 12 years ago |roots.cx | reply

30 comments

order
[+] ianstormtaylor|12 years ago|reply
To whoever manages this page: please rethink the way you're introducing the library. I read the first three paragraphs and still had no idea what was going on. All I learned was that Stylus was involved. Then the next section talks about when and where to use mixins, and the logic for when to use the "native form" vs. the "mixin form" seemed weirdly rigid, so I left.

If you want people to use your library, they need to understand it. And if you want them to understand it, you need to be more compelling. Only after going back to make sure I'm critiquing you right did I realize this was part of a bigger toolkit at all.

Oh, and please increase the font size.

[+] jenius|12 years ago|reply
Hey wow didn't realize this had been posted on hacker news - I'm the author of roots and here way too late to field comments. Thanks so much for the feedback Ian! No need to assume such a critical tone, I'm open to any and all feedback, so let's keep it friendly.

Let me try to explain why I have that intro paragraph there. Stylus is a very open and flexible language, and the same statement can be written many different ways. In addition, it's not as commonly used as something like sass, so there aren't well-known conventions that have arisen. All I was doing here was trying to establish and explain a couple conventions, to make life easier and more clear for everyone.

In addition, someone randomly posted the documentation page for the css library here rather than the homepage. This might be part of the reason why you were confused about what exactly this is.

Would love to hear more about how I could be 'more compelling' with this - always a great goal and something I hope I am able to do -- of course keeping in mind that this is a documentation page.

[+] ganarajpr|12 years ago|reply
This might just tempt me ( a non css-y person ) to switch over from bootstrap to this while prototyping or otherwise. It makes things extremely modular which is what makes sense to a programmer like me.
[+] jbm|12 years ago|reply
I used this library for an internal project for my employer after seeing it on Hacker News

I found it relatively easy to use, but it was a pretty simple thing I was dealing with (one-page registration scheme). Having Coffeescript built in was quite nice, since I find it much easier to deal with.

I don't see it as being better than major CMS-style js libraries like Angular JS (which I started playing with recently), but it was pretty easier to learn for the toy application I was building. Being able to deploy to Heroku through the command line is neat, and the auto-reload on changing the HTML was pretty cool too.

(I'm not in any way affiliated to the person who wrote it, just someone who used it for a small project.)

[+] jenius|12 years ago|reply
Hey jbm, author of roots here. Really glad that you ended up using this (probably quite a few releases ago), and thanks for the feedback! I don't quite understand what you're getting at here though, because the libraries you are comparing it with are in no way similar.

AngularJS is a client-side javascript MVC framework and roots/axis are a static site compiler and a css library, respectively. It's easy to use roots with a client-side mvc framework if you prefer, I even have built in precompiled templates to make it easier.

[+] knv|12 years ago|reply
>CMS-style js libraries like Angular JS

CMS as in Content Management Framework?

[+] brenfrow|12 years ago|reply
Not the best example of good css. The menu covers up the whole screen on my galaxy s2. Might want to think about responsive design.
[+] andyhmltn|12 years ago|reply
I'm not sure the page is intended to be responsive (I may be wrong.) It just looks like they are using fluid widths.
[+] pedalpete|12 years ago|reply
Even on a tablet, that side menu is horrible. I'm not sure what they were attempting to do with that design, but it fails miserably, and as a result (with the lack of a coherent message of why I would use it) makes me doubt the whole project, which is a shame because it could be great. Please pay attention to details.
[+] hipsters_unite|12 years ago|reply
Yep, tried reading and then gave up because the menu was too obtrusive.
[+] riquito|12 years ago|reply
I have an hard time with the colors.

input-warning(color = yellow)

Yellow on yellow on my monitor is pretty much impossible to read.

input-success(color = green)

is better but I need to concentrate to read the letters

simple-button

are more similar to tags to me, and the hover effect is not noticeable

Take this as constructive criticism, I just had the time to skim over the project. I wish you the best luck.

[+] jenius|12 years ago|reply
Thanks riquito - I'll work on these. They show up very clearly on my screen, but I totally get that not every screen is mine, I'll try to bump up the contrast a bit.

For the simple button, I don't disagree, it's more of a base to build on top of. I am seeing more buttons that looks like the in production these days though, and the lack of affordance is a little weird to me

[+] s0me0ne|12 years ago|reply
Nice stuff, I always wished CSS would have more shorthand codes. Not sure I'll use it, I worry I'll become too dependent on non-official syntax. Hopefully the W3C sees this and borrows some ideas.
[+] bkad|12 years ago|reply
What's the draw in using this over stylus with nib?
[+] jenius|12 years ago|reply
It's a much larger and more comprehensive library, most of nib is included in it, and it's actually developed, maintained, and documented.
[+] Dakuan|12 years ago|reply
Oh goodie, another one.
[+] khet|12 years ago|reply
It's actually really good. You should give it a second look.
[+] lemieux|12 years ago|reply
I had exactly the same reaction.. "oh god... why..."