How to use Semantic UI with your existing Meteor Project? [closed]

Question

I currently have a simple tutorial Meteor.js project running. How would I be able to skin this app using Semantic-UI? On their website they have html source code for individual forms and buttons, etc. I tried copying and pasting that into my own meteor project html file, but the entire application crashed and reported "Bad HTML formatting".

How can I resolve this situation and/or how do I easily skin my meteor project with Semantic-UI?

Answer 1

Install via Atmosphere

Install the Semantic UI package from atmosphere:

meteor add semantic:ui

Install the LESS AutoPrefixer

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

meteor add semantic:ui flemay:less-autoprefixer

Create a custom.semantic.json file 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 unnecesssarily.

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 at https://github.com/Semantic-Org/Semantic-UI-Meteor.

FYI: You may view these instructions in their context of origin on the SemanticUI Integrations page at http://semantic-ui.com/introduction/integrations.html#meteor

Or Better Yet, THIS: https://github.com/Semantic-Org/Semantic-UI-Meteor/blob/master/README.md