Netlify-cms: Select a UI framework (by March 6)

[verythorough]

Because we want it to be easy for people to jump in and contribute, we’d like to re-style the UI on a well-documented CSS framework. We also want to do this very soon, so can all get moving on making improvements! I’m posting this issue so we can put up options and discuss pros and cons, then come to a decision on Monday, 6th of March.

Here are our main requirements:

• have good documentation
• minimal styling
• ideally postcss based

Let’s get some suggestions up and discuss!

[bdougie]

Just want to throw(try) out tachyon as an option http://tachyons.io. It is used in the TodoMVC pretty heavily and Algolia's site. http://tachyons.io/components/

[verythorough]

I occurs to me, does it matter what CSS pre/post-processor the framework uses if we just include their minified CSS and then process our own additional CSS however we like? Do we plan to make direct changes to the framework itself?

[Benaiah]

@verythorough I'm not as familiar with PostCSS as other preprocessors, but in when using other proprocessors you'd want to be working with the uncompiled version - it gives your CSS access to functions and definitions from the framework's source that aren't available in the minified CSS code.

If that doesn't apply to PostCSS, I can't see a reason why not to use the minified CSS. If it does apply, I'd definitely recommend using the source code of whatever framework we use.

[verythorough]

Ah, of course, that makes sense. I'm also not familiar with PostCSS yet, so don't know if it's different in that way.

[imorente]

I'm not familiar with tachyon but, after a quick look at their documentation, if making a link look like a button requires adding f6 link dim br1 ph3 pv2 mb2 dib white bg-navy, that would tie the components too much to the styling, imo.

Maybe something a bit more "styled", like Foundation (but not as heavy as Bootstrap) might serve us better.

[Benaiah]

Disclaimer: I haven't used the very newest version of Foundation, but I have used several others extensively and the changes don't look transformative from what I can see.

Modern Foundation has very opinionated tooling (their docs assume you use their CLI tool) with poor support for doing it another way, in my experience. It's also not much lighter than Bootstrap - I wouldn't describe it as "lighter" so much as "less complete" - it's still 60-200kb depending on your package. Its typography is fairly poor IMO (why are all the headers so enormous?) and its grid system adds pretty little if you're already using Flexbox. It has a number of JS components that won't mesh well with the React codebase which we'd have to strip out, and is in general more designed for sites (which benefit from styling rules having large scope) than apps (whose main CSS concern is generally isolating components from each other). Finally, it uses SASS, not PostCSS (idk how tied we are to PostCSS, but that was the preference expressed the topic) - being SASS, it's globally scoped, so you have to name everything uniquely.

Foundation is at best a slightly better/smaller Bootstrap, in my opinion, and I don't think either of those frameworks are appropriate for this project. I'd rather find something with the following properties:

• Fairly minimal
• Mostly or exclusively used at compile-time (that is, it doesn't have a bunch of boilerplate CSS - ideally, if you use none of its components, it should not add anything).
• Either a very simple grid system or delegates grid layout entirely to flexbox/calc.
• Uses PostCSS so we get the major advantage of automatically restricted scope.

What do you guys think about those guidelines?

[imorente]

Totally agree with you, Benaiah, on using Foundation. By "heavy" I meant more from a design point of view than from a file weight point of view – it's easier to override Foundation styles that Bootstrap styles. But I would very very much like to find a lighter alternative, in every way.

[verythorough]

@benaiah, I think those are all good points. Now we have to see if we can find such a thing!

One thing I also wonder is if we should look at React component libraries, or really just a super-focused CSS-only framework.

[verythorough]

Here are a few component libraries I've come across:

• http://react.semantic-ui.com/
• http://blueprintjs.com/
• http://elemental-ui.com/
• http://jxnblk.com/rebass/

The first three use LESS, and the last uses inline CSS. Elemental UI says they're transitioning toward inline. Inline would certainly meet the "exclusively used at compile time" preference, but I'm still not totally sold on the whole JS-makes-inline-styles thing.

On the flipside, for a tiny CSS-only framework, there's https://www.cutestrap.com/. It leverages flexbox for grids and is very simple and small, but not exactly feature-rich.

[verythorough]

It seems that a very small, very simple CSS framework may be the way to go, giving some easy building blocks with good docs, without limiting future development too much. Here are a few we've found:

• https://picnicss.com
• https://purecss.io
• http://getskeleton.com/

[samlawski]

Hi I was invited to this conversation as I'm looking for ways to contribute to Netlify CMS.

I definitely agree with the above about Bootstrap and Foundation. When working with either of them I found myself rewriting a lot of the default styles. So I think it's worth considering how much custom UI styles are going to be written anyway and how much should a framework already come with.
If you use postCSS, preCSS, SASS etc. and have access to variables and mixins it might even be an option not to use any framework at all. Maybe worth a thought.

If you like the minimal approach but don't want to go all Vanilla, Suit CSS might be an interesting option. It offers a library of helper classes, called utilities which handle lots of common cases such as flexbox. The downside of the utilities is similar to Tachyons as it might result in an HTML element having lots of classes.

Other interesting options:

• I've heard very good things about pure.css (as mentioned by @verythorough)
• I like the simple look and feel of milligram and how small it is!

Personally, I'm very hesitant of relying on JS to handle my CSS (but this might just be because I miss the good old days when Web Development was simple). But I see that there are huge benefits and very good arguments! For example the size of the framework doesn't matter as you only import what's needed. Also, you save a lot of energy writing very specific CSS as it's probably covered by the framework.
Semantic UI (as suggested by @verythorough) appears to have good theming options and looks pretty nice.
Personally I like the Material Design but that's obviously extremely opinionated in terms of design and doesn't fit to every project.

Ok that was a lot but maybe it helps?

[imorente]

@jimbroski, thanks of the great write up!

One of the problems I see in the current UI is the lack of design direction. Like you very well point out

it's worth considering how much custom UI styles are going to be written anyway and how much should a framework already come with

The minimal approach would be great if we had a design style guide to build on. I believe that's the desired ultimate goal –to be able to have a custom-design UI– but that'll obviously take quite some time and effort.

So the more impending issue I see is how to fix the currently very rough UI in a short time, without creating such a tight coupling with the UI framework that it'll be impossible to change later.
Maybe that discussion should go in a separate issue?

[budparr]

I second Tachyons, mentioned above. I think it's particularly well suited to an environment with multiple contributors.

[verythorough]

Thanks for all of the discussion!

As it turns out, on March 6, we received a new deadline from a content partner that puts Netlify CMS in a very much wider release on Wednesday, March 16. With this short timeframe, we're thinking it's better to make some very simple style improvements for now, and re-visit the possibility of a custom style guide in later weeks.

If you're curious about what we're hoping to achieve and areas where you can help, check out the project board.