Fluid UI Documentation

Appearance

Utilities ​

Besides spacers, typography and color Fluid UI contains other CSS functional classes.

.rounded ​

Use .rounded for default border-radius style.
Border radius related variables are defined in ./settings/global.scss

SCSS
  --g-rounded-50: var(--g-spacer-50);
  --g-rounded-100: var(--g-spacer-100);
  --g-rounded-200: var(--g-spacer-200);
  --g-rounded-300: var(--g-spacer-300);
  --g-rounded-400: var(--g-spacer-400);
  --g-rounded-500: var(--g-spacer-500);
  --g-rounded-full: 9999px;
  --g-rounded: var(--g-spacer-100);
  --g-rounded-50: var(--g-spacer-50);
  --g-rounded-100: var(--g-spacer-100);
  --g-rounded-200: var(--g-spacer-200);
  --g-rounded-300: var(--g-spacer-300);
  --g-rounded-400: var(--g-spacer-400);
  --g-rounded-500: var(--g-spacer-500);
  --g-rounded-full: 9999px;
  --g-rounded: var(--g-spacer-100);

List of all classes:

Classborder-radius
rounded-50var(--g-spacer-50)
rounded-100var(--g-spacer-100)
rounded-200var(--g-spacer-200)
rounded-300var(--g-spacer-300)
rounded-400var(--g-spacer-400)
rounded-500var(--g-spacer-500)
rounded-full9999px

.shadow ​

Use .shadow for default shadow styles.
Shadow related variables are defined in ./settings/global.scss

SCSS
  --g-shadow-100: 0 0 var(--g-spacer-100) var(--g-gray-200);
  --g-shadow-200: 0 0 var(--g-spacer-200) var(--g-gray-200);
  --g-shadow-300: 0 0 var(--g-spacer-300) var(--g-gray-300);
  --g-shadow-400: 0 0 var(--g-spacer-400) var(--g-gray-400);
  --g-shadow-500: 0 0 var(--g-spacer-500) var(--g-gray-500);
  --g-shadow: var(--g-shadow-200);
  --g-shadow-100: 0 0 var(--g-spacer-100) var(--g-gray-200);
  --g-shadow-200: 0 0 var(--g-spacer-200) var(--g-gray-200);
  --g-shadow-300: 0 0 var(--g-spacer-300) var(--g-gray-300);
  --g-shadow-400: 0 0 var(--g-spacer-400) var(--g-gray-400);
  --g-shadow-500: 0 0 var(--g-spacer-500) var(--g-gray-500);
  --g-shadow: var(--g-shadow-200);

List of all classes:

ClassShadow sizeShadow color
shadow-100var(--g-spacer-100)var(--g-gray-200)
shadow-200var(--g-spacer-200)var(--g-gray-200)
shadow-300var(--g-spacer-300)var(--g-gray-300)
shadow-400var(--g-spacer-400)var(--g-gray-400)
shadow-500var(--g-spacer-500)var(--g-gray-500)
shadowvar(--g-spacer-100)var(--g-gray-200)

.border ​

Use .border for default border styles: width, type and color.
Border related variables are defined in ./settings/global.scss

SCSS
  // Borders
  --g-border-width: 1px;
  --g-border-color: var(--g-gray-200);
  --g-border-radius: var(--g-rounded);
  --g-border: var(--g-border-width) solid var(--g-border-color);
  // Borders
  --g-border-width: 1px;
  --g-border-color: var(--g-gray-200);
  --g-border-radius: var(--g-rounded);
  --g-border: var(--g-border-width) solid var(--g-border-color);

Definition of .border class in ./utilities/border.scss

SCSS
.border {
  border: var(--g-border);
}
.border {
  border: var(--g-border);
}

.wrapper ​

Similarly to Bootstrap .container class but... without breakpoints.

SCSS
.wrapper {
  position: relative;
  width: clamp(16rem, var(--g-wrapper-max-width, 85rem), 85rem);
  margin-inline: auto;
  padding-inline: var(--g-spacer-100);
}
.wrapper {
  position: relative;
  width: clamp(16rem, var(--g-wrapper-max-width, 85rem), 85rem);
  margin-inline: auto;
  padding-inline: var(--g-spacer-100);
}

