Joomla 4 template Cassiopeia (frontend) - 6 things you need to know

Different from Joomla 3.x, Joomla 4 has only one default template to start. For this version, the Joomla team continued the tradition of its predecessor, naming their default Joomla 4 frontend template as one of the brightest stars in the galaxy, Cassiopeia.

As beautiful as the star, the template also brings us the exquisite look to the website. Before finding out what’s new in this template, you might need to read the guide to know how to install Joomla 4.

The professional design

Due to the simplicity and elegance in design, the template has brought to our website a modern look and cut-edged shape in every module. This style is a decent fit in the website trend nowadays when user familiarizes with this design style.

Using Bootstrap 4 for user interface

The update that everyone in the Joomla community looking forward is finally implemented in this Joomla 4 frontend template. If you are familiar with the history of Joomla development, you will know that, in the earlier version, Bootstrap 2 and 3 have already been implemented.

Using Bootstrap helps developers speed up their development process, ensuring consistency in the project as well as creating a responsive website easily. Now with Bootstrap 4, these major advantages all have a significant boost in performance. Moreover, the user interface of the Cassiopeia template has never been more modern and professional.

For template and extension developer like JoomlaShine, the feature brings both great news and challenge. If you want to know more about the difference between Bootstrap 4 and its earlier version, take a look at this article.

Note: Despite the fact that Bootstrap 4 has a great improvement in building a responsive website, the use of CSS Grid layout is much better for the responsiveness. We will discuss more detail below

Responsive layout and mobile-first

Joomla development team has completely applied the mobile-first rule when developing Cassiopeia for Joomla 4. As a result, this template has a nice responsive layout across multiple mobile devices.

Needless to say, this feature is very important to a website nowadays.

Advantages of the CSS Grid for flexible layout

The template layout has been fully changed in terms of technology application. A 12-column system changes to CSS Grid, a widely supported method of using a grid concept to layout content. 

According to Geoger Wilson’s speech in Joomla! World Conference 2017, Using CSS Grid can bring many advantages to Joomla, such as:

• No need for Bootstrap containers.
• You can write less and simple HTML code but still produce the same result as using Bootstrap. Less and simple code also means your website will load faster.
• You will have so much flexibility in design, and total control over how your website layout should look. Since it is the native CSS, so you can start re-order your grid on different devices. For example, if someone turns their phone around, you can add in two different grids depending on whether you are in portrait or landscape layout without affecting other versions.
• Your website will work seamlessly CSS Grid doesn’t require JavaScript. If you are using Bootstrap 4 and you disable JavaScript in your browser, you will see the responsive layout not so nice and smooth anymore.
• Last but not least, 90% of browsers support this method. If the majority of your users do not use IE or some unpopular browsers like Opera Mini, you have nothing to worry about.

You can take a closer look at the project on Github here.

There is one more small improvement, which I think it’s very useful for the user. It is the way the layout If we struggled to guess what “position 5” is in Joomla 3.x, this new template named their position very logically as “sidebar-left”, or “main-top”.
Check out all layout positions in Joomla 4 template Cassiopeia.

Detail folder structure

Joomla 4 template folder structure is clear and easy to navigate. It helps the developer customize this template easily.

Develop with SASS

SASS is an extension of CSS that keeps your code organized and allows you to write code faster and cleaner. With the use of SASS in form of systas .scss, Cassiopeia is easy to maintain and extendable.

Optimized codebase

Taking advantage of the newest technology and methods like CSS Grid and SASS, with optimization in the coding process, the Joomla front-end development team makes sure that this new template will be much faster and easier to customize than its predecessor.

Experience Demo Joomla 4 Website

Check it out! We just published a new demo Joomla 4 website which consists of all new features in Joomla 4.

You should take a look and it will help you a lot in experiencing the new changes here.

View Joomla 4 demo

In summary,

Professional design, Bootstrap 4 for UI, and CSS Grid for layout position along with many other improvements. Cassiopeia is no doubt a quality template to start with Joomla 4.

Don’t forget to share with your friends if you find this post helpful! Our free Joomla templates support the latest version Joomla 3.8 & 3.9. Rest assured in 2019 that you can expect to see hi-quality Joomla 4 compatible templates from JoomlaShine Team.

TRY JOOMLASHINE TEMPLATES FOR FREE