search

holidaypirates / nucleus

Nucleus is a living style guide generator for atomic css based components. It's a Node application parsing the source SCSS files and reading information from DocBlock annotations.
https://holidaypirates.github.io/nucleus/
MIT License
474 stars 43 forks source link

@Markup for variables? #33

Open misstricky opened 7 years ago

misstricky commented 7 years ago

Hello! Loving Nucleus so far. I have some variables where it would be great to be able to show examples. Any chance this could ever be added in?

Thanks!!

Rhym commented 7 years ago

Could you give an example?

misstricky commented 7 years ago

Easiest for me to show in the non-nucleus version of the styleguide (trying to convert it to nucleus).

We've got font-size variables. It would be nice to show what these actually look like: image

Right now as I'm setting nucleus up this looks like: image

Rhym commented 7 years ago

I suppose a nuclide for font sizing similar to the colour nuclide could be added. I think for the interim I would apply these variables to a class e.g .base-font--small, and applying them in markup. An example of this:

/**
 * @atom Font Sizing
 * @section Typography
 * @markup
 *  <p class="base-font--xsmall">$xsmall-base-font</p>
 *  <p class="base-font--small">$small-base-font</p>
 *  ...
 */
.base-font {
  &--xsmall {
    font-size: $xsmall-base-font;
  }
  //...
}
misstricky commented 7 years ago

@Rhym yup I have those classes from making them for the non-automated old styleguide :) Yeah i was going to do that as an alternative to using the @nuclide even though they are technically variables -- thanks!