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

Introducing the Joomla 4 Workflows Feature

The Joomla team have been working hard on version 4. 

Here at Joomlashack, we've been writing about all the new features in Joomla 4, including the new admin template, media library and installer.

I'm going introduce you to another new Joomla 4 feature: Workflows. This new extension allows you to approve content before it's published.

Keep in mind that Joomla 4 is only at the Alpha stage. A lot of work remains to be done before Joomla 4 is ready for production use. However, this Content Workflow feature is really great!

Read more: Introducing the Joomla 4 Workflows Feature

CSS Grid #12: The minmax() Function

Welcome to the 12th 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.

Accordng to the CSS Grid Specification, minmax()

Defines a size range greater than or equal to min and less than or equal to max.

In other words, the minmax() function provides a method to specify the minimum and maximum sizes of a grid track. Thus, the minimax() takes two values as parameters.

This tutorial will explain the use of this CSS function.

Read more: CSS Grid #12: The minmax() Function

Getting to Hello World With Your First Joomla Plugin

Are you ready to learn how to build Joomla plugins?

These powerful extensions act on Joomla's trigger events to perform almost any task that you can imagine. Plugins are responsible for a huge variety of tasks on your site from logins, to search, to article features and 1,001 other things.

Inside Joomlashack University, you'll find detailed classes on every aspect of Joomla development. In these 3 videos, we'll show you how to set up your Joomla plugin environment and create a "Hello World" plugin. 

Read more: Getting to Hello World With Your First Joomla Plugin

CSS Grid #11: How to Place Items with Grid Template Areas

How to Name the CSS Grid Lines

Welcome to the 11th 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.

In past tutorials, you learned how to place items on a grid using the span keyword and/or using a line-based placement.

There’s another method for placing items on a grid. You can create areas inside the grid with your own specific names and then position the items

Read more: CSS Grid #11: How to Place Items with Grid Template Areas

CSS Grid #10: How to Name Grid Lines

How to Name the CSS Grid Lines

Welcome to the 10th 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.

In the previous tutorial, you learned how to place grid items according to the numbered lines that compose the grid.

As humans though, we find much easier to process names rather than numbers. 

In this tutorial, you will learn how to name the lines that compose the CSS Grid.

Let's start!

Read more: CSS Grid #10: How to Name Grid Lines

How to Display Tags Only On Single Joomla Article Pages

How to Display Tags Only For Joomla Articles Pages

Tags are extremely useful for organizing your Joomla content. But, by default, Joomla will display them sitewide.

Your Tags will get displayed on a featured articles page and on category blog pages.

One of our customers asked us how to display Tags only on single Joomla articles. So, in this tutorial, I'll show you how to hide tags on blog and category pages.

Read more: How to Display Tags Only On Single Joomla Article Pages

CSS Grid #9: How to Layer Items Inside a CSS Grid

Layering Items within a CSS Grid

Welcome to the 9th 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.

Read more: CSS Grid #9: How to Layer Items Inside a CSS Grid

CSS Grid #8: How to Use Line Placing in CSS Grid

Line Placing in CSS Grid

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

We are publishing this series because Joomla developers need to know about CSS Grid. The introduction of CSS Grid will be one of the significant changes in Joomla 4.

Read more: CSS Grid #8: How to Use Line Placing in CSS Grid

CSS Grid #7: How to Size Grid Items with the Span Keyword in CSS Grid

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

We created this series because Joomla developers need to know about CSS Grid. The introduction of CSS Grid will be one of the significant changes in Joomla 4.

Here are the previous posts in this series:

  1. Everything Joomla users need to get started with CSS Grid
  2. How to use the Grid Inspector tool in Firefox
  3. The difference between Implicit and Explicit grids
  4. How to use the Autoflow property
  5. Determining the size of the tracks
  6. The Auto keyword and repeat notation

Read more: CSS Grid #7: How to Size Grid Items with the Span Keyword in CSS Grid