Do you make own designs or do you use finished designs or toolkits?

[BlindPenguin]

Hi there,

I'm thinking about starting a sidebusiness with webdev. Specifically ProcessWire and maybe Wagtail for bigger things. Problem is, i'm not particularly great at webdesign. I was thinking of using finished designs or "multipurpose" templates instead. The latter ones would basically be like Lego. Changing colors and so on shouldn't be much of a problem for me. My main target customers would be small businesses. So i guess the expectations shouldn't be as high as bigger companies.

How do you guys work? Do you make your own designs, or do you also use finished or half-finished products?

Thanks in advance

[wbmnfktr]

4 hours ago, BlindPenguin said:

How do you guys work? Do you make your own designs, or do you also use finished or half-finished products?

95% custom.

[millipedia]

Like @wbmnfktr we only really do bespoke designs.

If a client asks us to do a 'bog standard' website then honestly we're going to point them either at a site builder ( Wix / Weebly / Squarespace ) or even (shudder) WordPress. That's because there are so many off the shelf templates for those platforms that will probably do just what they much cheaper than we can. A hosted solution also means we don't have to be involved in keeping systems up to date and applying the inevitable WP security patches.

There's also the fact that building those kind of sites honestly isn't that satisfying.

Website builders are just getting better and more convenient for user so I think your business will really need to offer something above what they offer in order to be a success, and this is exactly where ProcessWire can help.

Nearly all of the sites we build have some bespoke functionality, whether it's for a campaign or gathering and presenting data in an interesting way. Using ProcessWire means we can rapidly develop that extra functionality they need to add value to their site.

If you're not a designer then it would definitely be worth partnering with a someone who has design experience. For purely functional sites you can use Bootstrap  / UIKit etc but creating a bespoke site is definitely something a professional designer needs to be involved with. A good design is valuble to your client so something they should be paying for; probably the hard part is going to be convincing them of the value you're providing over and above just using an off the shelf design.

[Kiwi Chris]

On 4/7/2023 at 2:48 AM, millipedia said:

If a client asks us to do a 'bog standard' website then honestly we're going to point them either at a site builder ( Wix / Weebly / Squarespace ) or even (shudder) WordPress.

I recently inherited a site built in Wix because the person who built it disappeared, and the site owners weren't provided with a login.

Reverse engineering it proved a nightmare, including having to use Chrome Developer tools to individually download images since the way Wix served up the pages, you couldn't just save them and capture all the content.

I probably could have built them a site from scratch for less, but they really wanted to keep the design, and they didn't have backup copies of their images.

I've rebuilt it as a static site at this stage just using SSI for headers and footers, with Bootstrap 5.x to provide layout, and I've been able to discard 97% of the code on most pages and have something that looks pretty much the same.

Pages that were up around 1MB of HTML from Wix came down to about 15KB with Bootstrap, with almost identical appearance.

I'm not a great designer myself, but Bootstrap makes doing pretty much any kind of layout fairly easy, and it's easy enough to strip out unused CSS to slim it down once you're finished.

Customising Boostrap via scss files is pretty easy, particularly if you use something like Visual Studio Code which has extensions that will automatically compile scss on save.

There are other CSS frameworks like Bootstrap such as UIKit that ProcessWire itself uses as well, and using any of these is a great help if you want to ease into the intricacies of CSS with a framework with components that just work, but that you can customise as you need and as your skill develops. 

These front-end frameworks are much like ProcessWire itself, in that they don't set out to tell you how to build sites, but give you a useful set of components that you can put together like Lego bricks or perhaps Meccano is a better analogy, as you actually have to bolt things together by writing some code, whereas website builders hide all of that away from you (and create horrible code), but you do get parts that are already made to work together.

[bernhard]

19 minutes ago, Kiwi Chris said:

I'm not a great designer myself, but Bootstrap makes doing pretty much any kind of layout fairly easy, and it's easy enough to strip out unused CSS to slim it down once you're finished.

This is something I'd wish to have for UIkit as well. How did you do that in bootstrap?

[AndZyk]

3 hours ago, bernhard said:

This is something I'd wish to have for UIkit as well. How did you do that in bootstrap?

