Jump to content
ridgedale

PW3 & Uikit3 + Other Framework

Recommended Posts

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

Share this post


Link to post
Share on other sites

PW does not pull any CSS or Js to your frontend unless you tell him so.

  • Like 4

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By flydev 👊🏻
      Bootstrap-4 Minimal site profile for ProcessWire
      This profile is based on the "minimal site profile (intermediate edition)" and bundled with Boostrap v4.4.1
       
        Features
      Bootstrap SASS Font-Awesome SASS Render / helper functions for : Simple ul navigation Bootstrap Multi-level navbar Bootstrap Carousel Bootstrap Cards Bootstrap Jumbotron Boostrap Accordion Assets minification, files bundle   Dependencies
      jQuery Popper.js Bootstrap FontAwesome   Prequisites
       You'll want to install the following on your system before proceeding:
      Yarn / NPM How To Install
      Download the zip file at Github or clone directly the repo with git clone and skip the step 2. Extract the folder site-pwbs4-master into a fresh ProcessWire installation root folder. During the installation of ProcessWire, choose the profile "ProcessWire Bootstrap 4 profile".   After installation
      You can find the development file (CSS/SCSS/JS) in site/assets/dev/src
      The profile can be used as is only with $config->debug set to false. To use it in debug mode, you are required to install the dependencies with the package manager.
      Open a terminal in site/assets/dev and execute the following command-line: yarn Available commands :
      Rebuild, minify and bundle assets for release : yarn build   References
      Bootstrap v4 documentation ProcessWire documentation ProcessWire Forum: bootstrap tag ProcessWire Forum: bootstrap related posts   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

    • By snobjorn
      I have been searching a while for pre-made UIkit 3 themes that I can download in some form and use. But I have not found much. I work with variables and compile most times, but sometimes I would prefer working with a "finished" theme as a starting point
      I have found the following resources:
      https://github.com/zzseba78/Kick-Off https://github.com/uikit/awesome-uikit Do anyone else know of UIkit 3 themes that you could list?
    • By FrancisChung
      Has anyone come across this issue where Amazon Cloudfront seems to refuse to cache a certain small number of static objects?
      I've tried invaliding the cache (root path) several times to no avail.
      I had a look at the file permissions of the objects in question, and they seemed all ok.
      I've also gone into the Amazon Console and there are no errors logged.
      You can see more details of this here :
      http://www.webpagetest.org/performance_optimization.php?test=171106_A4_be80c122489ae6fabf5e2caadcac8123&run=1#use_of_cdn
       
      I recently upgraded this test site to PW 3.062 from PW 2.8.x and noticed this was happening. I'm also running the latest version of Procache on this site.
    • By dlen
      Hi there,
      in an image gallery with the following code
      foreach ($page->bilder as $bild) { $thumbnail = $bild->size($page->thumbnail_size,$page->thumbnail_size); ... a JS gallery function broke down with the error message: "unitegallery.min.js:6 Uncaught Error: Can't get image size - image not inited."
      I looked into the /assets/files/nnnn/  folder and found 5 images (of about 16 or so) having api - generated version with only 42 Bytes. 
      4 of them had the string "....0x0.jpg" in their filename, but the 5th had an unsuspicious filename. They were all generated within the same second, according to their timestamp.
      In the backend, they could neither be opened nor deleted. Via FTP they could be deleted. This fixed the problem with the gallery. 
      In the /logs/exceptions.txt I found lines like
      leute_im_boot.0x0.jpg - not a recognized image (in /wire/core/ImageSizer.php line 257) In the errors log I did not find anything apparently related.
      Did anybody observe something similar?
      cheers - - -
×
×
  • Create New...