Jump to content

How I built KKP.LAW with Processwire


jensweigel
 Share

Recommended Posts

kkp-law-hero.1600x0.thumb.png.ab71c1af6bd4e44b7750c1d41c3bf6ad.png

The KKP.LAW site has been a Site of the Week in Processwire Weekly in the past. For this reason I would like to share some insights. So I hope someone will get an inspiration and maybe others may provide idees how to improve my process.

Development Setup

Currently I build my projects with DDEV and upload them to the server using Github Actions. This way I can view and develop them locally and push them to live when I am done. I also have SCSS which I write to a src folder and is watched by DDEV and also by the GitHub action. So it is possible to change SCSS via a browser in GitHub and everything will be deployed automatically.

The basics

The KKP.LAW was the last project before I develop this orocess with modules. But the basics are almost the same. Years ago I used Typo3 for building websites. But the really complex update routine, the complicated configuration and the ongoing change how you should build templates made it necessary for me to look for a new CMS. So Wordpress was never an option and many others were also very complicated, so I looked at ProcessWire. After a second look I really understood the approach and built my first websites with Processwire. Very quickly I switched from Typo3 to Processwire. Implementing new features into existing websites was so easy with it.

But one thing I really liked in Typo3 was the concept of pages and page content. On each page you can have multiple page contents. I.e. text or images or a mix of both. So I started to rebuild this logic in Processwire. I have templates for pages and templates for page contents. I use a page and pagecontent tag for the different types. On the PHP templates I just need to include them. So each page collects its page content children. All page contents can have a wrapper with some css classes. So it is easy to create layouts with this system.

CSS Framework

For this I use a kind of own CSS framework which is much more individual than big ones like Bootstrap. Personally I like the concept of 10 columns. So I have a 10 + 4 + 3 column system. Paddings are always added inside a column. So I dont need rows. All page content is inside a div tag with display: flex; flex-wrap: wrap;.

The result is very clean and I get a slim file sizes.

Components

Later I changed the page content more into components. They are not as powerful as in modern JavaScript framework. It was more a logical step for me. In my eyes, the massive classes I would need to build responsive websites always displeased me. So more and more I changed my approach to design and configure everything in a component with maybe one or two classes and do the rest in CSS. But in some cases the old approach is still good.

Current approach

So I made some modules for my basic needs. The current module is very personal build arrount my needs and my DDEV configuration. Each component (or page content) has its own module. So it has some methods, PHP template and basic scss which I bind into my deployment process. I wrote a bash script that sets up ddev, installs Processwire and these modules. Also creates a GitHub brunch with the required action that can be synced into a live server.

-

So this is a basic overview of my approach. Hope it is an inspiration for you. Questions and suggestions are very welcome.

See Website:

KKP.LAW

My own website: (also Processwire)

Jens Weigel – Büro für Design

  • Like 14
Link to comment
Share on other sites

1 hour ago, jensweigel said:

But one thing I really liked in Typo3 was the concept of pages and page content. On each page you can have multiple page contents. I.e. text or images or a mix of both. So I started to rebuild this logic in Processwire. I have templates for pages and templates for page contents. I use a page and pagecontent tag for the different types. On the PHP templates I just need to include them. So each page collects its page content children. All page contents can have a wrapper with some css classes. So it is easy to create layouts with this system.

Could you describe this method in more detail? Maybe screenshots from the backend?

Link to comment
Share on other sites

2 minutes ago, ngrmm said:

Could you describe this method in more detail? Maybe screenshots from the backend?

Yes of couse

802052398_Bildschirmfoto2023-07-12um10_45_08.png.b6ecd632c32d5a073caa4e22b8495317.png

All pages with white background are pages. The grey background are page contents. So I have an easy way to rearrange, move or extend. The warm grey sections is for header and Footer wich works in the same way as the pages. So it can have page content like logo or navigation.

So you see the main Page "Kanzlei" have 6 page contents. The hero, a text component, the Expertise with some sub pages, Team, News and Events. In this case all of these have subpages.

