assorted-css-snippets

Snippets that I have made or borrowed and modified for my own use.

How to use snippets

Contents

• Image Grids and Floats
  • Left and Right Figcaptions
• Kanban
• Obsidian Tabs

Image Grids and Floats

Get the snippet

Demo

Description

Credit goes to lithou

Allows images to be displayed side by side, as well as allowing text to wrap around images. Consider also using the Left and Right Figcaptions snippet.

Usage

When linking to an image, |grid makes it display side by side with other images on the same line with the |grid marker.

|left makes an image float to the left |right, to the right, and |centre centres an image.

You can still specify an image's width by adding another pipe sign with an image's desired pixel width. ![[Test.png|left|200]] Embeds an image which allows text to wrap around it, and is 200 pixels wide.

Left and Right Figcaptions

Get the snippet

Demo

Description

Extends the Image Grids and Floats snippet. Allows a left or right floated image to have a caption beneath it.

Usage

Insert the following one line break beneath an image.

<i class="figcaption" id="left/right/centre/center" style="width:200px">CAPTION HERE.</i>

For example:

![[example_image.png|left|200]]
<i class="figcaption" id="left" style="width:200px""></i>

Place left, right, or centre/center in the id field, depending on the positioning of the image it is paired with. The width of the caption must match the width of image.

If the figcaption is not placed beneath a floating image, you can omit the id and style fields.

Kanban

Get the snippet

Demo

Description

Credit goes to Manedblackwolf who created the kanban snippet for her Spectrum theme.

Turns all unordered lists in a designated document into a kanban 'table'. Unindented entries become headers for new columns. Indented children become rows under their parent entries.

Kanbans also allow you to transclude documents side by side.

Usage

To use kanbans, the following must be at the top of a document. Afterwards, all unordered lists within that document will be turned into kanbans.

---
cssclass: kanban
---

Obsidian tabs

Get the snippet

Description

A way to approximate tabs through CSS, including split view. Made for usage in unison with the pane relief plugin.