Bootstrap 4 Minimal site profile

[szabesz]

Hi,

1 hour ago, cyberderf said:

How can I install this bootstrap profile over it?

The short answer is that you can't. The long one is that ProcessWire site profiles are not like themes you can just simply replace. You need to refactor your current template files. Or am I misunderstanding your question perhaps?

[Mikel]

I just had a look at the template files: What’s the point in the numerous „row“ and included „class=‚col-xs-12‘“-Containers in the template files? They can be skipped altogether.

Also the duplicating of the navigation for displaying a mobile navigation is not really state-of-the-art... bootstrap provides a mobile nav solution right out of the box...

Keep it simple! Cheers!

[theo]

Bootstrap 4 is in beta now and there are some differences.

Most important: It uses Popper.js instead of Tether.js

https://medium.com/@lukaszholeczek/how-to-upgrade-bootstrap-4-alpha-6-to-bootstrap-4-beta-d43b4210f2a3

Just for information.

[flydev 👊🏻]

Yes, thanks. 

@rafaoski added a site profile using Bootstrap 4 updated there : 

 

[howdytom]

@flydev 👊🏻 Is pwbs4 minimal profile still compatible with PW 3.0.148? I would love to test Bootstrap4 Carousel in PW. I am getting Syntax error on a fresh PW installation.

SQLSTATE[42000]: Syntax error or access violation: 1067 Invalid default value for 'created'
SQLSTATE[42000]: Syntax error or access violation: 1067 Invalid default value for 'created'
SQLSTATE[42S02]: Base table or view not found: 1146 Table 'pw-bootstrap4minimal.modules' doesn't exist

 

[flydev 👊🏻]

@howdytom Wow it's been a while a didn't tested it. Let me check.

[flydev 👊🏻]

@howdytom The profile didn't work - thanks you, I'll try to fix it in the couple of hours.

[howdytom]

@flydev 👊🏻 Wow. This is fantastic. It would be really great to check out your bootstrap4 PW implementation. 

Take your time. No need to hurry. Merci

[flydev 👊🏻]

On 1/8/2020 at 7:27 PM, howdytom said:

Take your time. No need to hurry. Merci

I checked it and I need to rebuild the profile - I will update Bootstrap to the latest version at the same time as this profile was shipped with the beta version. Stay tuned.

[howdytom]

I really appreciate your effort and time you put in this.

[flydev 👊🏻]

Finally, I rebuilt the profile and updated it to the latest version of Bootstrap 4.4.1. I Also updated the bsRender* helpers functions, removed the Bower dependency and added the possibility (as example) to minify and bundle assets for releasing the website in production.

With $config->debug set to true, you will want to work with asset files in site/assets/dev/src, and when ready, you will launch a terminal in this same directory and type yarn build to minify, concat and bundle assets, then set $config->debug to false to see the website with the assets minified.

[dragan]

@flydev 👊🏻 Thanks for that PW Bootstrap profile.

I get errors with yarn build though:

Spoiler

D:\laragon\www\pwbs\site\assets\dev>yarn build
yarn run v1.21.1
$ yarn build-css && yarn build-js && yarn bundle && copyfiles --flat ./build/js/bundle.min.js ../static/js/ && copyfiles --flat ./css-dist/styles.min.css ../static/css/ && copy
files --flat ./src/css/main.css ../static/css/
$ sass ./src/sass/styles.scss src/css/styles.css && css-minify --dir ./src/css
D:\laragon\www\pwbs\site\assets\dev\css-dist\main.min.css 生成成功!
D:\laragon\www\pwbs\site\assets\dev\css-dist\styles.min.css 生成成功!
$ uglifyjs ./src/js/scripts.js -c -m -o ./build/js/scripts.min.js
internal/fs/utils.js:220
    throw err;
    ^

Error: ENOENT: no such file or directory, open './build/js/scripts.min.js'
    at Object.openSync (fs.js:440:3)
    at Object.writeFileSync (fs.js:1265:35)
    at run (D:\laragon\www\pwbs\site\assets\dev\node_modules\uglify-js\bin\uglifyjs:286:12)
    at Object.<anonymous> (D:\laragon\www\pwbs\site\assets\dev\node_modules\uglify-js\bin\uglifyjs:172:5)
    at Module._compile (internal/modules/cjs/loader.js:959:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11 {
  errno: -4058,
  syscall: 'open',
  code: 'ENOENT',
  path: './build/js/scripts.min.js'
}
error Command failed with exit code 1.

 

I don't see a build folder anywhere. Where is that supposed to be? Is that the static folder?

Also, in package.json, what are these hard-coded paths?

Spoiler

"rename": "node -e \"require('fs').rename('/www/sites/pwbs4/wwwroot/site/assets/dev/build/js/jquery.min.js', './build/js/1-jquery.min.js', function(err) { if (err) console.log(err); console.log('jQuery File renamed!') })\"",

 

[flydev 👊🏻]

thanks @dragan just pushed a fix - sorry for the mistake.

[howdytom]

@flydev 👊🏻 Fantastic. Thank you so much. This is helping a lot.

[kalimati]

On 6/17/2016 at 5:55 PM, flydev 👊🏻 said:

@pwired :   I will send an email to @kongondo about processwireshop.pw! Thanks for suggesting that.

----

A small trick to make the navbar/dropdown working on mouseover instead of click event:

In js/script.js add :

$(document).ready(function(){
    $('ul.nav li.dropdown').hover(function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeIn(200);
    }, function() {
        $(this).find('.dropdown-menu').first().stop(true, true).delay(200).fadeOut(200);
    });
});

This works on the first level of dropdowns but not with the second levels. In fact, even a click does not open level two of dropdowns. Any ideas what can be done. Thanks.