Other example: (Schreinerei Merte)

1640608126_Bildschirmfoto2023-07-12um10_53_54.thumb.png.3e54d44c430af94c29f2dc94c5b65527.png

You see a Wrapper wich just create a wrapping div around some kind of content.

Output:

1876798579_Bildschirmfoto2023-07-12um10_56_00.thumb.png.4307b5221a2cc94cae9c8551adc9ea86.png

  • Like 3
Link to comment
Share on other sites

On the template: (you see the module approch)

139764303_Bildschirmfoto2023-07-12um10_59_34.png.3f5e63520f29c1c963a5ab0f8729888f.png

getComponent gets all allowed page components, loads it template files, wraps it if needed.

Every component has a wrapper builder where I can choose what css class it will use.

2036049995_Bildschirmfoto2023-07-12um11_03_18.thumb.png.d7c48527567d880807bb38861d81c7bf.png

this will wrap this component into

<div class="hero">
  <div class="heroinner">
    {COMPONENT-CODE}
  </div>
</div>

 

  • Like 4
Link to comment
Share on other sites

1 minute ago, maetmar said:

thanks for sharing. 

just fyi. I think you can do something very similar using the Pro Module and Repeater Matrix

Oh yes you are right! I considered that as an alternative. The advantage for me using Pages is a better overview and handling in the backend. Disadvantage: understanding differences between Page and Page content is for customer very hard.

Link to comment
Share on other sites

1 hour ago, jensweigel said:

but if you want to move a page content to a other page you need some extra modules. I guess it is a personal flavor how to do 😀

@jensweigel thanks for the detailed explanation.
In the latest version of RepeaterMatrix you have the option to copy&paste matrixItems across the entire page. Even if the pages has two different templates. You just need the same RepeaterMatrix field.

But I can also understand how you create the structure. And with restricting template usage for children there should be no irritation for customers, right?

Link to comment
Share on other sites

1 hour ago, ngrmm said:

But I can also understand how you create the structure. And with restricting template usage for children there should be no irritation for customers, right?

Oh that’s interesting! So I guess I should review it again. The irritation for the customer is maybe less with the matrix solution.

Link to comment
Share on other sites

  • jensweigel changed the title to How I built KKP.LAW with Processwire

Always interesting how people approach ways to create and manage content in ProcessWire in so many creative and different ways. For handling and sorting different content sections on a page the Repeater Matrix was my go-to module in the past.

Nowadays I use the RockPageBuilder from @bernhard which is far better in my opinion 🙂

  • Like 3
Link to comment
Share on other sites

23 hours ago, Stefanowitsch said:

Always interesting how people approach ways to create and manage content in ProcessWire in so many creative and different ways. For handling and sorting different content sections on a page the Repeater Matrix was my go-to module in the past.

Nowadays I use the RockPageBuilder from @bernhard which is far better in my opinion 🙂

RockPageBuilder -> where can I find that? In the module directory there is no such module

Link to comment
Share on other sites

The module is ready to be used (and is already used in several sites from several devs), just the site to sell it and also docs are not yet done. I'm working hard on that front. It will be 49€ for a single site for early birds. If anyone needs a copy already just write me a PM.

Or signup for Rock-Monthly to get notified when I officially release it 🙂 https://www.baumrock.com/rock-monthly/

  • Like 5
Link to comment
Share on other sites

  • 1 month later...

With the Less Module you can place a admin.less inside your templates folder.

.PageList .PageListItem {
    &[class*="PageListTemplate_component"],
    &[class*="PageListTemplate_section"] {
        background: #f3f3f3;
        border-bottom: 1px solid #e0e0e0;
        &.PageListItemOpen {
            background: #e0e0e0;
            border-bottom: 1px solid #c9c9c9;
        }
        > a {
            padding-left: 10px;
            &:before {
                content: "\f061" !important;
                margin-right: 10px;
            }
        }
    }

}

so all Component Template begins with „component…“ (section is only a older version)

 

  • Like 1
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
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...