flydev

Bootstrap 4 Minimal site profile

Recommended Posts

flydev    494

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

  • Like 11

Share this post


Link to post
Share on other sites
flydev    494

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.

  • Like 4

Share this post


Link to post
Share on other sites
pwired    953

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.

  • Like 2

Share this post


Link to post
Share on other sites
flydev    494

@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);
    });
});
  • Like 2

Share this post


Link to post
Share on other sites
pwired    953

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
flydev    494

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.

 

  • Like 1

Share this post


Link to post
Share on other sites
pwired    953


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
pwired    953

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

 

  • Like 3

Share this post


Link to post
Share on other sites
flydev    494

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;
}

 

 

  • Like 3

Share this post


Link to post
Share on other sites
gebeer    621

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

  • Like 3

Share this post


Link to post
Share on other sites
cstevensjr    1,369
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.

  • Like 3

Share this post


Link to post
Share on other sites
cstevensjr    1,369
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.

  • Like 4

Share this post


Link to post
Share on other sites
gebeer    621

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

  • Like 4

Share this post


Link to post
Share on other sites
kibod    4

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.   

  • Like 4

Share this post


Link to post
Share on other sites
flydev    494

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.

  • Like 3

Share this post


Link to post
Share on other sites
MaryMatlow    15

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
flydev    494

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

 

 

  • Like 4

Share this post


Link to post
Share on other sites
MaryMatlow    15

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.

  • Like 1

Share this post


