Hi,

I'm learning wordpress theme development using understrap (Wordpress boilerplate).

https://github.com/understrap/understrap

User's custom js code goes to src/js/custom-javascript.js

It uses gulp to compile css/js.

I don't know know much (really anything) about webpack/babel etc in terms of configuring them. 

What steps are needed so I can use es6 in this custom-javascript file and it would be transpiled to traditional js. I don't understand what most of the things in gulpfile do.

 

Please help.

You would need to add something like https://www.npmjs.com/package/gulp-babel to the production build script. You don't want it running on every save, only when you're ready to build for production, alongside minifiying scripts etc.

It would probably be better to raise the issue on Github so that the author can build it in properly.

Is there a reason why you are using underscore to learn how to build Wordpress themes? There are far simpler ways to do this. Wordpress itself has a great starter theme and tutorial.

11 hours ago, Jack said:

You would need to add something like https://www.npmjs.com/package/gulp-babel to the production build script. You don't want it running on every save, only when you're ready to build for production, alongside minifiying scripts etc.

It would probably be better to raise the issue on Github so that the author can build it in properly.

 

I have raised the issue - but was told that es6 is beyond the scope of the project so unfortunately I'm on my own. I don't suppose anyone is bored enough to modify the underscores setup to enable es6?:)

I did try to combine existing webpack/babel tutorials with the existing setup but as I don't have a clue how the pieces all fit in together

10 hours ago, fisicx said:

Is there a reason why you are using underscore to learn how to build Wordpress themes? There are far simpler ways to do this. Wordpress itself has a great starter theme and tutorial.

It's just underscore has integrated Bootstrap 4. 

9 hours ago, portia79 said:

It's just underscore has integrated Bootstrap 4. 

And?

Why do you think you need bootstrap 4? Things are moving on and bootstrap is getting left behind. You don't need bootstrap to build really great websites.

12 minutes ago, fisicx said:

And?

Why do you think you need bootstrap 4? Things are moving on and bootstrap is getting left behind. You don't need bootstrap to build really great websites.

What would you recommend instead of bootstrap 4? You are right - things are moving quickly but unfortunately I don't have time to follow/learn the latest technologies in all aspects. Bootstrap does the majority of work for me. Besides the latest trends/fads do not always mean the best, do they?:)

The trend is towards a mobile first layout. Bootstrap starts with a desktop layout and adapts for smaller screens. Keep your layouts simple and you don't need to use grids. And simple layouts are often far more effective.

If you need a grid, just use display:grid or flexbox. Both are far more efficient than bootstrap.

 

 

Ok. I did some reading about CSS Grid and scrapped Bootstrap/understrap.

Now what (tutorial or code) would you recommend for responsive horizontal navigation menu. Most tutorials I have come across are quite dated, which might indicate unnecessarily complex code.

 

Thanks

Just make the font size smaller as the screen size decreases. You can also make the menu bar sticky so it stays at the top of the screen. If you really feel you need to hide the menu (which isn't always a good UX) there are lots of ways to do this. This is one of the more simple methods: https://jsfiddle.net/1fg4qkx5/2/

I've been doing some testing on menus and have discovered I get better interactions if the menu is always visible. This is particularly useful if your menu contains key links to other parts of the site. An alternative is to make sure you have prominent link buttons in the content.