Image grids, layout options and new focus mode
I'm very excited about this update because it includes lots of new options that help you format complex notes with data-heavy tables or many images. This might be my favorite release to date!
Minimal 4.2 includes new CSS helper classes that build on Minimal 4.1.7 which contained options for styling rows and columns in tables.
TLDR
- New Layout settings available in Minimal Theme Settings
- CSS helper classes
- Image grids
- Wider tables, images and iframes
- Seamless embeds/transclusions
- Improvements to wide tables on mobile, now scroll horizontally without disrupting the position of text elements
- Revamped focus mode
- New border option for note titles
- New hotkeys
- Increase/decrease body font size
- Focus mode
- Toggle image grids
- Cycle image width
- Cycle table width
- Cycle embed width
- Fixed Vim mode cursor
Note that many new features in this update require the latest version of the Contextual Typography plugin. More details below.
If you enjoy Minimal consider supporting development at Buy me a coffee ☕️
Image grids
Image grid started as a snippet I developed a year ago, but became obsolete due to a change in Obsidian. I am excited to say it's back thanks to Contextual Typography — and it works just like before. Any old notes you have that use the img-grid class should now work again. You can also turn on image grids by default.
Image grids are super easy to use, and don't rely on any special syntax. All you do is add an extra line break between images to create a row, and columns take care of themselves.
| Class | Description |
|---|---|
img-grid
| Turns consecutive images into columns. To make a new row, add an extra line break between images |
Line width control for tables, images and iframes
If you use tables and/or Dataview extensively, you know how challenging it can be to choose a subset of columns that will fit nicely within the line width of your note. Alternatively you can can sacrifice the "Readable line length" setting to give yourself more space, but what if you could have the best of both worlds?
These new options allow you to define the line width per element type. Tables, images, and iframes can now flow outside of the normal line width, to fill more space. You can choose this per element type and per note — and in the future Dataview may add the ability to do so on a per table basis. (See Dataview issue 675)
| 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 |
This update also makes it much easier to navigate wide tables on your mobile devices. Tables now scroll horizontally independently so it doesn't cause your whole note to shift, nor does it squeeze table contents into unreadably narrow columns.
I have also shared a dev mode snippet that you can use to see your breakpoint settings.
Focus mode improvements
One of my goals with Minimal is to consistently strive for a more focused editing experience. When Focus Mode is activated, the title bar and status bar fade away and are only displayed when you hover over that area.
You can now set a Focus Mode hotkey and activate it via the command palette.
New embed helper class
A new helper class is available for transclusions that removes borders, padding and title to make them feel seamlessly integrated into the note.
| Class | Description |
|---|---|
embed-strict
| Transclusions appear seamlessly in the flow of text |
That's all folks! Happy holidays 🎅
Thanks to @mgmeyers for help adding to Contextual Typography