DEV Community: Ian Gloude

4 Steps to Self-Hosted Fonts in Gatsby

Ian Gloude — Thu, 17 Oct 2019 22:53:56 +0000

I finally got around to setting up fonts for my site, but everywhere I looked were articles that overly complicated self-hosting fonts in Gatsby. Here's the easy 4-step process I used for my blog.

1 - place your font files in static/fonts/.
2 - create a fonts.css in the same directory and add your css font face rule(s). Mine looks like this:

        @font-face {
          font-family: "Lato";
          src: url("Lato-Regular.otf");
        }

        @font-face {
          font-family: "Dank Mono";
          src: url("DankMono-Regular.otf");
        }

3 - add gatsby-plugin-web-font-loader with either npm or yarn (don't forget to --save!).
4 - add the plugin to your gatsby-config.js inside the plugins array. Here's mine:

        {
          resolve: "gatsby-plugin-web-font-loader",
          options: {
            custom: {
              families: ["Lato, Dank Mono"],
              urls: ["/fonts/fonts.css"],
            },
          },
        },

That's it!

Hiding Things with CSS

Ian Gloude — Wed, 16 Oct 2019 00:52:00 +0000

There are a handful of ways to hide things using CSS, and each of them has its own strengths and potential drawbacks. Here's a list of the 5 most common ways to hide content, and a use case or two for each.

Display

display: none; or HTML hidden attribute

Removes element from visual flow, hiding it from both visual and AT (Assistive Technology) consumption
Does not transition

Use Case

Toggled, closed, or otherwise hidden elements that may be shown again.
Breakpoint-dependent elements like mobile & desktop menus

Opacity

Opposite of transparency, opacity: 1; is fully opaque, opacity: 0; is fully transparent.

Does not affect the element's position in the DOM flow, but a common gotcha here is an opacity value other than 1 puts the element in a new stacking context.
opacity applies to the whole element and any descendants, but is not inherited by the element's children.

Use Case

Temporarily hide elements, typically to fade in after a timeout or on a callback
Pair with another method to create a smooth transition of content in/out of the visual flow

Visibility

visibility: hidden;

Visually hidden, but still occupies the same space in the visual flow.
Unlike the display property, visibility is animatable. Pairs nicely with a short opacity transition when animating an element in.

Use Case

Hide an element without disrupting the visual flow.
Pair with DOM manipulation, like position: absolute; or overflow: hidden; height: 0; to enable transitions where display: none; would fall short.

ARIA

aria-hidden='true'

Hides from screen readers, but not visually.

Use Case

Visual-only elements that already have descriptive text
Redundant elements (all but one of mobile/tablet/desktop menus)

Clipping

Hides visually, but not to AT. A11y guidelines on this are an excellent description.

Use Case

Visually redundant elements already described in the DOM
Input labels made redundant by a visual overhaul using pseudo-elements

Things to Remember

All content hidden with CSS will become visible if styles are disabled.
Be careful not to hide the full functionality of your site from screen reader and/or keyboard-only users.

A Word on Sass @extend

Ian Gloude — Wed, 07 Aug 2019 14:13:43 +0000

@extend is a powerful SASS tool that helps keep your code nice and dry, but it can have drawbacks if used incorrectly. Calling @extend on a class or placehodler will add the extended class to the extending class' selector list. Take this example:

.message {
  border: 1px solid black;
  color: black;
  padding: 10px 5px;
}

.success {
  @extend .message;
  border-color: green;
}

.warn {
  @extend .message;
  border-color: yellow;
}

.fail {
  @extend .message;
  border-color: red;
}

We create a .message class, and extend it across a few more classes with only a change to the border-color. When compiled, we get:

.message,
.success,
.warn,
.fail {
  border: 1px solid black;
  color: black;
  padding: 10px 5px;
}

.success {
  border-color: green;
}

.warn {
  border-color: yellow;
}

.fail {
  border-color: red;
}

Great! We've got an extremely effecient, dry output. However, using @extend improperly can leave a massive trail of selectors you just don't need. For example:

.foo {
  .bar {
    .message {
      color: black;
      border: 1px solid black;
      padding: 10px 5px;
    }
  }
}

.baz {
  .buzz {
    .error {
      @extend .message;
      border-color: red;
    }
  }
}

Will result in:

.foo .bar .message,
.foo .bar .baz .buzz .error,
.baz .buzz .foo .bar .error {
  color: black;
  border: 1px solid black;
  padding: 10px 5px;
}

.baz .buzz .error {
  border-color: red;
}

Yikes. Is it even worth the trouble?

The real answer is...maybe? If you're running into selector issues, consider using a mixin instead. But if you totally understand how @extend works, and there's a use-case that stands out, great! Go for it! Otherwise, it may not be worth forcing into a stylesheet just for the sake of using it.

Simple Site Containers with CSS Grid

Ian Gloude — Tue, 06 Aug 2019 03:10:16 +0000

Every site needs a conainer of some sort. Here's a way to leverage CSS Grid to make pulling content in and out of your page's container a breeze. We'll be working toward replicating this example:

We've got a column of text, centered on the page, and a highlighted section with a full-width background and text that horizontally aligns with its other siblings.

The Container

To create a centered column for our content, we’ll need three columns in our parent grid. But before that, we need to invoke the dark, mystical power of CSS grid. Follow the spell closely: display: grid;

Got it? Great. Magic isn’t so hard after all.

The FR Unit

Next we need to understand another magical piece of CSS: the fr (fractional) unit. This unit’s value is the relationship between its fr value compared to all the children of its parent.

Example:

If we have a containing parent element that is 300px wide, a single child with a width of 1fr would also be 300px wide. Two children with a width of 1fr would be 150px each. One child with 1fr and a second child with 2fr would be 100px and 200px, respectively.

Minmax

The final building block we’ll use is minmax(). The function takes 2 parameters and works exactly like it sounds. Using minmax(10px, 100px) on a column would make it at least 10px wide, but no more than 100px wide.

We won't dive into it in this article, but combining minmax() with CSS Custom Properties is insanely satisfying.

Building the Columns

Use grid-template-columns explicitly assign columns to a grid element. To get a responsive layout, we'll put minmax() to work.

.container {
  grid-template-columns:
    minmax(1em, 1fr)
    minmax(0, 30em)
    minmax(1em, 1fr);
}

The code above creates three columns. The first and third are flexible between 1em and 1fr. The center column will be between 0 and 30em wide. In this case, if the viewport width is over 32em (1em + 30em + 1em). The first and third columns will take up an equal amount of the remaining space, creating a centered container.

Why not max-width: 30em; and margin: 0 auto; you might ask? Just hang on.

Naming Columns

We have 3 columns, and 4 column lines we can align content to. To contain an element inside the center column, we would add grid-column: 2 / 3; to a child of .container.

To simplify this, we can names to grid lines using the following syntax: [linename-start] and [linename-end]. Adding line names to our template results in:

.container {
  grid-template-columns:
    [viewport-start] minmax(1em, 1fr)
    [container-start] minmax(0, 30em) [container-end]
    minmax(1em, 1fr) [viewport-end];
}

Obedient Children

Now we can take our container's children and tell them where to live. And what to do. And when to go to bed.

.item--full {
  grid-column: viewport;
}
.item--contained {
  grid-column: container;
}

As you can probably guess, .item--full will span the width of all three columns, and .item--contained will span only the center column.

Inheritance

The final trick to our layout is aligning the content inside an element with the .item--full class. We’ll need to pass down the parent grid to the .item--full child.

.item--full {
  grid-column: viewport;
  display: inherit;
  grid-template-columns: inherit;

  > * {
    grid-column: container;
  }
}

Now, the .item--full class is a grid container of its own. Since it spans the full width of the parent grid, the resulting nested grid is essentially a carbon copy laid on top of its parent, with the addition of declaring grid-column: container; on every direct descendent.

Take a look at the final result:

Happy Gridding!