Layout
We have mentioned layouts before: Blokks supports columns, rows and custom layouts.
Each layout has different styles that are injected to the <head> of your document. The styling is minimal and won’t conflict with your website. Also, styles are added after the schedule is loaded, so it doesn’t effect your initial pageload.
Using a custom layout is useful when you want to create your own theme. Setting the data-layout to custom will strip all layout properties from the schedule, giving you a clean slate.
Note: Blokks automatically switches to a mobile layout when viewed on smaller devices. The breakpoint is 30em or 480px. You can change this value by setting data-breakpoint.
| Option | Values | Default value |
|---|---|---|
data-breakpoint |
string | 30em |
data-layout |
columns rows custom |
columns |
Example
<script defer src='[path-to-embed]'
data-blokks-id='[schedule-id]'
data-breakpoint='20em'
data-layout='columns'>
</script>