Jump to content

Recommended Posts

Posted

Just a quick query regarding Processwire 3 and Uikit 3 integration. Is Uikit 3 going to be inextricably bound to Processwire 3?

The reason I ask is that having developed a site style in earlier PW3 dev versions (now on 3.0.59) using Material Design Bootstrap 4 as requested I find that Uikit 3 is messing up independent css code used to display various design elements. There is no difference between the CSS code to produce the circle behind the logo and there is no indication why its being displayed as a round cornered square - see attachments.

Is it at all possible to continue using MD Bootstrap 4 with the latest dev versions of Processwire 3 in corporating the site-regular profile?

Any advice would be greatly appreciated.

 

MDB-logostyle.png

Uikit3-logostyleMessedUp.png

Posted
4 hours ago, ridgedale said:

There is no difference between the CSS code to produce the circle behind the logo and there is no indication why its being displayed as a round cornered square - see attachments.

If the image is in the HTML source as opposed to a CSS background image, then maybe it is not cropped to a square ratio?

Posted

Thanks for your replies, tpr/Robin S.

Having run a test taking PW3 and Uikit out of the equation, I realise now that MDBootstrap 4 was applying the following css code:

box-sizing: inherit;

so the original implementation displaying the circle as required was being constrained - by applying padding to the div equal to the width of the border.

Even so the question as to whether or not it will be possible to use Processwire 3 with frameworks other than Uikit3 remains.

Posted

Uikit is only used in the admin, on the front end you can use anything you want. Think of PW as a data source, all the rest - markup, styles, scripts - is up to you.

  • Like 2
Posted
4 minutes ago, tpr said:

Uikit is only used in the admin

Adding to this: ...so long as you are starting with the "blank" profile. If you have installed a profile that is based on Uikit such as the new blog profile then the frontend will use Uikit.

  • Like 1
×
×
  • Create New...