Jump to content

Bootstrap 4 Minimal site profile


Recommended Posts

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?

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

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!

Link to comment
Share on other sites

  • 2 months later...
  • 2 years later...

@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

 

  • Like 1
Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

@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!') })\"",

 

  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...