Contribute to The Vision

Come, join the foce

Development Workflow Setup

Head over to the github project page to checkout the code and set it up. The instructions for the dev setup is documented with the project.


Overview

One of the core principles of this project is to make is very easy for an engineer to contribute to this project and be able to make modifications on the fly if components don't fit very well in the existing projects. The following section provides a full overview on how to get started with the contribution. If you need help, please reach out on #design_engineering channel on slack.


Bootstrap Customization
  • The bootstrap v^4.0.0-alpha.2 npm has been included in the project to get the v4 version.
  • The overrides, are in the components/bootstrap folder.
  • The _variables.scss is one of the most powerful files that allow customization at a global level.
  • For component level overrides, add a new files and include it in bootstrap.scss. An example of this is _navbar-override.scss.

Middleman

The project uses Middleman to house the project.


Components

Components are of two types; There are styled elements and custom components. An example of a styled element is a button, which is just a CSS mod on a bootstrap element. The custom components on the other hand demand a React component of its own.


Technologies

Familiarize yourself with the following technologies to speed up development on the project.


Adding a New Component

Check bootstrap first, always!

Bootstap has evolved extremely well and houses so many components that practically fill every basic need. So, before going ahead and creating one, please, please do check if it already exists.


Housing the Component

Every component needs a place in the project, so that it can be developed and showcased. Follow the steps below to do so.

  1. Create a new page under source folder.
  2. This page will initially serve as the development environment for the component.
  3. Once complete, it can also take in the demonstration and documentation for that component.

Adding a Styled Element
  1. Refer to the existing customizations in the components/bootstrap folder.
  2. If any of those logically extends the customization, then add the code there. Else, create a new file for it.
  3. Check the details below in the document to get details about how to how to showcase it.

Adding a Custom Component
  1. Create a new component folder under the components folder.
  2. Create the javascript file that powers the functionality of the component. Be sure to make this a react component.
  3. Add styles to the same folder.
  4. Add a reference to the components in components/core.js, so that it's bundled with the output file, which is indix-ui.js.

Showcasing the Component
  1. The component can be showcased in the same page as it was developed. For example, if the new component is call breadcrumbs, then the page URL would be /breadcrumbs.html.
  2. Add documentation around how to use this component in the same page, and voila, you're done!

Pull Requests

The final step is to get your code in. Remember, never commit to master. Develop everything in a branch, have it reviewed by one of the contributors on this project and merge it.


Publishing Documentation to Github

Run npm run publish-page -- "<commit msg>"
© 2016 Indix ™ Copyright Privacy Contact