Semantic-UI-LESS icon indicating copy to clipboard operation
Semantic-UI-LESS copied to clipboard

How to use included javascript?

Open JamieWritesCode opened this issue 9 years ago • 3 comments

Hi, sorry if this is a dumb question, but I'm struggling to find any documentation that helps. I'm using gulp to build from semantic.less however I'm a little confused about the best way to use the included javascript. Do I just concatenate the files from behaviors, globals and modules? Is there a 'catch all' file like semantic.less? Can I just cherry-pick from the modules that I want to use or do I need to include the behaviors and site.js for proper functionality?

Thanks in advance.

JamieWritesCode avatar Jul 16 '15 00:07 JamieWritesCode

The main repo with build tools is over here

If you are using your own gulp tasks, you can just import the javascript build tasks into your own gulpfile http://semantic-ui.com/introduction/advanced-usage.html#importing-gulp-tasks

var buildJS = require('path/to/semantic/tasks/build/javascript');
gulp.task('build-js', buildJS);

jlukic avatar Jul 16 '15 01:07 jlukic

Thanks @jlukic , I was having an entirely separate issue integrating the existing build tools from the main repo, pushing me to using the less only version in the first place. Too be honest, I think I would prefer working with the less only repo, as I usually have a build pipeline with autoprefixer for my own code setup anyway. However, I've also opened an issue with my problems over on the main repo and maybe you can help me solve that instead. Cheers.

https://github.com/Semantic-Org/Semantic-UI/issues/2648

JamieWritesCode avatar Jul 16 '15 02:07 JamieWritesCode

I've simply imported all .js files from the definitions directory.

For example with Webpack:

//Interface Styles
import 'semantic-ui-less/semantic.less'

//Interface Modules
const importAll = r => { r.keys().forEach(r) }
importAll((require as any).context('semantic-ui-less/definitions/', true, /\.js$/))

VictorLeach96 avatar Mar 05 '17 14:03 VictorLeach96