TSM Theme for MDCSS

This serves as a slightly branded theme for style guides built with mdcss.

Setup

To setup a style guide in a project, first install both mdcss and this style guide theme, mdcss-theme-tsm:

npm install mdcss @subjectmatter/mdcss-theme-tsm --save

Now that everything is installed, you'll need to set up a gulp task to build your style guide. Details on how to do so can be found here in the MDCSS documentation. Here is a sample:

import gulp from 'gulp'
import sass from 'gulp-sass'
import postcss from 'gulp-postcss'

gulp.task('styles', () => {
  return gulp.src('src/sass/style.scss')
    .pipe( sass().on('error', sass.logError) )
    .pipe( postcss([
      require('mdcss')({
        theme: require('@subjectmatter/mdcss-theme-tsm')
      })
    ]))
    .pipe( gulp.dest('./') )
})

Now, running gulp styles from the command line will generate your style guide, by default, in a styleguide/ directory at the root level of your project.

The best practice is to develop the style guide in isolation. When doing so, it's helpful to have a watcht task that will reload the style guide using browserync. A sample task for that would look like this:

import gulp         from 'gulp'
import browserSync  from 'browser-sync'

/*
 * A task for rebuilding your stylesheet when any scss files change
 */
gulp.task('styles', () => {
  return gulp.src('src/sass/style.scss')
    .pipe( sass().on('error', sass.logError) )
    .pipe( postcss([
      require('mdcss')({
        theme: require('@subjectmatter/mdcss-theme-tsm')
      })
    ]))
    .pipe( gulp.dest('./') )
})

/*
 * A task for moving the updates style.css into your styleguide
 */
gulp.task('styleguide', () => {
  return gulp.src('style.css')
    .pipe(gulp.dest('./styleguide'))
})

/*
 * Finally, a task to watch your styleguide for changes, serve it on 
 * localhost:4000 and reload it whenever it gets updated
 */
gulp.task('watch:styleguide', () => {

  browserSync.create().init({
    notify: true,
    port: 4000,
    ui: {
      port: 4001
    },
    server: 'styleguide',
    files: [
      'styleguide/index.html',
      'styleguide/style.css'
    ],
    open: false
  })

  gulp.watch('src/sass/**/*', ['styles'])

})

Further Reading

• MDCSS Options
• Documenting your CSS with MDCSS
• A sample theme