Documenting Dependencies

[loominade]

A useful feature could be a Dependencies section.

Here a mockup:

// Buttons
// 
// A cool submit button.
//
// Markup: <input type="submit" />
//
// Styleguide: forms.button

[type="submit"]
  line-height: 1.2em

// Textfield
//
// A cool textfield.
// 
// Markup: <input type="text" />
//
// Styleguide: form.text

[type="text"]
  margin: 0 1em

// Small form
//
// A very small search form.
//
// Markup:
// <form class="small-form">
//  <div>
//     <input type="text" />
//     <input type="submit" />
//   </div>
// </form>
//
// Styleguide: form.small-form
//
// Dependencies:
// * form.text
// * form.button

.small-form > div
  display: flex

An HTML styleguide then could list links to all dependent components:

Small Form

A very small search form.

Example:

<form class="small-form">
 <div>
    <input type="text" />
    <input type="submit" />
  </div>
</form>

Dependencies:

• Button
• Textfield

Or even warn if a component is missing:

Dependencies:

• Button
• form.text Warning: dependency missing!

Also the dependent sections could link to sections which are dependent from it:

Button

A cool submit button.

Example:

<input type="submit" />

Required by:

• Small Form

This could help to keep track of the code. When one changes the Button Component he might be interested to check if the Small Form Component was unintentionally affected by the change.