.flow ​

Known as Axiomatic CSS and Lobotomized Owls help us to keep the rhythm of layout by adding margin-top.

SCSS
.flow > * + * {
  margin-top: var(--g-gutter, 1em);
}
.flow > * + * {
  margin-top: var(--g-gutter, 1em);
}

You can use .flow class Additionally use it with .prose to style rhythm in static text content - see /99-utilities/_prose.scss.

SCSS
.prose {
  p,
  ul {
    --g-flow-spacer: var(--g-spacer-300);
  }

  h1 {
    --g-flow-spacer: var(--g-spacer-700);
  }

  h2 {
    --g-flow-spacer: var(--g-spacer-600);
  }

  h3,h4,h5 {
    --g-flow-spacer: var(--g-spacer-500);
  }
}
.prose {
  p,
  ul {
    --g-flow-spacer: var(--g-spacer-300);
  }

  h1 {
    --g-flow-spacer: var(--g-spacer-700);
  }

  h2 {
    --g-flow-spacer: var(--g-spacer-600);
  }

  h3,h4,h5 {
    --g-flow-spacer: var(--g-spacer-500);
  }
}

.custom-scrollbar ​

You can change the look of scrollbar by setting variables

SCSS
--g-scrollbar-size: 4px;
--g-scrollbar-radius: 2px;
--g-scrollbar-color: var(--g-gray-900);
--g-scrollbar-bg: var(--g-gray-300);
--g-scrollbar-size: 4px;
--g-scrollbar-radius: 2px;
--g-scrollbar-color: var(--g-gray-900);
--g-scrollbar-bg: var(--g-gray-300);

and using a g-custom-scrollbar() mixin inside a CSS selector.

🔔 Use it only when you HAVE TO

It's not recommended UX pattern to customize scrollbar.

.hstack & .vstack ​

Vertical and horizontal stacks.

SCSS
// Horizontal stack
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

// Vertical stack
.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}
// Horizontal stack
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}

// Vertical stack
.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}

.grid-center ​

Basic "center all" container.

SCSS
.grid-center {
display: grid;
place-items: center;
}
.grid-center {
display: grid;
place-items: center;
}

display ... ​

There are many basic flex and grid related classes similarly to Bootstrap e.g. .d-flex, .d-grid etc.

ClassProperty
d-nonedisplay: none;
d-inline-blockdisplay: inline-block
d-blockdisplay: block
d-ine-flexdisplay: ine-flex
d-flexdisplay: flex
d-inline-griddisplay: inline-grid
d-griddisplay: grid

flex ... ​

There are many basic flex related classes similarly to Bootstrap e.g. .justify-content-between, .flex-wrap etc.

Justify content

ClassProperty
justify-content-startjustify-content: flex-start;
justify-content-endjustify-content: flex-end;
justify-content-centerjustify-content: center;
justify-content-betweenjustify-content: space-between;
justify-content-aroundjustify-content: space-around;

Align items

ClassProperty
align-items-startalign-items: flex-start;
align-items-endalign-items: flex-end;
align-items-centeralign-items: center;
align-items-baselinealign-items: baseline;
align-items-stretchalign-items: stretch;

Align self

ClassProperty
align-self-startalign-self: flex-start;
align-self-endalign-self: flex-end;
align-self-centeralign-self: center;
align-self-baselinealign-self: baseline;
align-self-stretchalign-self: stretch;

Align self

ClassProperty
align-self-startalign-self: flex-start;
align-self-endalign-self: flex-end;
align-self-centeralign-self: center;
align-self-baselinealign-self: baseline;
align-self-stretchalign-self: stretch;

flex-*

ClassProperty
flex-grow-1flex-grow: 1;
flex-shrink-0flex-shrink: 0;
flex-columnflex-direction: column;
flex-rowflex-direction: row;
flex-wrapflex-wrap: wrap;
flex-nowrapflex-wrap: nowrap;