Brent Jackson

http://iamsurface.com pure css material, not updated in a while but looks great and has modals with pure css https://imperavi.com/kube/css/ almost not minimal but pretty cool http://jxnblk.com/gravitons/ really minimal

Note that you're not directly setting the size and the like. Instead, you're selecting items from a scale that should compose well together. They could advertise this better; I've read a post in the past that explained it well, but unfortunately I couldn't find it any more. https://styled-system.com might be a good place to start if you want to investigate why there might be more to it than you might assume at first. Edit: I think this was the one: https://jxnblk.com/blog/mathematical-web-typography/

I'm a big fan of Styled Components. Also, check out Rebass: http://jxnblk.com/rebass/

I've been using rebass lately and finding it quite nice - not sure how it compares with anything angular/sails based though. http://jxnblk.com/rebass/

I have yet to get too involved in CSS-in-JS yet, purely because I am waiting for things to settle a little before I transition to it. With that said I am really excited for it, and I think it is solving a lot of problems I have with CSS. 1. This is one such component based styling framework built on top of styled-components. http://jxnblk.com/rebass/ 2. In many of the solutions that exist I have found that they aim to work very well with existing CSS as much as possible. I haven't had to deal with many issues. Hopefully by the time I start switching entire projects over to it, everything will be completely stabilized.

I see your point. Having the mobile layout Grid thing is quite handy. There is another toolkit for React I've been using for an admin backend that has proven useful, not quite as polished but has more of a complete toolkit for what I need. npm rebass, relfexbox, react-geomicons was on Hacker News as well -> http://jxnblk.com/rebass/

Rebass does all styling inline. You can override per instance (pass in `style` prop), or "globally" via the React `context`. Example themes [1] can be seen in the demo [2] ("Config" dropdown in top right). [1] https://github.com/jxnblk/rebass/tree/master/demo/configurations [2] http://jxnblk.com/rebass/demo/

I think this demo is pretty rad: http://jxnblk.com/rebass/demo/

There's a good article on color contrast here: http://viget.com/inspire/color-contrast And a really cool tool for rating color contrast: http://jxnblk.com/colorable/demos/text/

I've really enjoyed using jxnblk's approach to styling. I started with basscss [1], then moved on to rebass, and finally settled on axs [2]. They all take more or less the same approach, but operate differently. Rebass generates inline styles; basscss is simply a CSS file that defines a set of utility classes (like `mb2`, `p3`, `flex-none`, etc.); and axs dynamically generates CSS classnames and stylesheets. ...Or at least, that used to be the case. Looking at the most recent version of rebass, it looks as if it uses the same dynamic classname/stylesheet generation strategy. Now I'm not so sure what the difference between rebass and axs are, except that the former seems to be a comprehensive set of UI components, and the latter a tool for generating your own component library. In any case, I'm glad jxnblk keeps experimenting with these libraries, even if it's hard to keep up with the changes. Their surface area is so small that it's easy to pick up the API and it doesn't feel like a risk or burden to stay on older versions. [1] http://basscss.com/ [2] http://jxnblk.com/axs/