Semantic UI + Mantra

[dgroch]

@arunoda how I pull in a CSS framework like Semantic UI?

[tomitrescak]

Well, you either use a meteor package as usual, or you can use the Npm version and you manually import it. You can either import the whole framework by importing the distributed css and js file. Or you manually import all the parts that you are interested in (button, accordion ...). Then, according to Mantra spec, you make it part of your context, which gets injected to your components. Do you need an example?

[dgroch]

If it isn't too much hassle @tomitrescak an example would be really helpful - thank you!

[arunoda]

Hmm. I don't think it would be that hard. You don't need to do it via context. There will be few ways you can do it.

Option 1 - Use CSS Simply add semantic ui to your project (either as a Meteor package or just dropping the CSS to any component directory) Then simply right classes directly on components.

CSS is related to UI components. So, all should be go there.

Option 2 - Use react-semantic-ui

• Then use this: https://www.npmjs.com/package/react-semantic-ui
• You can import different elements and use them.

[tomitrescak]

The React project is no longer maintained :/

The option I was suggesting is cleaner, as you reall import only the things you care about and do not bloat the build. It's slightly more complicated than dropping the whole thing into Meteor (meteor package semantic:ui kind of does it similar). It works in a following way:

In a project directory run:

npm install semantic-ui-css

Then, create a file, for example "semantic-imports.js" and import it in your clients index.js file as

import 'semantic-imports.js'

The contents of semantic-imports.js file can be following:

import 'semantic-ui-css/components/site.css';
import 'semantic-ui-css/components/site.js';

import 'semantic-ui-css/components/accordion.css'
import 'semantic-ui-css/components/api.js'
import 'semantic-ui-css/components/breadcrumb.css';
import 'semantic-ui-css/components/button.css'
import 'semantic-ui-css/components/checkbox.js';
import 'semantic-ui-css/components/checkbox.css';
import 'semantic-ui-css/components/container.css';
import 'semantic-ui-css/components/dimmer.css';
import 'semantic-ui-css/components/dimmer.js';
import 'semantic-ui-css/components/divider.css';
import 'semantic-ui-css/components/dropdown.css';
import 'semantic-ui-css/components/dropdown.js';
...

[dgroch]

Thanks so much @tomitrescak I really appreciate it.

[purplecones]

The semantic:ui package allowed me to specify different globals for semantic ui via the site.variables.import.less file. For example, setting the grid system from 16 to 12 columns, change color defaults, etc. How would that work with the above method?