FAQ #

Grids #

Kolibry, being web-based, allows for the application of various grid layouts, including CSS Grids and flexboxes.

How to access UnoCSS:

<div class="grid grid-cols-2 gap-4">
<div>

The first column

</div>
<div>

The second column

</div>
</div>

Go further, you can customize the size of each column like:

<div class="grid grid-cols-[200px_1fr_10%] gap-4">
<div>

The first column (200px)

</div>
<div>

The second column (auto fit)

</div>
<div>

The third column (10% width to parent container)

</div>
</div>

Learn more about Windi CSS Grids.

Positioning #

Slides are defined in fixed sizes (default 980x552px) and scale to fit with the user screen. You can safely use absolute position in your slides as they will scale along with the screen.

For example:

<div class="absolute left-30px bottom-30px">
This is a left-bottom aligned footer
</div>

To change the canvas' actual size, you can pass the canvasWidth options in your first frontmatter:

---
canvasWidth: 800
---

Font Size #

If you feel the font size in your slides are too small, you can adjust it in a few ways:

Override Local Style #

You can override styles for each slide with the inlined <style> tag.

# Page 1

<style>
h1 {
  font-size: 10em;
}
</style>

---

# Page 2

This will not be affected.

Learn more: Embedded Styles

Override Global Style #

You can provide custom global styles by creating ./style.css, for example

/* style.css */ 

h1 {
  font-size: 10em !important;
}

Learn more: Global Style

Scale the Canvas #

Changing the canvas' actual size will scale all your contents(text, images, components, etc.) and slides

---
# default: 980
# As the canvas size decreases, the visual size will appear larger.
canvasWidth: 800
---

Use Transform #

We provide a built-in component <Transform />, which is a thin wrapper of CSS transform property.

<Transform :scale="1.4">

- Item 1
- Item 2

</Transform>