CSS Framework about uppy

[hedgerh]

Using a framework for the sandbox, or the client UI as well?

[kvz]

The important thing here is the client UI. If the sandbox can profit from it - cool, but that's just to polish our work environment

[arturi]

I think we might not need a CSS framework here. It’s a dropzone, modalbox and selects, right? We can borrow pieces from Pure and others, but I’d say we start fresh, try to stay lightweight. I can handle the CSS :)

[hedgerh]

Okay. Was just making sure you weren't just talking about the sandbox.

I think it'd be best to avoid frameworks for the client UI. Bootstrap is nice for internal projects or quick prototyping, but it's not great for real projects. The client UI shouldn't be too CSS heavy anyway, so I think we'll be fine.

As for standards, here are my usual preferences:

• Alphabetize selectors.
• Alphabetize rules in a selector.
• Style for the mobile breakpoint first, then use (min-width) media queries to get the tablet and desktop breakpoints right.

With SASS, I am fine with one-level deep nesting but don't like nesting with an & extend operator. For instance, if you were selecting .foo and .foo__bar

/* bad */
.foo {
  &__bar {}
}

/* good */
.foo {}
.foo__bar {}

It makes it a lot easier to search for selectors in files and know which selector you're actually working on.

Finally, I'm partial to using a syntax called SUIT CSS that is based off BEM. It capitalizes each word in a selector and uses dashes '-' instead of underscores '__' for children. So:

.Transloadit-UploadField

vs.

.transloadit__upload-field

[kvz]

Sounds good. I added Skeleton to the sandbox but that has no meaning beyond a bit of polish for our day-to-day work. Feel free to rip it out as well.

@hedgerh Please cement those guidelines in a CONTRIBUTING.md. Afterwards @arturi and us can comment on it or change what we don't like.

If you all +1 we can close this

[arturi]

Wow, this is just perfect. Everything I would have said over the next few weeks probably. @hedgerh, 👍

Also, this is worth looking through, Medium CSS guidelines: https://gist.github.com/fat/a47b882eb5f84293c4ed

[hedgerh]

@arturi: YES! :D 👍 I'll take a look at the Medium guidelines.

[kvz]

With #17 merged let's close this one 👍