Making CSS-only Overrides
JoomlaShack Conference, 9 & 10 December 2020
slides https://slides.woluweb.be
1 The power of Joomla
Did I already tell you that Joomla is sooo powerful ?
- not only because of its native Custom Fields
- not only because it manages Multilingual websites natively
- not only because of Users Access Management…
- but also a.o. because of the possibility to make Overrides / Alternate Layouts for any View of any Component or Module
Most of the time you don’t even need to know anything of PHP to make your first Overrides, for example if you simply want to move the Image before/after the Title or create a 2 column layout for your content.
And once you have tested/tasted it, you will probably want to go to the next level and exploit the possibilities of PHP too to make more complex things.
Typically making an Override / Alternate Layout entails two things: 1. changing the View, namely the HTML generated by some PHP file 2. adding a bit of CSS to customize the styling of the elements (if needed)
2 Inspiration for Overrides
To get inspiration for Overrides / Alternate Layouts, see for example
- https://www.j-over.de/
- https://www.web-eau.net/developpement/joomla-overrides
and -why not- join the current Joomla Override Challenge #joc - https://twitter.com/hashtag/JoomlaOverrideChallenge
3 Overrides… only with CSS
In this presentation, we will show how to make a “kind of” Override or Alternate Layout… only with CSS.
This is indeed made possible by what is called CSS Grid
https://caniuse.com/css-grid
4 Example
On the following Animated Gif, we already have a first idea of what we can achieve: - a total freedom on where I put which element (Title, Image, Text, Links, …) - different layouts according to the viewport
5 Advantages
This way of making Overrides is very handy for different reasons: 1. even less technical people can customize their layouts (no HTML and no PHP involved) 2. you can easily achieve even the most sophisticated layouts 3. you can have (completely) different layouts according to the viewport and so be mobile-first 4. it works no matter your Bootstrap / UIkit / … version
- in many cases, you can just copy-paste your CSS from one Template to another and it will work immediately (in our demo, our override in Astroid 2.4 immediately works on Helix 3, even if they come from two different template editors and if the latter is an old generation of Helix)
- it requires less maintenance: when you create a “real” Override / Alternate Layout, you actually fork the original PHP file. This means that when there are fixes / improvements / changes to that original Joomla file, you are supposed to revise your forked code accordingly
- last but not least, Joomla 4’s frontend is largely based on CSS Grid. So it is definitely an extra motivation to learn it so that you can customize even more things in Joomla 4
Of course, real Overrides / Alternate Layouts are still useful because you can go further and do more things.
But if the only purpose is to rearrange the layout of the existing content without manipulating it, CSS Grid can be a nice way to do it.
6 How it started
I have always been very curious about Flexbox and CSS Grid but never really implemented them in my projects, except for little things like displaying the Partners/Sponsors/Clients logos in a footer.
The first really nice implementation of CSS Grid I discovered in the Joomla world was done by Allon Moritz (the father of Joomla’s Custom Fields btw, my favourite topic 😊 )
https://joomla.digital-peak.com/demo/dpc/en/event-details-view.html
Simply inspect the code and look at
<div class="com-dpcalendar-event
In the corresponding CSS you will see
display: grid;
Note : Firefox’s inspector is very handy bc you can click on the grid icon in the CSS and you will keep visualizing the grid while you are inspecting the other elements.
7 A more advanced example
In one of our current projects, we tried to go further and even have a more complex design: - we don’t want to have a linear display of the different elements of the Article (Title, Image, Text, Links, Pagination, …) - so we play with CSS Grid to get overlap, more empty spaces on desktop etc
See the live demo.
Or see the simplified version here on Codepen:
https://codepen.io/woluweb/pen/rNMMjMQ
8 Easy to adapt to each project
Actually I had initially made this nice design on a website running - Astroid Template - made by JoomDev - based on Bootstrap 4
Then I gave a try and simply copy-pasted my CSS on another (old) website running - Helix 3 Template - made by JoomShaper - based on Bootstrap 3
And waouw! Even then it would work immediately (see live demo).
But even for templates which would be more different (in the sense of generating a completely different HTML structure for the Articles) it would be very quick to adapt the CSS.
9 Go go go
Now it is up to you 😊
Here are some interesting resources
A complete example of layout for an article by using CSS Grid - https://chenhuijing.com/blog/how-i-design-with-css-grid/ - result on codepen: https://codepen.io/huijing/pen/QQGBjY
The JoomlaShack complete guide to CSS Grid (23 lessons) and the book - https://www.joomlashack.com/blog/joomla-news/css-grid/
A visual generator - https://css-tricks.com/layoutit-grid-learning-css-grid-visually-with-a-generator/
And more generally - a complete guide: https://css-tricks.com/snippets/css/complete-guide-grid/ - practical examples: https://gridbyexample.com/ - video tutorials: https://cssgrid.io/ - and in the near future, we will even have SubGrids: https://noti.st/rachelandrew/i6gUcF
10 Get in touch
https://slides.woluweb.be
Any suggestion about this presentation ?
Please feel free to contact me. I’ll be happy to keep improving it 😊
Marc Dechèvre | woluweb
+32 474 37 13 12 | +32 2 772 58 69
https://www.woluweb.be/contact
https://www.slideshare.net/woluweb