Regular blog site profile

Consistent with the plans of introducing new site profiles this year, we've started work on the new site profile, and have the first version ready this week. This profile has a little bit in common with the default site profiles (included with the ProcessWire core) but aims to go quite a bit further in demonstrating various features of ProcessWire, several of which are version 3.x specific. It also aims to be a more useful starting point to build a site from.

The front-end of this profile uses the Uikit 3 library and includes a library of time-saving functions for working with Uikit 3. It stays with the default Uikit styles and we've tried to keep it as generic “Uikit” look as possible. That way, when someone wants to use it to build a site, there is very little they have to reverse engineer or remove. It also means that you should be able to plug in any Uikit 3 theme and have everything adjust perfectly to that theme. We currently have no theme being applied, so you just see the generic Uikit output.

Site profile highlights

  • This profile includes a blog component and demonstrates how to build a simple blog in ProcessWire.

  • The profile uses the new markup regions and the new ProcessWire functions API.

  • It uses the new Uikit 3 on the front-end in template files and includes a handy PHP library of Uikit-specific functions.

  • One of the template files (basic-page-edit.php) demonstrates how to implement front-end editing features. When logged in (and page is editable) you can edit any pages using that template on the front-end.

  • Uses pagination (after 10+ blog posts) and demonstrates use of comments as well. Includes a ukPagination() function which tailors ProcessWire's MarkupPagerNav module to deliver Uikit pagination.

  • Demonstrates use of a Page reference field, as used by categories in the blog. This is something that none of our core profiles do at present, and we think they should.

  • The template files are easy-to-read and modify, and serve as a good platform to build from. Use of markup regions makes them simple to follow in the same way that template files using direct output tend to be simple to follow.

  • Demonstrates implementation of a custom hook function (see in the /site/ready.php file).

This new site profile can be seen at demo.processwire.com/regular/. However, it's going to be more interesting if you grab a copy yourself and play with it. Right now it has its own GitHub repo where can download it. You'll also need a copy of ProcessWire 3.0.51 (the latest dev branch version). When this profile is fully complete, it will likely replace the “Classic” profile currently included in the PW core.

Uikit 3 PHP function library

This new site profile also includes a Uikit 3 PHP function library that simplifies some of the more verbose bits of markup you might need when using Uikit 3 with ProcessWire. For instance, creating a recursive navigation tree using uk-nav, generating a uk-navbar with dropdowns, rendering uk-pagination, or any number of other things. We find it helpful to have a few helper functions to avoid markup redundancy in multiple template files.

You'll see this library included with the new site profile, even though it doesn't itself need to use all of the functions that are included. But we're planning to continue to build upon and maintain this library of Uikit 3 helper functions, since we've already used many on a lot of other client projects. We've done the same with other CSS frameworks as well, though haven't released them as part of a site profile before. But since this site profile uses Uikit, I thought it made sense.

If you get a chance to check out this new site profile, please let us know what you think and if there's anything we can do to improve it or make it more useful. An important thing is to keep it basic enough that new users can understand it easily, and build from it easily. But the more we can find the balance between “simple”, “educational” and “useful”, the better.

I hope that you all have a great weekend and enjoy reading the ProcessWire Weekly. Thanks for reading!


Comments

  • Szabesz

    Szabesz 3 months ago 20

    Thank you Ryan! I'm already loving it :) and will install it during the weekend.

  • HMCB

    HMCB 3 months ago 51

    Spectacular! I've used UIKit 3 on one site already and it's incredible. I know PW is un-opinionated but I think it would bring more designers into the fold if you concentrated solely on UIKit. It's so polished and gives us a great starting point on which to build on. Yes, there are other CSS frameworks and nothing is preventing the use of them, but the un-oponionated nature of PW also makes it more intimidating for many designers, I suspect. Sometimes we just need sensible defaults that give us a launchpad for building sites. UIKit is so polished, too.

    And major props for the editing-page code/example. Another one of those things that gives non-developers courage to build better things.

    Thanks Ryan and team.

  • Tfom

    Tfom 3 months ago 00

    While trying to navigate trough the demo profile site I'm getting errors - "The connection was reset" For example by clicking on the "Think affordable artificial blast" link on the homepage. The same thing happens on other pages, it may worth to check this out ;) Other than that great site profile! I have to try to build something with PW :)

  • ukyo

    ukyo 3 months ago 00

    Thanks @ryan
    Nice to see uikit front-end framework used by you for profiles and some other works ! is this mean, will we see more uikit things ?

  • Can

    Can 3 months ago 10

    i just recently wished to have "save + publish + add another"..and there it is *thumb up*

  • Holly

    Holly 3 months ago 00

    I really am looking forward to using UIKit 3, but after spending a good chunk of time running it through browserstack, you do need to keep in mind that it doesn't work in the latest version of IE, nor Edge. If it borked in one, but not the other, I'd tell people to upgrade, but both? That needs to be fixed by UIKit before I can really play with it.

    • HMCB

      HMCB 3 months ago 00

      This may not be the case here, but I don't trust those testing tools. I've used at least 4 (from email to site testing) and the results have been less than accurate. I'd be curious if those tests are run within the actual OS and browsers and to see if UIKit is in fact compatible.

    • Szabesz

      Szabesz 3 months ago 00

      3.0.0 beta 9 (February 3, 2017) has been released, so for the time being, just overwrite the css and the js files (uikit.min.css and uikit.min.js) and the site profile will be ok in IE and Edge too.

  • Dene

    Dene 1 month ago 00

    It is possible to rename the Blog page as News but is it possible to reconfigure this module to be News?
    i.e. So that it appears as /news/ and the templates used as news and news-post (to avoid any confusion later on).

Post a Comment

Your e-mail is kept confidential and not included with your comment. Website is optional.