Adding a library without less files

sage
1

If I want to use styles which come with a bower component which does not have any less files, what’s “the roots way” to include this css? An example is select2 - https://select2.github.io/

I’m adding the js file to my jsfilelist in gruntfile.js but do I need a new section for plain css files? Or should I just enqueue the styles via Wordpress using wp_enqueue_styles()?

2

I recently added Select2 to a project too and I ended up creating a assets/less/components/_select2.less file where I simply pasted in the project’s compiled CSS (had to add that file to main.less too). The only thing I had to change were the URLs to the graphic assets (although in the end I may ultimately remove them in favor of using Bootstrap’s Glyphicons). I may also “LESSify” the CSS. I’ll bump this thread if I end up doing that.

There really is no good reason to enqueue the styles.

Many popular projects ultimately move from strictly compiled CSS assets and will eventually add SASS/LESS components, but until they do this is the best way to ensure your components are styled correctly.

1 Like
3

Created a quick LESS Gist: https://gist.github.com/CFXd/6eff7fd965086dcb1bcd

That is by no means thorough. It covers basic select boxes only, drop up or down, and I used Bootstrap LESS variables where possible.

4

cool, thanks. Will definitely try that out :slight_smile:

5

@cfx I’m using gravity forms and they suggest enqueing any additional js in the theme’s header.

http://www.gravityhelp.com/documentation/page/Gform_enqueue_scripts

How are you including your JS which binds select2 to the select boxes? Just adding via grunt? I’m wondering if adding everything to scripts.js is inefficient as I dont need select2 on every page. But if select2 is in scripts.js then anything else I add needs to be included afterwards which doesn’t fit in with the “gravity forms way” (and probably lots of other plugins)

EDIT - just realised gravity forms also has this option http://www.gravityhelp.com/documentation/page/Gform_init_scripts_footer

6

How are you including your JS which binds select2 to the select boxes? Just adding via grunt?

Yes.

I’m wondering if adding everything to scripts.js is inefficient as I dont need select2 on every page.

You should be able to do a quick size comparison with and without select2. Personally I tend to add most scripts to Grunt but it’s up to you.

But if select2 is in scripts.js then anything else I add needs to be included afterwards which doesn’t fit in with the “gravity forms way” (and probably lots of other plugins)

I’m not clear on what you mean by anything else I add needs to be included afterwards. What is the “anything else” you’re referring to? jsFileList gets concatenated and uglified in the order of that array so just ensure you add select2 before the final array element which contains your custom scripts.

FWIW: I routinely add add_filter('gform_init_scripts_footer', '__return_true'); to my projects that use Gravity Forms. The current beta is a little problematic with the new placeholder scripts but overall GF tends to behave reasonably well.