You can reduce unused CSS in UIkit if you manually only import the needed component partials from _import.scss.

But yeah it would be nice if UIkit would have a automatic way to reduce unused CSS like PostCSS. I hope this will be a feature of UIkit 4. ?

[bernhard]

Well it should be possible, there is https://github.com/TomS-/UIKit-TailwindCSS/blob/master/postcss.config.js but I'm looking for an easy way ? Something that I could maybe plug into RockFrontend

[Kiwi Chris]

17 hours ago, bernhard said:

How did you do that in bootstrap?

There's a Bootstrap NPM starter project that includes PurgeCSS to strip out unused css here: https://github.com/twbs/bootstrap-npm-starter

Also, there's a good tutorial on how to strip CSS with any CSS framework using UnCSS here: https://www.keycdn.com/blog/remove-unused-css

There's another tutorial that should work with any CSS framework here: https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772

 

[AndZyk]

On 6/8/2023 at 2:43 PM, bernhard said:

Well it should be possible, there is https://github.com/TomS-/UIKit-TailwindCSS/blob/master/postcss.config.js but I'm looking for an easy way ? Something that I could maybe plug into RockFrontend

I have tried PurgeCSS today on UIkit with my good-old CodeKit App: https://codekitapp.com/help/purgecss/

It works for a majority of the classes, but it seems that PurgeCSS doesn't recognize rules like for example .uk-child-width-1-4@m > *. For this you have to write regular expressions to safelist these classes: https://purgecss.com/safelisting.html

But I never really got the hang of regular expressions, so I might will pass. It seems too much of a hassle just to reduce maybe 100 kb of CSS. ?

I guess PurgeCSS works best with utility based frameworks like TailwindCSS, where there are not much complex opinionated CSS rules.

[bernhard]

Hey @AndZyk thx for the update!

Have you seen https://github.com/TomS-/UIKit-TailwindCSS/blob/master/postcss.config.js ? I think you can use Toms regex.

So the interesting part for me would be how we could add that to RockFrontend? I'd much more prefer a PHP way to do it similar to the LESS parser. But I did not find a solution on my research.

42 minutes ago, AndZyk said:

But I never really got the hang of regular expressions, so I might will pass. It seems too much of a hassle just to reduce maybe 100 kb of CSS. ?

Yeah that's why I did not add it to my workflow until now. But if it were really plug-and-play it would be nice, maybe..

[AndZyk]

21 minutes ago, bernhard said:

Have you seen https://github.com/TomS-/UIKit-TailwindCSS/blob/master/postcss.config.js ? I think you can use Toms regex.

That seems to be the defaultExtractor of the PurgeCSS configuration: https://purgecss.com/configuration.html

So sadly no regex for safelisting UIkit classes. ?

[wbmnfktr]

5 hours ago, bernhard said:

So the interesting part for me would be how we could add that to RockFrontend? I'd much more prefer a PHP way to do it similar to the LESS parser. But I did not find a solution on my research.

Wouldn't it be possible to use Github Actions for this? Just a theoretical thought - as I already made my peace with NPM workflows in my local setup.
In theory you could create a workflow that does what PurgeCSS/TailwindCSS workflows would do.

So there wouldn't be the need of build-tools on your side/in your workflow.

[Kiwi Chris]

On 6/13/2023 at 1:22 AM, bernhard said:

I'd much more prefer a PHP way to do it similar to the LESS parser.

Have you seen this: https://github.com/momentum81/php-remove-unused-css

It's incomplete, hasn't been updated in a while,  and won't remove all unused CSS but might still achieve some reduction in CSS size.

[AndZyk]

Sorry, if this is off-topic, but I am wondering regarding TailwindCSS:

Since TailwindCSS covers the CSS part of components, what do you use for making the components interactive? Like for example a carousel, accordion etc.

I saw that there are frameworks for TailwindCSS like daisyUI, Flowbite or Tailwind Elements. But isn't that the same like using a framework like Bootstrap or UIkit?

Or do you use a different plugin for every component?

One thing I like about frameworks like Bootstrap or UIkit is, that they offer a complete package. I don't want to be too dependent on many third-party plugins.

[teppo]

1 hour ago, AndZyk said:

