[03 - styled system, variants, overrides]

June 28, 2020

Styled System offers some robust tools to build out a themeable component library based on design tokens simply by using a unified theme object. In this post, I want to think about how to set up reusable component variants -- components that are functionally the same but visually different -- and how to override these default values when necessary.

read more...

  • tags:
  • design system,
  • override,
  • styled components,
  • styled system,
  • variants

In finalizing the current version of my portfolio, I wanted to offer a dark mode toggle as a proof of concept, practice working with emotion.js, and just for usability because my blog and portfolio are so light. To implement this, I utilize a toggle component to control state, emotion.js's <Global /> styles to inject some styles at :root, and browser supported variables to change everything from font color to backgrounds to link colors.

read more...

  • tags:
  • coding,
  • dark mode,
  • gatsby,
  • react,
  • themes

Programmatically generating menus is a difficult concept at first because it seems simple enough just to hard code your menu into a component. However, making a reusable and data agnostic menu component is really easy and can travel with you from project to project. Here, I want to outline two approaches to generating menus from your data. The first involves defining menu items in markdown frontmatter, which can be useful when designing sites for folks less familiar with javascript or coding more generally. The second is an iteration on the current Gatsby documentation that skips using GraphQL fragments in favor of a meta config file.

read more...

  • tags:
  • coding,
  • gatsby,
  • menu,
  • navigation,
  • react

[00 - blog relaunch]

January 02, 2019

My personal website, inadequate futures, has been rewritten a total of three times. I was inspired to pick html and css back up after learning about static site generators, specifically Jekyll, after reading about Alex Gil's 'Ed' theme for minimal editions (I am in the process of porting this over to Gatsby. More on that at the end of this post). The first version of the site was launched about a year ago on GitHub pages with the help of Hugo, which quickly shifted my focus from building my website back towards the world of frontend development. Not long after launching 'if-ver01,' I started reading about the JAMStack and React, which offered what seemed like a robust alternative for turning markdown files into blog posts.

read more...

  • tags:
  • coding,
  • frontend,
  • gatsby,
  • javascript