masonry-vanilla

This theme applies the Masonry layout to a Vanilla / Plain Roam Graph (i.e., no other CSS required).

vanilla-masonry-1

How to Install

Simply add a CSS code block onto your roam/css page and copy the following into it (you can choose whether to include Optional-1 and Optional-2):

/* MAIN CSS - Required */
@import url('https://gitmurf.github.io/masonry-vanilla/masonry-main.css');

/* OPTIONAL 1 - Some additional options on top of Vanilla that Murf uses */
@import url('https://gitmurf.github.io/masonry-vanilla/masonry-optional-1.css');

/* OPTIONAL 2 - More customized formatting to Murf's liking (still Roam Vanilla base though) */
@import url('https://gitmurf.github.io/masonry-vanilla/masonry-optional-2.css');

To customize any of the main settings / colors, add the following UNDERNEATH the @import lines from above and modify accordingly:

:root {
    --main-left-bg: white;
    --right-sidebar-bg: rgb(247 248 249);
    --right-sidebar-drag-bg: #337ac6;
    --masonry-bg: white;
    --masonry-scrollbar-bg: lightgrey;
    --masonry-resizer-color: lightgrey;
    --masonry-startWidth: 550px; /* DEFAULT: 550px; Use "unset" to prevent loading in grid like format */
    --masonry-minWidth: 440px;
    --masonry-maxWidth: 1200px;
    --masonry-startHeight: 234px; /* DEFAULT: 243px; Use "unset" to prevent loading in grid like format */
    --masonry-minHeight: 200px;
    --masonry-border: 1px solid lightgrey;
    --closed-bullet-color: 4px solid #CED9E0;
    --code-color: crimson;
    --block-widths: 800px; /* Roam native: 800px; Murf's favorite: 1500px; Full screen: 3400px; */
}

It should look like this:

vanilla-masonry-code-block-example

FULL DEMO

Masonry.demo-output-3.mp4


WANT MASONRY WITH A DARK THEME? Try Abhay’s Dracula Pro!

Instructions here –> https://roamresearch.com/

Dracula-Pro-Masonry

OPTIONAL roam/js Scripts

Toggle sidebar full page width scrolling

var tfps = document.createElement("script");
tfps.type = "text/javascript";
tfps.src = "https://gitmurf.github.io/masonry-vanilla/JS/toggleFullPageScroll.js";
document.getElementsByTagName("head")[0].appendChild(tfps);

Toggle left window

Andy Matuschak mode with full height and toggles different sidebar widths with page widths

var mms = document.createElement("script");
mms.type = "text/javascript";
mms.src = "https://gitmurf.github.io/masonry-vanilla/JS/matuschakModeSizer.js";
document.getElementsByTagName("head")[0].appendChild(mms);

Andy Matuschak mode

Contributions / Inspiration

First and foremost I must give credit where credit is due (inspiration for Vanilla Masonry):

GitHub

View Github