Gridy

This feature allows you to assign specific class names on an element, to set its width and also its responsive behavior. For example, in a 12-grid layout, let's say you want to create two columns of 6 and 6:

<div class="x-12">
  <div class="x-6"></div>
  <div class="x-6"></div>
</div>

So, in this example, we have our 12-column grid, with 2 same-width columns.

We can play around and have different values, as long as the sum of their width is always equal to 12.

For this to work, the parent element needs to have some specific styling:

• display:flex;
• justify-content:space-between;
• margin:0 auto;

To help with this, there are some CSS Helpers to streamline the process of element building.

Responsiveness

Let's assume you want the above columns to change their width on certain viewport breakpoints. By changing the letter of the class name, you can define these breakpoints:

• x-12 : 100vw
• l-12 : 1600px
• m-12 : 1400px
• s-12 : 1100px
• y-12 : 768px
• z-12 : 600px

You can add more breakpoints by using this function:

add_filter('artware_breakpoints', function($breakpoints) {
  $breakpoints[] = ['k', 1366];
  $breakpoints[] = ['f', 1280];
  $breakpoints[] = ['z', 414];
  return $breakpoints;
});

So you can later use z-4 to trigger a 4-width grid to an element. In the example below you can see how the element changes its width depending on the viewport. Try resizing the element below by dragging the black bar, to get an idea of how it will behave.

Also, you can add a letter breakpoint plus the -fww suffix to determine at which breakpoint you wish the element to turn into flex-wrap:wrap; allowing you to have full control over its responsive behavior. You can also reverse it again by adding the suffix plus -fww-n. For example:

<div class="df jcsb m0a x-6 l-fww m-fww-n s-12 z-fww">
  <div class="x-3 l-4 m-5 s-6 z-12"></div>
  <div class="x-3 l-4 m-5 s-6 z-12"></div>
</div>

Alternatively, you can add a letter breakpoint plus the -fd-c or -fd-r suffix to determine at which breakpoint you wish the element to turn into flex-direction:column; or flex-direction:row;, allowing you to have full control over its responsive behavior. You can also reverse it again by adding the suffix plus -fd-cr and -fd-rr for column-reverse and row-reverse. For example:

<div class="df jcsb m0a x-6 l-fd-c m-10 s-fd-rr">
  <div class="x-3 l-4 m-5 s-6 z-12"></div>
  <div class="x-3 l-4 m-5 s-6 z-12"></div>
</div>

Additionally, you can add a letter breakpoint plus the -hide or -show suffix to determine at which breakpoint you wish the element to hide/show, allowing you to have full control over its responsive visibility behavior. For example:

<div class="df jcsb m0a x-6 l-hide m-show s-12 z-fd">
  <div class="x-3 l-4 m-5 s-6 z-12"></div>
  <div class="x-3 l-4 m-5 s-6 z-12"></div>
</div>

Also, you can add a .split-2 class to handle the cases where your parent class isn't divided by 2. For example:

<div class="df jcsb m0a x-9">
  <div class="split-2"></div>
  <div class="split-2"></div>
</div>

Since we cannot have x-4.5 but we need a 2-column layout, the class .split-2 will solve this problem.

Same goes for when you need to divide the children elements into 3 or 4 columns. You can use the .split-3 and .split-4 respectively.

// Custom CSS
function my_custom_artware_styles($custom_css) {
  $custom_css .= <<<CSS
    .my-custom-class { background-color: #f5f5f5; }
    .my-custom-element { font-size: 20px; }
  CSS;
  return $custom_css;
}
add_filter('filter_render_artware_styles', 'my_custom_artware_styles');

Use this hook to add custom CSS that is considered critical, or override theme's CSS property values.