Bullet Journal Layout with CSS Grid, Subgrid & Flexbox

29 December 2019 This is a post about how I built my bullet journal demo that you can find over here. My bullet journal layout is pretty simple compared to some of the more elaborate, colorful and playful layouts I’ve seen. I mainly use my bullet journal to track a few monthly goals, bills, my weekly tasks and my schedule. My work calendar can become full of non-blocking “Office Hours” and tech talks that I may or may not have time to go to. Basically: digital calendar clutter can muddy my view of the week, and, perhaps it’s the designer in me, I prefer to keep some sort of hand written view of my week. (And also practice my hand-lettering. Like I said: designer.) Here is what my actual bullet journal looks like, but the bottom half layout can vary as I usually track the bills due between the 1st and the 15th on the first weekly spread, and the bills due on the 16th and the end of the month on the third weekly spread. This layout only has my meal plan section and weekly to-do. From the image above you can see that the layout varies below the daily time tables. Defining the grid # First, I defined the grid layout I wanted for the whole page. There was no real math behind this, I visually assessed and re-adjusted the grid based on the content I knew I’d be filling in and then went from there. .grid-container { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-template-rows: repeat(auto-fit, minmax(5rem, 10rem)); } For the columns, I wanted to be able to expand the entire layout to fit onto one row if the viewport width was large enough but still wrap cleanly onto new lines if the viewport was small, like on a phone screen. I used repeat and auto-fit to expand into any available space, and the columns are set to be a minimum of 10rem wide so that the timetables don’t get too narrow, and a max of 1fr so that columns are flexible. To tackle the building the rest of the journal, I divided it into major sections: The “Day Grid”: the entire weekThe week layout grid will then breakdown into individual days and hoursThe meal planMy to-do listA note on auto-fill vs. auto-fit # There are lots of resources available on auto-fill vs. auto-fit. Sara Soueidan and Rachel Andrew have some useful write-ups already: The Day Grid #.day-grid { display: grid; grid-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); grid-template-columns: subgrid; grid-column-start: 1; grid-column-end: 8; grid-row-start: 1; grid-row-end: 6; } Here I define the grid for the daily timetable columns. I also want this to utilize CSS Grid and I want the columns to inherit their sizing from the parent grid, so I use subgrid. But subgrid isn’t supported in all browsers yet so I re-define the template columns from the parent grid. I define where I want the day grid to sit on the parent grid with grid-column-start, grid-column-end, grid-row-start, grid-row-end. Now let’s dive into the individual column layout. Each day is defined as an <article> and I’ve defined a grid for each day column. article { display: grid; grid-template-columns: 2.5rem 1rem 1fr; grid-template-rows: repeat(12, minmax(2rem, 1fr)); } The columns are divided up into three sub-columns: the time, the busy block or the fill pattern to indicate a block, and the content container to write the activity for that time block. These columns are set at 2.5rem wide, 1rem wide, and 1fr to use up the remaining space since the content in the third column will vary…

Like to keep reading?

This article first appeared on blog.stephaniestimac.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply