CSS Grid #21: How to Insert an Empty Row in CSS Grid

How to Insert an Empty Row in CSS Grid

As you already have learned in the previous tutorials of this series, CSS Grid (the Grid specification in your browser) positions grid items into grid cells or areas, based on an auto-placement algorithm, unless you position the items by yourself.

The browser will automatically create new rows and place items according to their source order. But what if you want to have an empty row without content? 

In this tutorial, you will learn how to generate an empty row in a grid and then use this row to overlap two grid items.

Read more: CSS Grid #21: How to Insert an Empty Row in CSS Grid

CSS Grid #20: Build a Teaser Gallery with Cards

CSS Grid #20: Build a Teaser Gallery with Cards

The card gallery is a popular design pattern on the web and you see them often in newspaper, magazine and online commerce sites, because of a number of reasons:

  • Cards can be adjusted to all screen sizes (responsiveness).
  • The information can be read and processed in an easy way.
  • Cards help the user focus on the detail.
  • Cards increase usability.

In this tutorial, you will learn how to use the CSS Grid to create a card based layout. Each card will have a teaser to a particular book. The layout will be by default responsive and without the use of media queries.

Let’s start!

Read more: CSS Grid #20: Build a Teaser Gallery with Cards

How to Create Custom Administrator Menus in Joomla

One new feature in recent version of Joomla 3 is the ability to create new admin menus.

This is a very handy feature for sites with multiple users. Instead of trying to manipulate the permissions for some users, you can simply give them a different set of menu links.

In this example, I'll show you how to make an admin menu that only shows for the Administrator user group. We also have a tutorial on creating custom administrator modules in Joomla.

Read more: How to Create Custom Administrator Menus in Joomla

Multiple Sitemaps Are Better Than One Large Sitemap

5 Important Reasons to Use Multiple XML Sitemaps

OSMap is the most popular way to create a sitemap for Joomla sites. 10,000 of Joomla users rely on OSMap to help Google and Bing understand their site's content.

Over the years of developing OSMap, we've spoken with Joomla users who have larger and larger sites. Some sites have 10,000 URLs, some have 50,000 URLs and we've even talked to users with hundreds of thousands of pages.

For these large sites, we do not recommend using a single sitemap. Neither do Google or Bing.

In this blog post, I'll explain why and how you should use multiple sitemaps for large Joomla sites. 

Read more: Multiple Sitemaps Are Better Than One Large Sitemap

CSS Grid #19: Difference Between Grid Containers and Block Containers

Until now, in this series we have assumed that grid containers behave the same as block containers. But there are some subtle differences between them.

Being aware of those, will help you improve your development workflow. This tutorial will explain the differences between the Grid containers and regular block containers.

Read more: CSS Grid #19: Difference Between Grid Containers and Block Containers

5 Joomla Tips for Power Users

5 Joomla Tips for Power Users

Joomla is a great CMS with so many features that even regular users may not understand all options available to them.

I'm going to share 5 tips that Joomla power users love to take advantage of:

  • Global check-in
  • Display site name in page titles
  • Enable HTTPS in all your pages
  • Duplicate a module
  • Preview module positions

Read more: 5 Joomla Tips for Power Users

CSS Grid #18: How to Build a Dropdown Menu

How to Build a Dropdown Menu in CSS Grid

CSS Grid allows you to build complex user interfaces with ease. User experience with a browser-based interface very often starts from a navigation element.

This tutorial will apply some of the techniques you have already learned in this series to build a drop-down menu. You will build it for a fictional online sports store. Hopefully, it will help you to strengthen your knowledge.

Read more: CSS Grid #18: How to Build a Dropdown Menu

How to Create Template Overrides for Joomla Plugins

How to Create Template Overrides for Joomla Plugins

Despite being tremendously useful, template overrides for plugins are a type of override that is barely known in Joomla community.

There is no way to create this type of override from the Joomla backend. It is a completely manual process. Template overrides for plugins are intended for extensions that output content in frontend. This means just a few plugins are ready for this feature.

In this tutorial, we will show you how to easily create plugin overrides in Joomla.

Read more: How to Create Template Overrides for Joomla Plugins

CSS Grid #17: Nesting Grids

Nesting Grids

With CSS Grid, it is possible to turn a grid item into a grid itself and that way, nest a grid inside another grid. With this approach, you can break the design into different parts and layout each one of them individually.

This will provide you with the required flexibility when converting your designs to HTML/CSS. This tutorial will explain how to build nested grids with CSS Grid.

Let’s start!

Read more: CSS Grid #17: Nesting Grids

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