# Obsidian Minimal Theme CSS Helper Classes ## Metadata **Status**:: #x **Zettel**:: #zettel/fleeting **Created**:: [[2022-11-02]] **Parent**:: [[Obsidian User Guide]] ## Synopsis CSS helper classes can be added on a per-file basis using the `cssclasses` [YAML front matter key](https://help.obsidian.md/Advanced+topics/YAML+front+matter). These classes are composable, so you can include more than one to combine effects. For example, use the following code at the top of your file to enable cards layout: ``` --- cssclasses: cards --- ``` ### Image grids Turns consecutive images into columns. To make a new row, add an extra line break between images. [Learn more.](https://minimal.guide/Block+types/Image+grids) | Class | Description | | :------------- | :-------------------------------------------------- | | `img-grid` | Activate image grids | ### Line width control for tables, images and iframes Controls the width of elements by type. [Learn more.](https://github.com/kepano/obsidian-minimal/releases/tag/4.2.0) | Class | Description | | :-------------------------------------- | :------------------------------------ | | `table-100`, `img-100`, `iframe-100` | Fill 100% of the pane width | | `table-max`, `img-max`, `iframe-max` | Fill the max line width (default 88%) | | `table-wide`, `img-wide`, `iframe-wide` | Fill the wide line width | ### Cards Using `cards` transforms Dataview tables into cards that can be sorted using the [Sortable plugin](https://github.com/alexandru-dinu/obsidian-sortable). Compatible with table width classes. Note that `cards` must be present for the other classes to work. [Learn more.](https://minimal.guide/Block+types/Cards) | Class | Description | | :-------------------- | :----------------------------------------------- | | `cards` (required) | Set all Dataview tables to card layout | | `cards-align-bottom` | Align the last element of a card to the bottom | | `cards-cover` | Images are resized to fill the defined space | | `cards-16-9` | Fit images in cards to 16:9 ratio | | `cards-1-1` | Fit images in cards to 1:1 ratio (square) | | `cards-2-1` | Fit images in cards to 2:1 ratio | | `cards-2-3` | Fit images in cards to 2:3 ratio | | `cards-cols-1` to `8` | Force a specific number of columns (from 1 to 8) | ### Tables and Dataview Controls the row and column styling for tables. [Learn more.](https://github.com/kepano/obsidian-minimal/releases/tag/4.1.7) | Class | Description | | :-------------- | :-------------------------------------------------- | | `table-nowrap` | Disable line wrapping in table cells | | `table-wrap` | Force line wrapping in table cells | | `table-numbers` | Add row numbers to tables | | `table-tabular` | Use tabular figures in tables | | `table-small` | Use small font size in tables | | `table-tiny` | Use tiny font size in tables | | `table-lines` | Add borders around all table cells | | `row-lines` | Add borders between table rows | | `col-lines` | Add borders between table columns | | `row-alt` | Add striped background to alternating table rows | | `col-alt` | Add striped background to alternating table columns | ### Embeds and transclusions | Class | Description | | :------------- | :-------------------------------------------------- | | `embed-strict` | Transclusions appear seamlessly in the flow of text |