Since TailwindCSS covers the CSS part of components, what do you use for making the components interactive? Like for example a carousel, accordion etc.

Probably as many answers as answerers, but from my personal point of view: I use select few (proven) libraries from project to project, and always as few as possible.

In total I typically use 3-4 libraries: carousels, foldable mobile navigation, pull-out bars, and modals. Those are the "hard problems", most other things are easy enough to build case by case, and often would require custom code anyway to look/work exactly as designed.

(I don't do a lot of super complex animation/visualization/modeling in typical project.)

In my case frameworks with all the bells and whistles rarely do exactly what I want (or the client or another designer wants), so I just end up hacking them, replacing parts, etc. One exception are PWA/mobile apps; for those I use Vuetify (and design accordingly) ?

[bernhard]

3 hours ago, AndZyk said:

But isn't that the same like using a framework like Bootstrap or UIkit?

+1

I've had the same discussion with a tailwind fan some time ago... IMHO he was reinventing the wheel over and over again. Every slider on every project was built differently (with AlpineJS which is one popular answer to your question). Every modal was built differently. Need tooltips? "npm install something" ? Or even worse built on his own again and not thinking about edge cases like tooltips moving to a different position when the hovered element is on the edge of the screen where there is not enough space for the tooltip ...

Whenever I had to fix something on the frontend it was terrible. Just adding a class to an element? Nope... No luck without prior doing "npm run watch" and usually seeing many mysterious warnings in yellow and red... Fix some issue with a slider? Understand all the custom logic that was built with AlpineJS and directly written to the DOM. To be fair I'm not the best frontend dev on earth, so some problems might have been beginner things, but still these things are definitely drawbacks of that approach.

One day he showed understanding and said, "Ok, you are right, let's build components that we can reuse. What components do we need?" I told him to have a look at the UIkit docs ? ?

On the other hand a framework has some overhead of course. And like @teppo said the components can be hard to customise or maybe they even don't work in a way you want to. I guess it's about priorities and there is no right or wrong. Though the customisation part is 90% a bad argument imho because in UIkit you have plenty of options to customise every component but you have the benefit that you have proper docs, so every team member can quickly understand how everything works and you have a common ground to build on.

Maybe UIkit is a little more like WordPress and Tailwind is a little more like ProcessWire. On the one side you take something that does a lot out of the box and then you adopt things (which is usually faster but less custom) and on the other side you start from scratch and build just what you need. And those mentioned frameworks try to find a spot in between I guess. Offer a quickstart but still being as flexible and efficient as Tailwind.

[AndZyk]

Thank you both for your sharing. Maybe @wbmnfktr wants to share his approach too, because I think he uses TailwindCSS as far as I know? ?

[wbmnfktr]

1 hour ago, AndZyk said:

because I think he uses TailwindCSS as far as I know?

That's true. And weird enough... I still enjoy using TailwindCSS.

7 hours ago, AndZyk said:

I saw that there are frameworks for TailwindCSS like daisyUI, Flowbite or Tailwind Elements. But isn't that the same like using a framework like Bootstrap or UIkit?

I never really used them as they are (for me) something like Bootstrap or UIKIT, or maybe better to say like a theme of some kind.
It's a nice to have when you want to scaffold out some prototypes and just need something that looks like the feature you need at the end.
And I sometimes look up how they create their markup for components or implement some TailwindCSS features.
Would I use them in a client project? Probably not. Maybe cherrypicking parts but that's it.

7 hours ago, AndZyk said:

what do you use for making the components interactive? Like for example a carousel, accordion etc.

As I am not the biggest fan of JavaScript I most ofted go for the easiest route: using my collection of Vanilla JS snippets for all kinds of things, like toggles, off-canvas navigation, modals and these basic needs.

When it comes to carousels I really enjoyed OwlCarousel in the past, as it had all I ever needed and could easily be enhanced in all different ways.
Nowadays I'd probobaly go with either GlideJS or SplideJS. Both are robust, lightweigt and flexible. 

When we come to more custom interfaces or projects I tend to use AlpineJS.
Similar to TailwindCSS you can just start writing and are almost there. It can get a bit tricky at first when using $store/$persist but it's worth it.