flydev

Bootstrap 4 Minimal site profile

23 posts in this topic

Bootstrap-4 Minimal site profile for ProcessWire

This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.0.0-alpha.2.

The precompiled version can be downloaded at github.

 

  Features

  • Bootstrap SASS
  • Font-Awesome SASS
  • MeanMenu
  • Render / helper functions for :
    • Simple ul navigation
    • Bootstrap Multi-level navbar
    • MeanMenu Responsive menu for mobile device
    • Bootstrap Carousel
    • Bootstrap Cards

  Dependencies

  • jQuery
  • Tether (Tooltips and Popovers)

  Prequisites

 You'll want to install the following on your system before proceeding:

How To Install

  1. Download the zip file at Github or clone directly the repo with git clone and skip the step 2.
  2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder.
  3. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".

  After installation

The last step is to install all assets and dependencies with Bower.

  • Open a terminal in site/templates and execute the following command-line: bower install

  References

  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

Capture.PNGCapture-responsive.PNG

11 people like this

Share this post


Link to post
Share on other sites

It is currently only compatible with the devns branch.  Give me some minutes to make backward compatibilty :-X .

It is now compatible with ProcessWire-2.7.

4 people like this

Share this post


Link to post
Share on other sites

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 people like this

Share this post


Link to post
Share on other sites

