Joomla 4 is getting closer and closer!
The Joomla team have released the beta version of Joomla 4. This version is not ready for use on your live sites, but it is 100% ready for testing.
Click here to download the beta version of Joomla 4.
We've been writing about Joomla 4 for a couple of years now. This is our introduction to Joomla 4 and contains guides to all the new features.
First, we have this excellent presentation from George Wilson, the release lead for Joomla 4. He does an outstanding job of putting Joomla 4 into a larger context, and also clearly explaining the new features. If you have 30 minutes to spare, sit down and watch this introduction from George:
More about Joomla 4
If you're ready for more, read on. We've been writing about Joomla 4 for a couple of years now. Here are some of the key articles we've written about new Joomla 4 features:
- The Joomla 4 admin template
- The Joomla 4 install process
- The new, default search extension (based on Smart Search)
- The Joomla 4 Media Manager
- Customizable HTML email templates
One of the coolest new features is Workflows. This new extension allows you to approve content before it's published. This presentation by Benjamin Trenkle is a detailed introduction:
CSS and Javascript in Joomla 4
If you're design-minded, we have also written about frontend changes in Joomla 4:
- Module Styles will move to layout files
- Joomla 4: the JavaScript Parts
- Introduction to Web Assets in Joomla 4
One of the most important changes in Joomla 4 is the upgrade from Bootstrap 2 to Bootstrap 4. However, Joomla 4 will not rely exclusively on Bootstrap. Joomla 4 will also rely on CSS Grid, a CSS method that is revolutionizing the frontend web design industry. You can click here to read our introduction to CSS Grid. Because of the positive reaction, we went on to write a series of over 20 posts, introducing Joomla users to CSS Grid. Read on because you'll need to know this when working with Joomla 4:
- CSS Grid #1: Everything Joomla users need to get started with CSS Grid
- CSS Grid #2: How to Use the Firefox Grid Inspector with CSS Grid
- CSS Grid #3: Understanding Explicit and Implicit Grids in CSS Grid
- CSS Grid #4: How to Use the Autoflow Property in CSS Grid
- CSS Grid #5: Determining the Size of the Tracks in CSS Grid
- CSS Grid #6: The Auto Keyword and Repeat Notation in CSS Grid
- CSS Grid #7: How to Size Grid Items with the Span Keyword in CSS Grid
- CSS Grid #8: How to Use Line Placing in CSS Grid
- CSS Grid #9: How to Layer Items Inside a CSS Grid
- CSS Grid #10: How to Name Grid Lines
- CSS Grid #11: How to Place Items with Grid Template Areas
- CSS Grid #12: The minmax() Function
- CSS Grid #13: The auto-fill and auto-fit Keywords in CSS Grid
- CSS Grid #14: Centering and Aligning Items in CSS Grid
- CSS Grid #15. The justify-content and align-content Properties
- CSS Grid #16. The grid-auto-flow: dense Property
- CSS Grid #17. Nesting Grids
- CSS Grid #18: How to Build a Dropdown Menu
- CSS Grid #19: Difference Between Grid Containers and Block Containers
- CSS Grid #20: Build a Teaser Gallery with Cards
- CSS Grid #21: How to Insert an Empty Row in CSS Grid
- CSS Grid #22: Theming a Footer with CSS Grid and Media Queries
- CSS Grid #23: Building a Hamburger Icon Menu
About the author
