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

Fresh Install - Template Messed Up?

One of the most asked questions we get in our support ticket system, is why a particular template is 'messed up, broken, not right, etc etc' upon first installation.

The following is taken from a tutorial on how to set up the Onyx template with Joomla 3, however, there are some concepts that might help a user of any Joomlashack template understand why a template does not look like the demo right out of the box.

This information is not designed to help you set up any particular template besides Onyx (for that please see the template documentation in the demo of the template you are seeking help with) but it is important as a user of Joomla to grasp some concepts that will make life a little easier as you learn how to use this sometimes confusing system.

Default Template installed

This is how our Onyx template with demo content looks, within the style variations.

Colors dark

So you've installed Joomla successfully, and now you want to us a profession template. First you need to install your template. For help with installing that template, see the tutorial 'How do I install a Joomlashack Template'

Joomlashack Template installed

This is how Onyx template looks without the demo content.

onyx sample install no demo

You've successfuly installed your template and set it as the 'default', and gone to view your wonderful new template... and WHOA! It looks like something went terribly wrong!

...it's not all that bad - you just need to do some simple template setup now. Keep reading and it will all look good in a time.

First Things First - know your available module positions!

module positions

Before you can put things where they belong (or where you want them), or move things from where they don't belong, you need to know what module positions are available with your particular template. Each template demo contains a 'Module Map'. The module map will outline your available module positions. This is the Module Map for Onyx, to view the module map for your particular template, see the Demos.

Where is my menu?

You'll notice in the default template (Protostar), that menu module is published nicely to the 'position-1' position. When you change the default template to the Onyx template (in this example), you need to change that menu module to the 'menu' postion.

Know your available module styles

module styles sample

module styles sample 2

Just as you need to know what module positions are avaialbe if you want to put things where you want them - you also need to know the styles that are available for your particular template. And just as each demo contains a Module Map ... guess what?.... they also contain info on what styles are at your disposal!

The above image shows the 'Module Class Suffixes' and corresponding formatting for the Onyx template (for your template's available suffixes, see the demo).

Add the suffix.

The module itself will gain styles based on the Module Class Suffix, which is added in the module's parameters as seen in the screenshot below:

module class suffix

 

Remember, if you need help further assistance after viewing this information and the documentation for your template, please submit a ticket (only available for customers).

Thanks for using Joomlashack's template, and Have Fun!

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

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

CSS Grid #6: The Auto Keyword and Repeat Notation in CSS Grid

Welcome to the 6th tutorial in our series on the CSS Grid. Implementing CSS Grid will be one of the significant changes in Joomla 4.

In our previous tutorials on this popular technology, we covered the following topics:

  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 in CSS Grid
  5. Determining the Size of the Tracks in CSS Grid

In this tutorial, you’ll learn about the auto keyword to size tracks and the repeat syntax for creating track patterns in an abbreviated way.

Read more: CSS Grid #6: The Auto Keyword and Repeat Notation in CSS Grid

CSS Grid #5: Determining the Size of the Tracks in CSS Grid

Determining the Size of the Tracks in CSS Grid

Welcome to the 5th tutorial in our series on the CSS Grid. Relying on CSS Grid will be one of the major changes in Joomla 4.

Cassiopeia, the default frontend template for Joomla 4, was created with CSS Grid. Valentin, our lead designer, is working on converting our templates to Joomla 4 and he's constantly surprised at how much CSS Grid is being used in Joomla 4.

In our previous tutorials on this popular topic, we covered the following topics:

  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 in CSS Grid.

In this tutorial, you will learn the different measuring units used in the CSS Grid specification.

Read more: CSS Grid #5: Determining the Size of the Tracks in CSS Grid