CONTRIBUTING.md

Contributing to Atom Material UI

Some of this content comes from Atom's Contributing guidelines. Please, don't be intimidated, this is just a guideline. All bug reports, feature requests, and questions are always welcome.

Code contributions

If you want to get your hands dirty and contribute with some code, you should fork this repository, make your changes, and then send in a pull request.

git clone <your_forked_repo>
cd atom-material-ui/
apm link -d && npm install
atom -d .

I recommend installing the package editorconfig so you don't have to change your global settings for indentation.

Stylesheets

Use four spaces per indent and leave an empty line between a selector's properties and a nested selector. Also leave a empty line between selectors. The white space helps with readability:

.selector {
    property: value;

    .nested {
        property: value;
    }
}

.another-selector {
    property: value;
}

Don't abuse nesting or we'll all regret it in the future. Having !important flags all over to fight specificity is nasty. Try using three levels at the most. !important is only allowed if you need to override a package's inline styles.

Don't be afraid to include another level if you want to target a &.className:

.selector {
    property: value;

    &.className {
        property: value;
    }
}

Using BEM(ish) syntax nesting is OK:

.block {
    &__element {
        &__sub-element {
            &--modifier {
                property: value;
            }
        }
    }
}

That unholy pyramid doesn't look great, but the output CSS isn't that hard to override.

JavaScript

In a nutshell, we're following Airbnb's JavaScript style guide, except we use four spaces per indent. Make sure to check the style guide. Also, we have ESLint to catch bugs and style errors, so make sure to install it along with linter and linter-eslint.

Trying new features

Getting the development version

If you'd like to test new features and hunt bugs, follow these simple steps to get the latest (development) version.

git clone [email protected]:silvestreh/atom-material-ui.git
cd atom-material-ui/
apm link -d && npm install

You'll have to run Atom in developer mode to test the theme. To do so, open a terminal and run:

atom -d .

This way both, the APM published version and the development version, can coexist.

Reporting a bug

Before opening an issue please search through the existing ones, even those that are marked as closed. Also, please take these into account before submitting an issue:

• Which version of Atom are you using? You can get the exact version by running atom -v in your terminal, or by starting Atom and running the Application: About command from the Command Palette.
• What's the name and version of the OS you're using?
• Which packages do you have installed? You can get that list by running apm list --installed in a terminal.
• Are you using local styles in your user stylesheets? If so, provide its contents, preferably in a code block or with a link to a gist.