CSS reference - Bifrost

Automatic columns

Basic usage

.bf-autocol renders its children as (minimum) 300px wide columns with a 12px gap by default.
Resize your window to test column behavior at different sizes.

<div class="bf-autocol">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<div class="bf-autocol">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

Custom width and gap

Custom css property --bf-autocol-width controls column width, set to 500px here.
gap can also be overridden (if you prefer, var(--bfs8) can be used in place of 8px):

<style>
  /* move this to a css file */
  .my-element {
    --bf-autocol-width: 500px;
    gap: 8px;
  }
</style>

<div class="bf-autocol my-element">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>
<style>
  /* move this to a css file */
  .my-element {
    --bf-autocol-width: 500px;
    gap: 8px;
  }
</style>

<div class="bf-autocol my-element">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Element

You can change the default column and gap size for a container (or your entire app by selecting body instead) in your CSS:

/* applies to all .bf-autocol instances inside a .my-container wrapper */
.my-container {
  --bf-autocol-width: 250px;
  --bf-autocol-gap: 8px;
}

/* the above alone should work fine for any screen size,
but you can also specify larger values for xxl+ screens */
@media (min-width: 1920px) {
  .my-container {
    --bf-autocol-width: 350px;
    --bf-autocol-gap: 24px;
  }
}
/* applies to all .bf-autocol instances inside a .my-container wrapper */
.my-container {
  --bf-autocol-width: 250px;
  --bf-autocol-gap: 8px;
}

/* the above alone should work fine for any screen size,
but you can also specify larger values for xxl+ screens */
@media (min-width: 1920px) {
  .my-container {
    --bf-autocol-width: 350px;
    --bf-autocol-gap: 24px;
  }
}

Sandbox

Resize the window to see media queries in action (might help to open sanbox in full screen?)

<link rel="stylesheet" href="https://unpkg.com/@intility/bifrost-css@latest/dist/bifrost-all.css" /><link rel="stylesheet" href="styles.css" />

<div class="bf-autocol my-container bf-padding">
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
  <div class="bfc-base-3-bg bf-padding">Element</div>
</div>

Open Sandbox