COVID19 Lockdown Dev Log – Day 5

What I Worked On

Continued from where I left off yesterday. Tried working with styling of SVGs for the second section of my portfolio.

What I Learned

While styling the portfolio using Bulma, I found myself needing some “spacing” helper-classes (margin and padding classes). I have used that with Bootstrap and they are really handy for applying consistent and easy spacing in your design.

/* In Bootstrap 'pt-2' adds padding to the top of 
your element. 2 is the amount of padding predefined by Bootstrap */
<div class="container pt-2">
...some code
</div>

Unfortunately Bulma does not have that, so I had to make some custom styles myself. It’s not that there is anything wrong with that, but I would like to keep the custom CSS classes to a minimum.

I learned that using images with Gatsby, the recommended approach is to import them like a module (unless you have 1000+ pictures). Importing them as a module is done like so (codesnippet from a my ‘card.js’ component):

//card.js

import React from "react";
import PlaceholderImg from "../assets/img/placeholder-project.jpg";

export default () => (
<div className="project-container">
  <img src={PlaceholderImg} alt="project" className="image custom-img" />
</div>
...some more code
)

The alternative approach is to add them in a ‘static’ folder that you create in your root of the project and then reference them from there like so:

<img src="./assets/img/image-1.png" />

What Distracted Me During The Day

• HK
• A cool desk I once bookmarked. Opened the bookmark while looking for another bookmark 😀 https://thegadgetflow.com/portfolio/tabula-sense-smart-desk/
• Video chat with a school buddy of mine from Romania

Resources

• Bootstrap helper classes https://getbootstrap.com/docs/4.4/utilities/spacing/
• Importing static assets in Gatsby: https://www.gatsbyjs.org/docs/importing-assets-into-files/
• Bulma lacking spacing helper classes https://github.com/jgthms/bulma/issues/451