Link to post
Share on other sites
cyberderf    1

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

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 abdus
      While I was reading Smashing Magazine, I discovered this handy tool called XRespond that lets you load webpages in iframes that are designed to simulate different devices, (similar to how browsers' mobile simulators work).
      I think it's quite useful for local development. In fact it works for any website as long as it doesnt have `X-Frame-Options` headers set to `sameorigin`. I highly recommend using it with browser-sync with live loading as well. I use this settings when using it with PHPStorm to live reload my dev site on pw.dev.
      // remember set cwd to /site/templates/ or call it from templates directory path/to/browser-sync.cmd start --proxy pw.dev --port 8080 --files "**/*.php" --files "assets/**/*.css" --files "assets/**/*.css"
      What other tools/utilities do you use for testing your responsive designs?
    • By tpr
      Here's a mixin I put together for creating hamburger icons.
      It utilizes the checkbox hack so you can use CSS only to show a mobile menu (or off-canvas menu, etc).
      Unlike other mixins here you can specify a selector for the label tag if it's not directly below the checkbox, so the label (the icon) can be placed anywhere in the DOM.
      There is also a "hamburger_tint" helper mixin included to easily colorize the icon/text on hover or in a checked state.
      Parameters:
      width: the width of the icon. default: 32px thickness: the thickness of the bars. default: 3px gap: the vertical space between the bars. Overall height is: thickness*3 + gap*2. default: 7px color: the color of the icons. default: #000 (black) radius: border-radius value to round edges. default: 0 anim: seconds of animation duration (transition-duration) or timing function + duration (eg. "ease-out 0.3s"). default:0.25s labelselector: in case the label is not right after the checkbox, use this setting to tell the mixin where to find it. Eg. "~ div.content header nav label". default: "+ label" padding: extra spacing around the icon. default: 0 text: show text next to the icon, by default on the right. Values: "left" or false to disable. Requires an extra "span" tag. default: "right" CodePen demo
      GitHub
    • By erikvanberkum

      I like to showcase my new website acniti on the forum here.
      History
      Building and managing a website is a hobby, over the years, making websites got more complicated and more technologies, knowledge and wisdom are required. I started building my first website around 1997. It started out with a static site built with FrontPage, a WYSIWYG HTML editor. A few years later it was time for the first content management system, I looked at Joomla but settled for MediaWiki. I run those websites for 2 years on the MediaWiki platform and then moved on to WordPress. WordPress was good, it did a good job but over time, it became more complicated to make something out of the box, if it's not a blog, it becomes complicated and to have a feature rich website requires a lot of plugins. Little by little it became less fun and more and more hassle juggling the various plugins.
      In 2014 I became interested in learning PHP programming, I wanted to do this already for many years, but never had enough time to bite the bullet and work my way through the basics. At the end of the courses I though and now what have I learned, how to put this into action? To built modern website with PHP only is difficult, it also requires knowledge of html, MySQL, CSS, java-script etc. I started looking for a framework experimented a little with CakePHP and then came across Processwire via a CMS Critic blog post.
      Development setup
      I developed the acniti website on a Linux Ubuntu 16, with PHP 7 and MySQL as the development server. For the IDE I use PhpStorm, before using Storm I have used and tried some other IDE's such as Zend, Eclipse, Netbeans, Aptana but none of them I liked, some were feature poor, Zend and Eclipse were slow and use a lot of memory. PhpStorm not free but definitely worth the investment. I make use of the free tier Git repository of AWS called CodeCommit, I still use GIT Cola to commit the changes, I could also use PhpStorm for this but I never took the time to change my workflow.
      For project management I am a big fan of Redmine, Redmine is a web-based open-source project management and issue tracking tool. I use this also for my other work so it easily integrates with the website building flow as well. It's easy for maintaining lists of features you want to carry out per version, it supports a wiki which is easy for making notes and keeping a log of the activities. I use it everyday and it runs on Ruby. For images and graphics I switch back to Windows for some Photoshop.
      Processwire
      The acniti website runs on the latest stable Processwire version at the time of writing 3.0.62, the website has 4 languages including an Asian language. The Japanese language URL's are implemented with their 3 alphabets kanji, hiragana, katakana i.e. https://www.acniti.com/ja/インレットフィルタ. Some images on the site have text and image language tags help to select the correct language, the Processwire blog post from 30 June was helpful to get this running.
      The main site has a bootstrap theme, for the mobile version of the site the google AMP specification is implemented. This was really fun to do but challenging at times as the AMP specification is still a little limited. To visit the AMP pages type /amp/ behind any URL like https://www.acniti.com/amp/ for the homepage. The Google webmaster portal is really easy to troubleshoot and check for the correct AMP implementation. Finally structured data according to schema.org is added to the site via the JSON-LD markup.
      The commercial modules ProCache and Formbuilder are installed. The ProCache module is really amazing and makes the website lightning fast. Besides the commercial modules around eleven open-source modules are used, Database Backups, Tracy Debugger, Wire Mail SMTP, Protected Mode, Batcher, Upgrades, PublishAsHidden, URL (Multi-language), Twitter Feed Markup, Email Obfuscation (EMO), Login History, Selector test.
      During development the Processwire forum is really helpful and checked often. The forum is good for two reasons, most of the questions, I had during development of the site, are already on the site. Secondly the only 6 questions I posted over the last 2 years, are quickly and accurately answered. The downside I didn't become a very active member on the forum but see that as a compliment.
      An open issue on the acniti site is the AMP contact form with Formbuilder, the restricted usage of java-script for the AMP specification requires some more in-depth study.
      Hosting setup
      For the hosting services the acniti site uses Amazon EC2, I use AWS already many years to manage my cloud office so it was easy to decide to use it for the web hosting as well. The site is running on a micro instance of EC2 and with the ProCache module CloudFront is serving webpages worldwide fast. Updates from the development server are sent to CodeCommit and from there to the production server. From a site management point of view it would be nice to use AWS RDS to manage the MySQL databases, but from a cost perspective I decide not to do that for now. Via a cron I have set up automatic MySQL backups and these are via another cron job uploaded to AWS S3. To make sure the server is safe, a cron job runs daily snapshots of the server, this is getting initiated via AWS Lambda. Lambda also removes older snapshots because during creation a delete tag is attached for sevens days after their creation. It's important to make a separate MySQL backup as with snapshots the database often gets corrupted and its easier to restore a database backup than to fix a corrupted database. Another nice feature to use AWS Lambda for is a simple HTTP service health checker, which reports to you by email or sms when the website is down.
      Making use of all these Amazon services cost me probably somewhere between 10 - 15 $ a month, I have to estimate a little since I am running a lot more things on AWS than only the website.
      The site is running on a Comodo SSL certificate but next year I will change to the free LetsEncrypt, as it is easier to add and will automatically renew after 90 days. The Comodo certificate requires manually copy pasting and editing the certificates in place.
      Writing Content
      The content for the site I write in the Redmine wiki, most of the content I write requires research and it takes about two weeks before I publish the content to the Processwire site. For writing content I use the google spell checker with the grammar checker, After the Deadline. To ensure catchy headlines they are optimized with the Headline Analyzer from CoSchedule
      Social Media
      Now the site is running, it needs promotion. The robots.txt files shows the search engines the way as does the sitemap.xml both of these I have made in a template file. Most of the blog articles I promote are republished on social networks like, LinkedIn, Tumblr, Google+, Twitter, and some branch specific networks as the Waternetwork and Environmental XPRT. To check, the search engines index the site well, Google webmaster and Bing webmaster check for any problems with the site. For statics on the same server there is an instance installed of Piwik. Piwik is a leading open alternative to Google Analytics that gives full control over data. The Piwik setup works very well and gives a good overview of the site usage both on the desktop via the site or via a mobile app. As a part of a test I have installed the open-source SEO-panel on the same server to manage keywords and to further improve the scores in the search engine, a nice feature is that you can also track your competitors. I am still new to SEO panel and have to learn more how to use the tool effectively.
    • By Kiwi Chris
      Years ago before Wordpress had even been invented, I started work on a site providing information about my local region of New Zealand. Back then, most people were on dialup, and if you wanted a CMS you had to roll it yourself - if you could find a host that supported server scripting at an affordable price.
      This year, with a quiet patch with essentially no paid work, I finally decided it was time to make the move from a home-grown CMS using an obscure scripting language to something more modern, so I could spend more time adding content and features, and less time maintaining the core CMS.
      www.marlboroughonline.co.nz
      I love Processwire because it works the way I think, and when I was first introduced to it, I was up and running within 20 minutes of reading the documentation, vs several hours reading Wordpress documentation, and still not entirely sure how to create my own fields and create a theme from scratch.
      I come from a database programming background, particularly Microsoft Access, so being able to make fields and add them to a form or report, is the way I'm used to working, although it took a bit of getting used to Processwire not adding fields to a table by default, although I see Pro-Fields or custom field types can achieve this. (I haven't used Pro-Fields in this project as I'm essentially on a zero budget).
      The site itself doesn't use anything particularly fancy. I use the following modules:
      Map Marker Form Template Processor Social Share Buttons (With my own colour version of the button icons) AIOM+ (This is particularly handy as I'm using a customised version of Bootstrap, and it handles compiling all the LESS files) Jumplinks The biggest task was importing all the content from my existing CMS, but since I wrote it, it was easier than dealing with some third-party CMS.
      The site had been around for a long time, and had numerous inward links including a number from Wikipedia, and I didn't want to break them in the conversion.
      If you're converting a site to Processwire with a URL structure that can't be replicated in Processwire, Jumplinks is a must-have module, as it handles complex URL redirects very nicely.
      The site has quite a bit of content, much of it which needed updating in addition to changing the CMS, so there might be odd bits that don't look right, but that's certainly not Processwire's fault.
    • By prestoav
      This is the second site we've built for Visualization. The first launched some 5 years ago and was based on a different CMS (before we started working with PW).
      The site is fully responsive and features a 'quick quote system' using the FormBuilder module to manage quote requests and email both customer and site owners with the calculated quote. The prices for each part of the quote calculation are editable by the client in the CMS at any time.
      Every page features Meta Title and Description override option fields with tag content falling back to values based on the page's content if these are not filled in.
      Other than PW core v 3.0.42 additional modules are FormBuilder, ProCache and markupBlog.
      Any feedback welcome!
      http://www.avrackbuild.com/