SC5 / sc5-styleguide

Styleguide generator is a handy little tool that helps you generate good looking styleguides from stylesheets using KSS notation
http://styleguide.sc5.io/
MIT License
1.26k stars 167 forks source link

Styleguide hide some Examples #851

Open gisu opened 8 years ago

gisu commented 8 years ago

I have a curious Issue with displaying Examples in the Styleguide. The Styleguide is static generated, tested with 0.3.39 and 0.3.40 on Node 4.2.0.

Example that works

/*
  Signet

  Short Version of the Logo

  markup:
  <h1 class="signet">
    <svg class="signet__icon">
      <use xlink:href="/assets/img/symbol-sprite.svg#signet"></use>
    </svg>
    <span class="signet__text">DESIGNLOVR</span>
  </h1>

  Styleguide 1.2
*/

The Example with the Signet is fine, show a SVG Fragment.

The Example that not work:

/*
  Page

  Wrapper for the Main Page

  markup:
  <div class="page__circle">hello</div>

  Styleguide 2.2
*/

Is a CSS Circle, 200px height and wide, also red. Inside the Shadow Dom wrap a Div the Example with display:none - dont where it comes. bildschirmfoto 2015-11-29 um 13 26 44

Main Task for Generate the Styleguide:

/**
 * Styleguide Generate
 * @description Read out CSS File for generate the Guide
 */
gulp.task('styleguide:generate', function() {
  return gulp.src(kittn.dist.css + pkg.cssFileName + '.css')
    .pipe(styleguide.generate({
      title: 'Styleguide for: '+pkg.name+' (v.'+pkg.version+')',
      server: false,
      rootPath: 'styleguide/',
      appRoot: 'http://localhost:3000',
      overviewPath: 'readme.md',
      disableHtml5Mode: false,
      disableEncapsulation: false
    }))
    .pipe(styleguide.applyStyles())
    .pipe(gulp.dest('styleguide/'));
});
varya commented 8 years ago

Hey. You should have root sections defined. So, Styleguide 1 must exist if you use Styleguide 1.2. And Styleguide 2 must exist if you want to have Styleguide 2.2 visible. Does this solve your problem?