Leveraging UIkit

  • Hej, my Way isn‘t the best Practice but add the Components in view/template.php. The Problem: you lost this when you are updating your Theme.

    I know at SPRQInc has write about this an Tutorial how to include this Update-Safe. 🙃

  • Ughhh, then my questions wasn't even as stupid as I thought... :)


    I would like to improve the structure of my site content by making usage of certain components (e.g. accordion, tabs).

    Isn't this possible?

  • Wow dorfworker is working in the night :-O

    Well - you can override view/template.php, but this is not the best way to do that. I would prefer to use spqr/assets to include the components.


    Let's have a look at the example:




    As you can see the components are added to the header. As Pagekit comes with a lot of UIkit-stuff, let's check, if we can find the component in the Pagekit-folder:

    Code
    1. Romans-MacBook:Pagekit-run rlb$ find . | grep "autocomplete.css"
    2. ./app/assets/uikit/css/components/autocomplete.css
    3. Romans-MacBook:Pagekit-run rlb$ find . | grep "autocomplete.js"
    4. ./app/assets/uikit/js/components/autocomplete.js


    Okay... Now let's add these files using spqr/assets.





    Pagekit's dependency management allows to add the components in your own template and extensions easily - I will have a look whether I can add these to spqr/assets, too - so adding them would be much easier.

  • Well - it depends on your theme, each theme can import any css/js. But the "official" Pagekit-themes are based on UIKit 2. It's possible that your theme overwrites the default layout of uikit.

    You can check out the used version easily:




  • I'm using the theme you screenshoted ("Pagekit One").


    I have inserted the following source code:


    Code
    1. <div class="uk-accordion" data-uk-accordion>
    2. <h3 class="uk-accordion-title">...</h3> <div class="uk-accordion-content">...</div>
    3. <h3 class="uk-accordion-title">...</h3> <div class="uk-accordion-content">...</div>
    4. <h3 class="uk-accordion-title">...</h3> <div class="uk-accordion-content">...</div>
    5. </div>


    I only have added the JS file (app/assets/uikit/js/components/accordion.js.), no CSS file.


    Result: the accordion looks exactly like UIkit v1:

    https://getuikit.com/docs/accordion.


    That's why I am confused. But thanks for the explanation, good to know.



    Which CSS file do I have to add to style the Accordion like in UIkit v2?

    https://getuikit.com/v2/docs/accordion.html




    I also don't know which files to add for the UIkit v2 Slideshow?

    https://getuikit.com/v2/docs/slideshow.html




    Tried all of them, but did not work.


    Thanks in advance for your hints.

  • Hi Ben


    Result: the accordion looks exactly like UIkit v1:

    https://getuikit.com/docs/accordion.

    That's why I am confused. But thanks for the explanation, good to know.

    It's possible that your theme contains css that is overwriting the default style. But I'm pretty sure you are on UIKit 2 ;) You can send me the URL to the page and I will have a look at it ;)


    I also don't know which files to add for the UIkit v2 Slideshow?


    So you see the slideshow component is bundled to Pagekit. You can include slideshow.min.css and slideshow.min.js for example :)

  • I created one theme some time ago where I was annoyed by the necessity to always include the files. So I created some settings to enable specific uikit components. This setting can be done either for the whole page or for only specific parts of the page. You can find the source attached to this post (however, I removed most of the view templates as well as the style sheets, so you cannot just upload it and use it).


    Maybe it's helpful :)