---
title: Contributing
collection: 
    - index
    - contributing
permalink: false
---
# Contributing

## Table of Contents

- [Submitting Issues](#submitting-issues)
- [Contributing Code](#contributing-code)
- [Project Structure Guide](#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](https://help.github.com/articles/creating-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](https://help.github.com/articles/fork-a-repo/) this repo into your local git
1. Create your freature branch (`git checkout -b my-branch`)
1. Make your changes
1. Commit your changes (`git commit -am "Adds a feature that does..."`)
1. Push to the branch (`git push origin my-branch`)
1. Create a new [Pull Request](https://help.github.com/articles/creating-a-pull-request/) with full remarks on your changes
1. 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

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

- Modifiers for the component are also in the index partial

```scss
// 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

```scss
// 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

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

- Element modifiers are also in the element partial

```scss
// 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

```scss
//_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

```scss
&__element {
    color: white;

    &--modified {
        color: blue;

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