Integrations

Install via Atmosphere

Install the Semantic UI package from atmosphere.

meteor add semantic:ui

The next step will differ depending on what version of Meteor you are running. Continue to the section relevant to your version of Meteor.

(Meteor <1.3) Install less-autoprefixer package

You will need a special package less-autoprefixer, to add vendor prefixes to your LESS pipeline.

meteor add flemay:less-autoprefixer

Continue to the "Create a custom.semantic.json file" section

(Meteor 1.3+) Install less and postcss packages

Remove the standard-minifier-css package.

meteor remove standard-minifier-css

Install the less and postcss packages.

meteor add less juliancwirko:postcss

To configure the postcss package, add the following to your package.json file and save it.

{
  "devDependencies": {
    "autoprefixer": "^6.3.1"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }
}

To finish setting up the postcss package, install the new autoprefixer NPM package.

meteor npm install

Create a custom.semantic.json file

With meteor stopped:

touch client/lib/semantic-ui/custom.semantic.json

custom.semantic.json is a special file used to determine which themes and components to include in your project's build.

To remove a component from the pipeline, simply set the boolean value to false

{
"definitions": {
  "accordion" : true,
  "ad"        : true,
  "api"       : true,
  /* etc */
},
"themes": {
  "amazon"     : false,
  "basic"      : false,
  "bookish"    : false,
  "bootstrap3" : false,
  "chubby"     : false,
  "classic"    : false,
  "default"    : true,
  /* etc */
}

Start Meteor / Generate

Every time Meteor starts or refreshes it calls the package semantic:ui to generate Semantic UI.

The package has a uses the diff between custom.semantic.json and .custom.semantic.json to avoid regenerating files unnecessarily.

If the file .custom.semantic.json does not exist or it is different than custom.semantic.json then it will generate Semantic UI.

Customize Site Variables

Semantic UI meteor includes a site theme, site/ which can be used to customize less variables for your site. These files are optional, and can safely be removed if customization is not necessary.

Visit our theming guide to learn more about theming.

Issues & Debugging

For help with Semantic UI Meteor, and for the latest updates, please visit the repository home on GitHub