10 ms·

Roots – Better CSS

55 points by dakrisht 13y ago

brenfrow 13y ago
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 13y ago
  I'm not sure the page is intended to be responsive (I may be wrong.) It just looks like they are using fluid widths.
  - daemonl 13y ago
    Responsive is one thing, but I can't even zoom in on a mobile... Dear all web developers, please resize your Web browser to about a mobile phone width before deploying. Just once. Just to check. Especially if your page is about a web technology.
  - daemonl 13y ago
    Responsive is one thing, but I can't even zoom in on a mobile... Dear all web developers, please resize your Web browser to about a mobile phone width before deploying. Just once. Just to check. Especially if your page is about a web technology.
  - jenius 13y ago
    It's not intended to be responsive. The fact that it's somewhat fluid was added as an afterthought. This page is documentation for a css library, which is not something you would be using on a tablet (unless something crazy has happened and people are now coding on tablets). I do hear this concern, and will try to adjust the responsiveness a little, but it's a much lower priority for me than actually improving the library (which I have been spending nearly full time on), since I assume the docs will never be actually used on a tablet and rather would be used on some sort of desktop that you are coding on.
- hipsters_unite 13y ago
  Yep, tried reading and then gave up because the menu was too obtrusive.
- pedalpete 13y ago
  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.
  - dakrisht 13y ago
    Yeap, same. iPad and Nexus - side menu is awful.
- declandewet 13y ago
  http://carrot.is http://carrot.is was built with it. Perhaps that changes your mind? :)
ianstormtaylor 13y ago
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.
- khet 13y ago
  I had better luck and found this video which explained it pretty well. http://www.youtube.com/watch?v=47Qv6djtKlY&feature=youtu.be http://www.youtube.com/watch?v=47Qv6djtKlY&feature=youtu... But I agree with you, the author should probably try an intro video on the homepage.
  - jenius 13y ago
    you found that video on the real homepage ; ) the page that had been posted here was the css library documentation
- jenius 13y ago
  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.
Dakuan 13y ago
Oh goodie, another one.
- khet 13y ago
  It's actually really good. You should give it a second look.
- lemieux 13y ago
  I had exactly the same reaction.. "oh god... why..."
bkad 13y ago
What's the draw in using this over stylus with nib?
- jenius 13y ago
  It's a much larger and more comprehensive library, most of nib is included in it, and it's actually developed, maintained, and documented.
ganarajpr 13y ago
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.
riquito 13y ago
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 13y ago
  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
jbm 13y ago
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.)
- knv 13y ago
  >CMS-style js libraries like Angular JS CMS as in Content Management Framework?
  - jbm 13y ago
    Oh drat. I meant MVC, wasn't thinking straight when I wrote that.
- jenius 13y ago
  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.
  - jbm 13y ago
    Hey, thanks for the framework. I liked Roots.cx, and I found that a lot of the functionality that I really liked therein. Kudos! My comment probably needed to be more thoroughly thought out before being posted. My main issue with roots (and the reason I probably will not be using it in the future) is that I need to assume whoever takes over for me in 2 years will understand how to use Roots (and to make sure it is still updated). I can be pretty sure that Bootstrap will still be updated and maintained, but I can't be sure of the same with Roots. It makes it hard to use in a work context for anything major. I will take a closer look at Roots and your pre-compiled templates for my personal projects, thanks for letting me know about it.
s0me0ne 13y ago
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.

55 points by dakrisht 13y ago

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 13y ago
I'm not sure the page is intended to be responsive (I may be wrong.) It just looks like they are using fluid widths.
- daemonl 13y ago
  Responsive is one thing, but I can't even zoom in on a mobile... Dear all web developers, please resize your Web browser to about a mobile phone width before deploying. Just once. Just to check. Especially if your page is about a web technology.
- daemonl 13y ago
  Responsive is one thing, but I can't even zoom in on a mobile... Dear all web developers, please resize your Web browser to about a mobile phone width before deploying. Just once. Just to check. Especially if your page is about a web technology.
- jenius 13y ago
  It's not intended to be responsive. The fact that it's somewhat fluid was added as an afterthought. This page is documentation for a css library, which is not something you would be using on a tablet (unless something crazy has happened and people are now coding on tablets). I do hear this concern, and will try to adjust the responsiveness a little, but it's a much lower priority for me than actually improving the library (which I have been spending nearly full time on), since I assume the docs will never be actually used on a tablet and rather would be used on some sort of desktop that you are coding on.
hipsters_unite 13y ago
Yep, tried reading and then gave up because the menu was too obtrusive.
pedalpete 13y ago
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.
- dakrisht 13y ago
  Yeap, same. iPad and Nexus - side menu is awful.
declandewet 13y ago
http://carrot.is http://carrot.is was built with it. Perhaps that changes your mind? :)

ianstormtaylor 13y ago

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.

khet 13y ago
I had better luck and found this video which explained it pretty well. http://www.youtube.com/watch?v=47Qv6djtKlY&feature=youtu.be http://www.youtube.com/watch?v=47Qv6djtKlY&feature=youtu... But I agree with you, the author should probably try an intro video on the homepage.
- jenius 13y ago
  you found that video on the real homepage ; ) the page that had been posted here was the css library documentation
jenius 13y ago
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.

Dakuan 13y ago

Oh goodie, another one.

khet 13y ago
It's actually really good. You should give it a second look.
lemieux 13y ago
I had exactly the same reaction.. "oh god... why..."

bkad 13y ago

What's the draw in using this over stylus with nib?

jenius 13y ago
It's a much larger and more comprehensive library, most of nib is included in it, and it's actually developed, maintained, and documented.

ganarajpr 13y ago

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.

riquito 13y ago

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 13y ago
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

jbm 13y ago

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.)

knv 13y ago
>CMS-style js libraries like Angular JS CMS as in Content Management Framework?
- jbm 13y ago
  Oh drat. I meant MVC, wasn't thinking straight when I wrote that.
jenius 13y ago
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.
- jbm 13y ago
  Hey, thanks for the framework. I liked Roots.cx, and I found that a lot of the functionality that I really liked therein. Kudos! My comment probably needed to be more thoroughly thought out before being posted. My main issue with roots (and the reason I probably will not be using it in the future) is that I need to assume whoever takes over for me in 2 years will understand how to use Roots (and to make sure it is still updated). I can be pretty sure that Bootstrap will still be updated and maintained, but I can't be sure of the same with Roots. It makes it hard to use in a work context for anything major. I will take a closer look at Roots and your pre-compiled templates for my personal projects, thanks for letting me know about it.

s0me0ne 13y ago

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.