Align Component

Align component is a module to render a certain content with a specific alignment in the page. This component is to ensure the content alignment is always consistent across Bissetii's deployment.

This component is available starting from v1.13.1.

Hugo

Bissetii supports Hugo interfaces to make content creation easier depending on Bissetii version.

Shortcodes

Bissetii prepared a list of shortcodes to make website creation a lot easier. Here are some of the available shortcodes related to Align component.

align Shortcode

The align shortcode allows you to create a container with the CSS alignment.

This shortcode is available starting from version v1.13.1.

The format is as follows:

1
2
3

{{< align [ALIGN] [VALIGN] [STYLE] [CLASS] [ID] >}}
	[CONTENT]
{{< /align >}}

• ALIGN - COMPULSORY
  1. Denotes the horizontal alignment. The values are as follows:
     1. left - set to left-aligned.
     2. center - set to center-aligned.
     3. right - set to right-aligned.
     4. justify - set to justify-aligned.
• VALIGN - COMPULSORY
  1. Denotes the vertical alignment. The values are as follows:
     1. top - set to top-aligned.
     2. middle - set to middle-aligned.
     3. bottom - set to bottom-aligned.
     4. stretch - set to stretch-aligned.
     5. baseline - set to baseline-aligned.
• STYLE - OPTIONAL
  1. The style= attribute for the container.
• CLASS - OPTIONAL
  1. The class= attribute for the container.
• ID - OPTIONAL
  1. The id= attribute for the container.
• CONTENT - COMPULSORY
  1. The content inside the container.

To use it, simply call it inside the markdown. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

{{< align "center" "bottom"
	"height: 80px; background: var(--color-grey-300)"
	"custom-class"
	"my-custom-id-1"
>}}
	This content will be horizontally centered, vertically bottom aligned.
{{< /align >}}

		⥥

<div id="my-custom-id-1" class="align center bottom custom-class" style="height: 80px; background: var(--color-grey-300)"><pre><code>This content will be horizontally centered, vertically bottom aligned.
</code></pre>
</div>

This will render as :

This content will be horizontally centered, vertically bottom aligned.

Go

Coming soon.

HTML

Bissetii supports Align component seamlessly across multiple output formats. However, in most implmenetation (where you have access to HTML), this component is entirely optional and you would not be needing it since it is essentially a flexbox wrapper.

However, just in case for unknown reason where you really need to use this component, simply apply the required CSS classes tags into a <div> container. Example:

<div class="align center middle" ...>
	<!-- YOUR CENTERED CONTENT HERE -->
</div>

The .align class tag is compulsory where it set the container as an alignment container. This will reset its spacing related CSS fields like margin: and padding: to 0 to ensure it does not introduce any spacing related adjustment. It also set the display: mode into flex in order to configure the given alignments accurately.

For horizontal alignment, these are the available CSS class tags to append in the tail:

1. left - align the entire content towards left.
2. center - align the entire content towards center.
3. right - align the entire content towards right.
4. justify - align the entire content towards justify styling.

For vertical alignment, these are the avaialble CSS class tags to append in the tail:

1. top - align the entire content towards the top.
2. middle - align the entire content towards the middle.
3. bottom - align the entire content towards the bottom.
4. stretch - align the entire content by stretching towards top and bottom.
5. baseline - align the entire content towards baselining.

CSS

CSS implementation is not applicable for this component.

Javascript

This component does not rely on any Javascript.

Sass

Depending on release version, the Sass files work differently. Bissetii does not package Sass codes explictly so please view them via the git repository.

v1.13.1 and Above

Bissetii uses Dart Sass to compile the styling Sass codes into CSS file. This component’s Sass codes are available at the following location:

pkg/components/internal/align

Researches

Here are the researches done to ensure Align component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about Align component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.