• Check the operation of grid settings and styles provided by Headless SXA.

Grid provided as standard

The grid provided in the Sitecore XM Cloud sample is shown below. This configuration is provided as a Grid in the site's Settings.

• Tailwind
• Bootstrap 5 (default)
• Bootstrap 4
• Bootstrap 3
• Foundation
• Grid 960

This time, we will verify the operation with Bootstrap 5 and tailwind.

Working with Bootstrap 5

The content of the Basic site is created in Bootstrap 5, so there are many values in it, but we would like to check the code in a plain situation to make sure it works. First, place the Title and RichText components.

When the page is actually displayed, you will see the following code output.

The code for the rich text component is described as follows

<div class="component rich-text col-12">
  <div class="component-content">
    <div>
      <p>RichText Sample</p>
    </div>
  </div>
</div>

The components that handle rich text are listed in components/RichText.tsx, with some code references as follows

  return (
    <div
      className={`component rich-text ${props.params.styles.trimEnd()}`}
      id={id ? id : undefined}
    >
      <div className="component-content">{text}</div>
    </div>
  );

This code shows the following movement.

• <div className={`component rich-text up to this component specific code
• ${props.params.styles.trimEnd() is an additional attribute added to the component
• Display the RichText data you have in the item in <div className="component-content">.

Upon review of the item, RichText stores the following code

We were able to get the data from the Sitecore item and verify that it was described in terms of HTML.

We will actually delete the created component and check its operation on the next Grid.

Confirmation of operation with Tailwind.css

Again, place the component in the same way for an empty page. The output is as follows

If you check the HTML code, you will see the following

<div class="component rich-text basis-full">
  <div class="component-content">
    <div>
      <p>Sample RichText</p>
    </div>
  </div>
</div>

In the case of Bootstrap 5, col-12 is specified in the class of the component, but you can see that this part has been changed to basis-full. You can see that each framework has a description for using full width (100% width).

Thus, when placing a component, the code required by the Grid specified at the site will be changed to be complementary.

So where is this value defined? Actually, /sitecore/system/Settings/Features/Experience Accelerator/GridTailwind/Tailwind Grid Definition defines how to describe the grid when using Tailwind, The grid is defined by items for the 12 sizes of Mobile.

Summary

In this case, we were able to see how the selection of the grid is reflected in the code. In the next article, we will summarize how to write a style sheet when using Tailwind.css. In the next issue, we will summarize a little about how to write style sheets when using Tailwind.css.

Tags

• XM Cloud