Contributing

Table of Contents

• Submitting Issues
• Contributing Code
• Project Structure Guide

Submitting Issues

Issues should be created when you find a bug with the project or when you have an enhancement idea you want us to consider implementing.

• Create an issue
• Make sure your issue is detailed and covers the following if applicable
  • Expected Behavior
  • Actual Behavior
  • Desired Behavior
  • Steps taken to cause unexpected behavior
  • Version of project being used

Contributing Code

Code should be added when you find a bug you want to fix yourself or when you have an enhancement idea that you want to code.

1. Fork this repo into your local git
2. Create your freature branch (git checkout -b my-branch)
3. Make your changes
4. Commit your changes (git commit -am "Adds a feature that does...")
5. Push to the branch (git push origin my-branch)
6. Create a new Pull Request with full remarks on your changes
7. Pull requests will be reviewed and may be accepted by project maintainers

Framework Structure Guide

One folder per component

• ui-components

  • components
    • component-one/
      • _index.scss
      • _element-one.scss
      • _element-two.scss
    • component-two/
      • _index.scss
      • _element-one.scss
      • _element-two.scss

• Main styles for component go in an index scss partial

// component-name-one/_index.scss
    .main-component {
        background-color: white;
    }

• Modifiers for the component are also in the index partial

// component-name-one/_index.scss
    .main-component {
        color: black;

        &--modifier {
            color: white;
        }
    }

• Elements have their own partials and those are imported inside the main component selector in the index partial

// component-name-one/_index.scss
    .main-component {
        color: black;

        &--modifier {
            color: white;
        }

        // import component's element partials here
        @import "element-name-one";
        @import "element-name-two";
    }

• Main styles for elements go in their partial files

// component-name-one/_element-name-one.scss
    &__element {
        color: black;
    }

• Element modifiers are also in the element partial

// component-name-one/_element-name-one.scss
    &__element {
        color: black;

        &--modifier {
            color: white;
        }
    }

• If modifying the main component affects the styling of a contained element use the following syntax in the element partial

//_element.scss
&__element {
    color: white;

    .main-component--modified & {
        color: yellow;
    }
}

• If modifying the main component affects styling of a modified contained element use the following syntax in the element partial

&__element {
    color: white;

    &--modified {
        color: blue;

        .main-component--modified & {
            color: red;
        }
    }
}