@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 people like this

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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 :

  1. goto https://nodejs.org/ ,  download / install NodeJS
  2. install Git (if you're on Windows, be sure to check Run Git from command-prompt)
  3. 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 person likes this

Share this post


Link to post
Share on other sites


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.

Share this post


Link to post
Share on other sites

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 people like this

Share this post


Link to post
Share on other sites

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 people like this

Share this post


Link to post
Share on other sites

@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 people like this

Share this post


Link to post
Share on other sites
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 people like this

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites
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 people like this

Share this post


Link to post
Share on other sites

@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 people like this

Share this post


Link to post
Share on other sites

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 people like this

Share this post


Link to post
Share on other sites

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 people like this

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Capture.PNG

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:

pwbs4.gif

 

 

4 people like this

Share this post


Link to post
Share on other sites

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 person likes this

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Nukro
      Hi Guys
      I am trying to save Pages with the API from the root Folder in a file named refreshIndex.php. The code looks like this:
      $root = "/path/to/root"; include($root . "index.php"); //$doctors = wire('pages')->find("template=doctors"); $jobs = wire('pages')->find("template=jobs"); //$news = wire('pages')->find("template=news"); //$specialities = wire('pages')->find("template=specialities-clinics"); //$events = wire('pages')->find("template=signup-form-formbuilder"); //$dbpages = wire('pages')->find("template=doctors|specialities-clinics|news|signup-form-formbuilder|jobs"); //$allpages = wire('pages')->get(27200)->find(""); foreach ($jobs as $stpage) { $stpage->save(); } Now at the moment I am trying to save Job Pages. They are 2 job pages right now. It saves 1 of them and at the 2 one I get an Error like this:
      Error: Uncaught WirePermissionException: Page '/de/jobs/test-job_ge/' is not currently viewable. in /pathtoroot/wire/modules/PageRender.module:319
      They are both using the same template with the same permissions respectively they are visible (guest user is viewable). And also the languages of the page are all active inside page settings.
       
      Somehow my Hook is responsible for this. The hook is the reason for my Script above. I am trying to update the index field for my site search. The hooks works fine when I am saving the pages from the backend interface, but I can't save all pages from the backend since they are over 1500 pages I need to save.
      $this->addHookBefore('Pages::saveReady', $this, 'hookIndexingBefore'); protected function hookIndexingBefore( HookEvent $event ) { $options = array(); $page = $event->arguments("page"); // abort when true if(!$page->template->hasField("index")) return; if($page->isNew() || $page->isTrash()) return; // save user lang $language = $this->wire("user")->language; // clear index field at the begin $page->index = ''; if($page->is("template=specialities-clinics")){ $options['sender'] = $page->choose_sender_2016->id; } $options['pagename'] = $page->name; foreach($this->wire("languages") as $lang) { $this->wire("user")->language = $lang; // change user lang wire('pages')->setOutputFormatting(true); $content = $page->render($options); wire('pages')->setOutputFormatting(false); if($content){ $startStr = "<!--### start-indexing-area ###-->"; $endStr = "<!--### end-indexing-area ###-->"; preg_match_all('/'.$startStr.'(.*)'.$endStr.'/siU', $content, $matches); $newContent = preg_replace("/<div class='breadcrumb.*'>.*<\/div>/siU", '', $matches[1][0]); $newContent = str_replace('<', ' <', $newContent); $newContent = strip_tags($newContent); $newContent = preg_replace("/\s\s+/", " ", $newContent); } $page->index .= $newContent; } $this->wire("user")->language = $language; // restore user language }  
    • By microcipcip
      How do you access ProcessWire API from an external file? I wrote a class and I need to use the API from there...my php file is in templates/includes/file.php
      <?php namespace ProcessWire; include_once('../../../index.php'); class myClass { private function ($query){ return $sanitizer->selectorValue($query); } } I get this error: Call to a member function selectorValue() on a non-object
    • By phil_s
      What are your experiences with profile/color consistency when using Image Magick for resizing?
      I know @horst is probably the person with the most experience on this, (hope you can chime in here Horst)
      Problem:
      I noticed that In some cases Image Magic resized jpgs appear darker than the original, and after some digging it appears to involve various factors concering both the image preparation (Photoshop's save for web and even general profile handling before that) and the way the Image Magic resizing process is setup.
      - Images with an embedded (srgb) profile that were exported via Photoshop's "save for web" function with "convert to srgb" and "embed profile" ON, somehow result in muted colors and a darker image, (actually it looks very much like when you would assign an srgb profile to an image that was already converted to srgb before, not dramatic, but quite noticeable with e.g. reds and cyans.)

      - I tried multiple variations, with embedded and excluded srgb profile, "convert to srgb" on and off, but the result appears to be the same darker, muted image. Need to find time to do more structured testing though..
      Possible causes:
      - The way the srgb profile is embedded in the jpg
      - The way the Imagick module detects/ignores profiles
      - Colorspace handling changes between imagick versions
      - One of the above plus these rather involved technical reccomendations (tldr: convert to linear RGB, resize, convert back)
      http://www.4p8.com/eric.brasseur/gamma.html#ImageMagick
      http://www.imagemagick.org/Usage/resize/#resize_colorspace

      Would be nice to get a discussion going here. I am out of my league with this, technical knowledge wise but I'll try to keep up
      Cheers guys,
      Phil
    • By ceberlin

      A new band website for the German electronic avant-garde band DEINE LAKAIEN.
      The idea was to make this an introduction website for media and new listeners. For in-depth information, the website is accompanied by another new ProcessWire website (with an integrated xenforo forum) for the fanclub: colour-ize.com. and the label website chrom.de. All three websites use the same UI and re-occurring elements (while preserving a unique look), so people find their way around easily.
      Design/programming details:
      It was tried to make the dark look (which is the band CI) feeling modern and artistic (avoiding a Nineties look which so many dark themed websites have).
      The website is built in my spare time in 5 weeks thanks to the ease of ProcessWire 3 and is fully responsive (using uikit and Hype). ProcessWire's new language features were more than welcome to make language management a breeze (People coming from WordPress know what I mean).
      The backend is build in a way that non-techies (band, volunteer translators, fanclub, booking) can handle the CMS without needing much support and knowledge of SEO. Everything is explained or almost self-explanatory. And the complex internal link-building is done either fully automatic or half automatic. 
    • By Rudy
      Hi all,
      I am new to ProcessWire module development. Just recently getting back to using PW again after a couple of years away from it. 
      I was looking for a SASS/SCSS/Compass pre-processor module for PW and couldn't find any. The closest I could find was AllInOneMinify but it doesn't do SASS/SCSS.
      I decided to make this module (with heavy inspiration from AOIM). This is a pretty basic module that takes one or more sass/scss/compass file(s) and compile them automatically in your template.
      Github link
      https://github.com/lesaff/ProcessWire-Sassify
      I really appreciate any comments, suggestions, bug fixes, etc. Hopefully this is the first of many modules.
      Thanks
      Rudy
      Note: Added to Modules directory, under http://modules.processwire.com/modules/sassify/