flydev 👊🏻 Posted June 16, 2016 Share Posted June 16, 2016 (edited) Bootstrap-4 Minimal site profile for ProcessWire This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1 Features Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle Dependencies jQuery Popper.js Bootstrap FontAwesome Prequisites You'll want to install the following on your system before proceeding: Yarn / NPM How To Install Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile". After installation You can find the development file (CSS/SCSS/JS) in site/assets/dev/src The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager. Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands : Rebuild, minify and bundle assets for release : yarn build References Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts Credits The ProcessWire staff Inspiration from @gebeer and his Bootstrap 3 profile post Members who contributed in various post about Bootstrap navigation and code (see code-source for refs). Screenshots Edited January 12, 2020 by flydev 👊🏻 New version - 2.0.0 12 Link to comment Share on other sites More sharing options...
pwired Posted June 17, 2016 Share Posted June 17, 2016 Is this profile compatible with Processwire 2.7 ? Link to comment Share on other sites More sharing options...
flydev 👊🏻 Posted June 17, 2016 Author Share Posted June 17, 2016 It is currently only compatible with the devns branch. Give me some minutes to make backward compatibilty . It is now compatible with ProcessWire-2.7. 4 Link to comment Share on other sites More sharing options...
pwired Posted June 17, 2016 Share Posted June 17, 2016 Thanks for doing this and will start working with this one this week-end. Really excited about it if this one can release me from using Pocketgrid all the time. Did you know that there is a thread about templates for Processwire ? https://processwire.com/talk/topic/12892-processwire-marketplace/ This bootstrap profile could be a very good one to start with. 2 Link to comment Share on other sites More sharing options...
flydev 👊🏻 Posted June 17, 2016 Author Share Posted June 17, 2016 @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); }); }); 2 Link to comment Share on other sites More sharing options...
pwired Posted June 17, 2016 Share Posted June 17, 2016 Is there anything that has to be compiled before using this template ? For example until now I only use plane css and not sass also never used "bower-install" Maybe there is a pre-compiled version ? Link to comment Share on other sites More sharing options...
flydev 👊🏻 Posted June 17, 2016 Author Share Posted June 17, 2016 In the current state of the profile, Bootstrap is already precompiled in css/styles.css; You can also find in the folder css a file called main.css where you can override all values and use it as pure css - without the need of using sass and associated tools - but at this point you still need Bower. Bower is used to manage assets like font-awesome and a dependency like tether in our case. With this tool we can manage libs easily and we can avoid repeating tasks. It is really easy to install and do not require any knowledge for the task we accomplish here. If you want to get started with, check the following instructions : goto https://nodejs.org/ , download / install NodeJS install Git (if you're on Windows, be sure to check Run Git from command-prompt) open a terminal and type npm install -g bower done. You can now execute the bower install command-line. Anyway, if its really required, I can make tonight a profile with precompiled files so you can test it this week-end . Just let me know. 1 Link to comment Share on other sites More sharing options...
pwired Posted June 17, 2016 Share Posted June 17, 2016 Hi @flydev, Thanks for stepping in on this. I am not yet familiar with node and git and use processwire with plane php, api, css and pocketgrid. So Yes I would appreciate it for making a profile with precompiled files to enable me start using your template. Thanks in advance. Link to comment Share on other sites More sharing options...
flydev 👊🏻 Posted June 18, 2016 Author Share Posted June 18, 2016 I made a precompiled edition, here you go : https://github.com/flydev-fr/site-pwbs4/archive/precompiled.zip The installation process is the same, but no command-line or external tools required. 7 Link to comment Share on other sites More sharing options...
cstevensjr Posted June 18, 2016 Share Posted June 18, 2016 32 minutes ago, flydev said: A made a precompiled edition, here you go : https://github.com/flydev-fr/site-pwbs4/archive/precompiled.zip The installation process is the same, but no command-line or external tools required. A personal thanks for providing this version. 5 Link to comment Share on other sites More sharing options...
pwired Posted June 18, 2016 Share Posted June 18, 2016 I have setup an online test server and uploaded/installed the pre-compiled profile (template) inside a processwire 2.7.2 setup. It looks everything is working well and also nicely responsive. I find this great. I am going to have a look in the back and front end and see how I can change it into some website and learn bootstrap and tether. You can see the online setup here: http://dev9.pe.hu 3 Link to comment Share on other sites More sharing options...
flydev 👊🏻 Posted June 18, 2016 Author Share Posted June 18, 2016 Thanks you for trying this profile. I just pushed an update to the css for the responsive menu. Just remove the following code in main.css. Spoiler /* meanmenu adjustment (see body: line-height) */ .mean-nav ul li { line-height: 24px; } .mean-container .mean-nav ul li a.mean-expand { height: 24px; } 3 Link to comment Share on other sites More sharing options...
gebeer Posted June 30, 2016 Share Posted June 30, 2016 @flydev Thanks a lot for putting this together. I was only waiting for BS4 to reach beta state before I will update my site-pwbs profile. Now I don't need to spend the time on it myself, which is great @pwired @cstevensjr I can only recommend to preprocess yourself and encourage you to look into node, compass, bower etc. It really is worth the effort and gives you so much more flexibility. With the precompiled version of this profile, you need to override a lot of stuff in your own CSS and this will bloat your code. 3 Link to comment Share on other sites More sharing options...
cstevensjr Posted June 30, 2016 Share Posted June 30, 2016 9 minutes ago, gebeer said:v @pwired @cstevensjr I can only recommend to preprocess yourself and encourage you to look into node, compass, bower etc. It really is worth the effort and gives you so much more flexibility. With the precompiled version of this profile, you need to override a lot of stuff in your own CSS and this will bloat your code. While I agree with you that one needs to expand their horizons, we also need to understand that not everyone uses the latest technology. We should strive to make these profiles accessible to everyone, no matter their knowledge/skill level. My push will always be about accessibility to technology by all. I firmly believe that's how things will spread. 3 Link to comment Share on other sites More sharing options...
gebeer Posted June 30, 2016 Share Posted June 30, 2016 @cstevensjr I partly agree with you. And again thanks to @flydev for providing the precompiled version. But in a way this defeats the purpose of a sass based site profile. Link to comment Share on other sites More sharing options...
cstevensjr Posted June 30, 2016 Share Posted June 30, 2016 Just now, gebeer said: @cstevensjr I partly agree with you. And again thanks to @flydev for providing the precompiled version. But in a way this defeats the purpose of a sass based site profile. You seem to be stuck on sass and I am talking about having PW profiles that a basic beginner (who may or may not know anything about sass) can utilize. We are coming together from two totally different planes. Yes, I believe it was fantastic and a good trend that @flydev augmented the profiles by including the precompiled version. It should be a great learning tool for all. 4 Link to comment Share on other sites More sharing options...
gebeer Posted June 30, 2016 Share Posted June 30, 2016 @cstevensjr Got your point and totally agree with what you're saying. I didn't mean to force anybody into using preprocessors. Just wanted to encourage people to start looking into it because it really can make live easier... 4 Link to comment Share on other sites More sharing options...
kibod Posted July 11, 2016 Share Posted July 11, 2016 Thank you Flydev. I've spent several days looking for proper solution to the PW BS3 dropdown menu issue. And then today I've found this. This profile will be my based from now onward. So far it works good, looking forward to build something great out of this. Once again TQVM. 4 Link to comment Share on other sites More sharing options...
flydev 👊🏻 Posted July 11, 2016 Author Share Posted July 11, 2016 Hi @kibod , glad you like it and choose it as project starter. And yes in this profile you can have the first parent as menu, clickable. 3 Link to comment Share on other sites More sharing options...
MaryMatlow Posted February 17, 2017 Share Posted February 17, 2017 Hi @flydev, I plan to use your profile for my next project. I've installed it and it works fine. The carousel however just has only images and no corresponding heading and links, for that would really make the carousel experience complete. Is there a way to add heading and link to the images? Thanks. Link to comment Share on other sites More sharing options...
flydev 👊🏻 Posted February 18, 2017 Author Share Posted February 18, 2017 Hi @MaryMatlow 15 hours ago, MaryMatlow said: I've installed it and it works fine. Can you please tell me the version of ProcessWire ? 15 hours ago, MaryMatlow said: Is there a way to add heading and link to the images? Yes, you have to copy and/or modify the function bsRenderCarousel(); For instance, you could use a repeater to pass datas to the function. Let's say we create a repeater with the three following fields: image_carousel, heading, heading_description and insert the repeater with the name 'carousel' in the home template. In _func.php, add this function : Spoiler function bsRenderCarouselFromArray(array $datas) { $cnt = count($datas['images']); $id = $datas['images'][0]->get('page').$datas['images'][0]->get('field')->id; $out = "<div id='carousel-{$id}' class='carousel slide' data-ride='carousel'> <ol class='carousel-indicators hidden-sm-down'>"; $i = 0; foreach($datas as $image) { $class = ($i == 0) ? "active" : ""; $out .= "<li data-target='#carousel-{$id}' data-slide-to='{$i}' class='{$class}'></li>"; $i++; if($i >= $cnt) break; } $out .= "</ol> <div class='carousel-inner' role='listbox'>"; $i = 0; foreach($datas as $data) { $class = ($i == 0) ? "active" : ""; $out .= "<div class='carousel-item $class'> <img src='{$datas['images'][$i]->url}' alt='{$datas['images'][$i]->description}' height='{$datas['images'][$i]->height}' width='{$datas['images'][$i]->width}'> <div class='carousel-caption'> <h3>{$datas['headings'][$i]}</h3> <p>{$datas['description'][$i]}</p> </div> </div>"; $i++; if($i >= $cnt) break; } $out .= "</div>"; $out .= "<a class='left carousel-control' href='#carousel-{$id}' role='button' data-slide='prev'> <span class='icon-prev' aria-hidden='true'></span> <span class='sr-only'>Previous</span> </a> <a class='right carousel-control' href='#carousel-{$id}' role='button' data-slide='next'> <span class='icon-next fa fa-chevron-right ' aria-hidden='true'></span> <span class='sr-only'>Next</span> </a> </div>"; return $out; } a bit hacky but eh... Then in the home template, make the array and call the new function with the new array as parameter : // render the carousel //$content .= bsRenderCarousel($page->images); foreach ($page->carousel as $key => $value) { $datas['images'][] = $value->carousel_image; $datas['headings'][] = $value->heading; $datas['description'][] = $value->heading_description; } $content .= bsRenderCarouselFromArray($datas); Result: 4 Link to comment Share on other sites More sharing options...
MaryMatlow Posted February 18, 2017 Share Posted February 18, 2017 @flydev That's awesome. I'll try it out and report back. The Processwire version I'm using is 3.0.42. Thanks a ton. 1 Link to comment Share on other sites More sharing options...
MaryMatlow Posted February 19, 2017 Share Posted February 19, 2017 Hi @flydev, It works like a charm . Thank you, thank you. The only other thing i needed was a link/button to link the slide to another page/post. I'll try to do that myself first. If I get stuck will ask for your help. Thank you very much. 1 Link to comment Share on other sites More sharing options...
MaryMatlow Posted February 21, 2017 Share Posted February 21, 2017 Just to let you know that I was able to add links to the slides. Thank you for your help. 1 Link to comment Share on other sites More sharing options...
cyberderf Posted July 26, 2017 Share Posted July 26, 2017 Hi all! I have ProcessWire 3.0.42 installed with a lot of content. How can I install this bootstrap profile over it? Cheers Fred Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now