Customize semantic-ui using Bower and Grunt

Question

My project uses Bower to install deps and Grunt to build. My project tree looks like this

|
|-bower_components
|                |
|                |-jquery
|                |-semantic
|                |-...
|-Bower.json
|-Gruntfile.js
|-public
|      |
|      |-css // Compiled, concatenated and minified semantic-ui
|      |-js  // and other libs should be here
|-...
|-etc..

1. Is it possible to build custom semantic-ui (ie customize fonts, colors, remove unused components) using Grunt (or maybe using Gulp called from Grunt)?

2. Where to place semantic theme config and overrides files?

Answer 1

It's not difficulty to use grunt to build semantic-ui. I don't know about bower, but this is how I did it.

Install grunt-contrib-less.

Create a new directory somewhere in your project, e.g. '/less/semantic'. Copy 'site' directory from your semantic packagea, i.e. 'bower_components/semantic/src/site' to the new directory. All your overrides will be done here.

Create a config.json file in '/less/semantic' to configure what components you want to be included in your build. The file content will be something like this:

{
    "elements": ["button", "divider"],
    "collections": ["form"],
    "modules": ["checkbox"]
} 

Add following to your gruntFile.js file:

var fs = require('fs');

// Defines files property for less task
var getSemanticFiles = function() {
  var files = {};
  var config = JSON.parse(fs.readFileSync('less/semantic/config.json'));
  var srcDir = 'bower_components/semantic/definitions/'; 
  var outputDir = 'less/semantic/output/'; 

  for (var type in config) {
      config[type].forEach(function(ele) {
          files[outputDir + type + '.' + ele + '.output'] = [srcDir + type + '/' + ele + '.less'];
      });
  }
  return files;
};

Configure less task as following:

less: {
    semantic: {
        options: { compile: true }
        files: getSemanticFiels()
    },
    dist: {
        options: { compile: true }
        files: { 'public/css/semantic.css': ['less/semantic/output/*'] }
    }
}

Edit theme.config in 'bower_components/semantic/src', change @siteFoler to '../../../less/site/', and make any additional changes as needed per semantic document.

You run grunt less:semantic to compile all needed components, and then run less:dist to put them into a single css file.

Of course you can configure a watch task to automate the process. Then every time you make a change, the css will be automaticly re-built.

Answer 2

I am sure someone will build a grunt build to semantic one day, but for now, I just use this to call all the gulp commands using grunt. https://github.com/sindresorhus/grunt-shell. Just make sure you are calling the gulp build task and not the default gulp task. It has a watch task that will cause grunt to not finish the shell task.