CSS Grid #16: The grid-auto-flow: dense Property

The grid-auto-flow: dense Property

In one of the first tutorials, you learned that items inside a grid are placed according to a row based flow by default. Items wrap over to the next row and are placed into grid areas if there’s enough space available.

If not, the item will jump over to the next slot, where it can fit. This could lead to a grid layout with empty spaces because the placement algorithm is placing the grid items according to a sequence. The grid-auto-flow: dense property will allow you to fill those empty spaces with grid items of the right size, independently of the source order of the document.

Let’s demonstrate this property with an example!

Read more: CSS Grid #16: The grid-auto-flow: dense Property

What are Multilingual Associations in Joomla?

What are Multilingual Associations in Joomla?

Joomla has a  component called "Multilingual Associations". This will make your life much easier if you build multi-lingual Joomla sites.

Before this component was added, there was no easy place to manage all of your translation items. Every translated item had to be found and edited individually. With the Multilingual Associations component, you will be able to edit all your translations in a single interface. This will save you a lot of time and energy.

Read more: What are Multilingual Associations in Joomla?

How to Create Hidden Menu Items in Joomla

How to Create Hidden Menu Items in Joomla

Since the beginning of Joomla, users have created hidden menu links. This is a neccesary workaround because menu links control many of the features on Joomla pages - even pages that don't show in menus.

One very common use case is to create links to special sales pages and landing pages. Sometimes we need a menu link to set up the page, but we don't want that link to be easily visible. 

"Add Menu Title" is a menu option that makes it really easy to hide links. Here's how it works ...

Read more: How to Create Hidden Menu Items in Joomla

CSS Grid #15. The justify-content and align-content Properties

The justify-content and align-content Properties

In the previous CSS Grid tutorial, you learned about the align and justify properties to center and align items within a grid on the horizontal and vertical axes.

However, there are cases in which the total size of the grid is less than the size of the grid container. This happens because all items within the grid and the container itself are sized with fixed values (px, em, rem).

In such cases, it is necessary to align the tracks themselves, that is the whole grid, in order to exploit and fill up that additional empty space. In such a situation, you can make use of the align-content and justify-content properties. This is what I will explain in this tutorial.

Read more: CSS Grid #15. The justify-content and align-content Properties

How to Use Joomla's Privacy and GDPR Features

How to Use Joomla's Privacy and GDPR Features

The GDPR privacy laws came into force in May 2018. If you're new to the GDPR, we've got some reading resources at the bottom of this post.

In this guide, I'm going to focus on how Joomla is dealing with the GDPR. The main privacy improvements arrived in Joomla 3.9. The Joomla team have developed several new extensions to help you protect the privacy of your users.

Read more: How to Use Joomla's Privacy and GDPR Features

10 New Features You'll See in Joomla 3.9

What New Features Will You See in Joomla 3.9?

Joomla 3.9 is now live and ready for you to use!

The Joomla team is putting most of their focus and energy into Joomla 4, but they still found time to release Joomla 3.9.

Joomla 3.9 introduces over 200 new features, improvements and bug fixes. The most important changes involve privacy and the GDPR, but there are many other helpful new features. 

Read more: 10 New Features You'll See in Joomla 3.9

CSS Grid #14. Centering and Aligning Items in CSS Grid

Welcome to the 14th tutorial in our series on the CSS Grid.

We are presenting this series to help Joomla developers learn about CSS Grid. The introduction of CSS Grid will be one of the major changes in Joomla 4.

Vertically centering elements on a web page has been an issue for web designers and developers when working with CSS.

Read more: CSS Grid #14. Centering and Aligning Items in CSS Grid

How to Disable XML Styling in OSMap

How to Disable XML Styling in OSMap

One of our members was having trouble submitting his sitemap to Google. The message displayed at Google was:

"Your Sitemap appears to be an HTML page. Please use a supported sitemap format instead."

This tutorial will show you how to disable XML styling in OSMap, which should fix the issue. Let's get started.

Read more: How to Disable XML Styling in OSMap

How to Use Joomla Fields - the Complete Tutorial!

How to Use Joomla Fields

Custom fields are very important and useful Joomla feature.

Using Joomla fields, you can add many different types of fields, including Calendars, Checkboxes, Color pickets, Lists, Images and much more. You can read our overview of all 15 field types.

These Joomla fields can improve core parts of Joomla including articles, contact forms, users. You'll also find extensions that support fields including our own OSDownloads.

In this introduction, I'll show you how Joomla fields work.

Read more: How to Use Joomla Fields - the Complete Tutorial!

CSS Grid #13: The auto-fill and auto-fit Keywords in CSS Grid

The auto-fill and auto-fit Keywords in CSS Grid

Welcome to the 13th tutorial in our series on the CSS Grid.

We are presenting this series to help Joomla developers learn about CSS Grid. The introduction of CSS Grid will be one of the major changes in upcoming Joomla 4.

As you already learned, it is possible to create repeating track patterns with help of the repeat notation.

However, using this method gives you a fixed number of tracks, independently of the content inside each one of them.

The auto-fill and auto-fit keywords will allow you to place as many tracks of the specified size as possible, depending on the size of the viewport. This tutorial will explain the usage of these keywords.

Let’s start!

Read more: CSS Grid #13: The auto-fill and auto-fit Keywords in CSS Grid