Layout

The BAS Style Kit inherits the layout features provided by Tailwind.

The container class is a utility that creates a responsive fixed-width layout wrapper. Its job is to center your content and constrain its maximum width at different breakpoints. By default the width is 100% and there are breakpoint-based max-width values.

The container is fluid on small screens and fixed-width on larger screens.

It does not centre content by default. Use mx-auto for this.

<div class="container mx-auto">
...
</div>

The Style Kit is mobile first, meaning it is assumed pages will be viewed at the smallest possible size (i.e. on mobile phones) and then scales up, progressively, to larger sizes based on common devices classes such as phones, tablets, small and large monitors, TVs etc.

Media breakpoints are used to implement this design. They check if the current browser width is greater than the min-width of each breakpoint. These queries are reapplied whenever the browser size changes, for example when switching from landscape to portrait orientation on a phone.

It is possible to use an xs size by using a breakpoint smaller than sm

@media only screen and (max-width: 639px) {
  /* Styles for small phones and devices */
}

Typically these breakpoints are used indirectly, through the grid system and other components, however they can also be used manually. This is useful where you aren't using the grid system, or, in cases where you are integrating with existing code or a third party system.

// Styles for extra-small devices, or above
.foo {
  padding: 10px;
}

// Additional styles for medium devices, or above
.foo {
  @screen md {
    padding: 20px;
  }
}

The above would get processed to:

.foo {
  padding: 10px;
}

@media (min-width: 768px) {
  .foo {
    padding: 20px;
  }
}

Use the .float-left and .float-right classes to float content. .float-start and float-end will work too.

See here for the differences: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/float

<div class="h-20">
  <div class="float-left bg-blue-300 p-2 rounded">
    <p>123</p>
  </div>
</div>

<div class="float-right h-18 bg-blue-300 p-2 mb-2 rounded">
  <p>123</p>
</div>

Apply width to the element and use mx-auto to centre a block horizontally.

<div class="h-20">
  <div class="mx-auto w-10 bg-blue-300 p-2 rounded">
    <p>123</p>
  </div>
</div>

Use the clear-<> classes to remove the effects of float-*

Tailwind CSS clear documentation

With:

123

<div class="float-right h-18 bg-blue-300 p-2 mb-2 rounded">
  <p>123</p>
</div>
<p class="clear-right bg-blue-300 p-2 rounded">123</p>

Without:

123

<div class="float-right h-18 bg-blue-300 p-2 mb-2 rounded">
  <p>123</p>
</div>
<p class="bg-blue-300 p-2 rounded">123</p>

Tailwind CSS visibility documentation

Visible

An element which can be seen by everyone, and which affects page layout

Invisible

An element which cannot be seen by anyone, but which still affects page layout

Collapse

To hide rows in tables as if they were set to `display: none`, but without impacting the other rows in the table

Hidden

Remove an element from the document

Screen reader only

An element which can only be seen by assistive technologies such as screen readers, and which does not affect the page layout

Response visibility classes are the same as in Tailwind CSS 4: https://tailwindcss.com/docs/visibility#responsive-design

• title: Visibility

For content that needs to be be printed use the .print classes: https://tailwindcss.com/docs/hover-focus-and-other-states#print

<div>
  <article class="print:hidden">
    <h1>My Secret Pizza Recipe</h1>
    <p>This recipe is a secret, and must not be shared with anyone</p>
    <!-- ... -->
  </article>
  <div class="hidden print:block">Are you seriously trying to print this? It's secret!</div>
</div>

See the visibility examples for testing which classes are visible under different circumstances.