Advanced Usage

Custom styleguide styles

Sometimes, wou want specific styles to make the styleguide look better.

It is recommended to put your custom styles for this purpose in styleguide.scss.

For example, in the “real world” (e.g. the app itself) some HTML elements are hidden by default, or positioned in specific ways. In the styleguide sometimes we want to undo some of that for demonstrational purposes.

A common thing to do is to make fixed positioned elements such as modals static for styleguide purposes. Sometimes element are also hidden by default, and you want to show the unhidden version in the prototype.

For example, here is code to make Bootstrap popovers visible in the styleguide:

/* Make popovers visible
   ========================================================================== */

div[id^="component-"] {
  .popover {
    position: relative;
    display: block;
    margin: 30px;
  }
}

Because this logic is project specific, we do not supply defaults with Bedrock. You are welcome to write your custom styles in this files. Don’t forget to remove it in production though!