SCSS structure & Guidelines

[bj-mcduck]

Ahoy! I'm interested in contributing.

I'd like to know if you're using any specific SCSS structure, like SMACSS, BEM, or OOCSS.

• Do you have any style guidelines to follow?
• Which versions of Ember do you plan to support in the next version?
• Do you have an issue tracking tool like HuBoard, Waffle, or Trello to watch?
• What can I help with?

Cheers

[miguelcobain]

Hi! Contributions are so much welcome!

• Most of the styles are borrowed from angular material
• There isn't a specific structure. We just keep styles in separate files for each component. I've considered using this: https://github.com/ebryn/ember-component-css
• I guess we should follow ember-try and always support latest beta and the two latest stable versions
• We use github for everything.
• There is plenty of stuff left to do! Please read https://github.com/miguelcobain/ember-paper/issues/3 and the fantastic menus issue https://github.com/miguelcobain/ember-paper/issues/65
• Menus will be really fun to implement. :) I just don't have the time right now. Could use some help.

Thank you for your interest!

[bj-mcduck]

@miguelcobain I was just noticing now that there's some variance in what names the CSS styles get.

I see somethings like md-icon as a tag name, and paper-icon as the class name. Where as md-checkbox has both tag name, and class name the same.

This could cause some confusion down the road. It may not be huge priority right now, but I was thinking I could create a wiki page for contributing so it'd be easier to keep it updated (doesn't require a PR, or push to update it). We don't necessarily need to go update all the current components to match immediately after deciding, but if we come up with a convention now there'll at least be a consistent expectation set going forward of how to code it, and how to style it in app.

Personally, I'd like to start forming an outline on how to answer questions like:

• What format do we give the components' class names?
• If we have a paper-wrapper component, what name do we give an element that is within that component? _e.g., paper-wrapper_button, paperwrapper-button_text, etc._
• Is coffeescript/sass/emblem/etc. ok? (I think that's an assumed NO, but I'd probably toss that in the doc too.)
• Do the tag names need to match the class names? IMPO, yes they should
• Do we use paper-component, or md-component across the board?

Specifically that last one is another talking point. md- is great because it's so short, but it is primed to conflict with the expected xs, sm, and md breakpoints found in many other frameworks.

Anyway, lots of thoughts here... but figured I should post it for discussion.

[bj-mcduck]

I also whipped together this PR to provide some better structure for the scss files.

I could address some other organization changes in it if anything comes of this discussion.