What are modular pages?

The term “modular pages” refers to pages that are constructed by stacking multiple modules on top of each other like building blocks. In Prismic, these modules are referred to as “slices”. By mixing and matching an array of slices, a content manager can create a nearly infinite amount of custom page layouts w/o requiring a developer/designer (d/d). For content-heavy sites, this approach saves a considerable amount of time for d/d. A d/d simply needs to build/design each slice as a standalone component rather than developing/designing every page of the site. …

Sites like Amazon and Aesop use nested navigation as a way to present a lot of information to users in a hierarchical way. Building navigation menus like this can be challenging, to say the least, but it seems clear that this UX pattern is effective since some of the largest companies in the world are utilizing it to structure their content.

In order to make this sort of pattern a bit simpler to develop, I’d like to introduce React Nested Nav:

Repo: https://github.com/UseAllFive/react-nested-nav
Demo: https://useallfive.github.io/react-nested-nav/

React Nested Nav offers a React component called NestedNav that you can easily add to any part of your site to inject a nested navigation menu. For example, you may want to add the nested nav into a sidebar that’s revealed when a hamburger is clicked. …

Introduction

I’ve created a small JavaScript module that you can import into your projects to visualize CSS grids while developing. This is similar to how Sketch and other design tools allow designers to view/hide layout grids. The hope is that this will make our jobs a little easier, encourage the use of CSS grids, and ultimately lead to more beautiful websites. In the following post, I will:

1. Walk you through how to use the library
2. Drill into the code a bit to explain how it works

Getting Started

First, a note regarding in which situations this module will prove handy:
At the moment, and for the foreseeable future, CSS Grid Guides are only meant to be used by sites that handle grids in the same way they are handled in applications like Sketch or Figma. That is to say, this library assumes you’re using a CSS grid property called grid-template-columns and repeating X amount of columns with an equal gap between them. As an example, this is what a typical 12 column grid looks like that will play very nicely with this…

Note: The word “orphan” and “widow” often get used interchangeably. For this article, “orphan” will be used but one can refer to them however they like.

TL;DR

Use the NYT text-balancer where appropriate

What’s an orphan?

…A word, part of a word, or very short line that appears by itself at the end of a paragraph. Mnemonically still “alone at the bottom”, just this time at the bottom of a paragraph. Orphans of this type give the impression of too much white space between paragraphs.*

To put it more succinctly, a typographic orphan refers to the last word(s) in a block of text, which occupies its own line. …

Summary

In this article, I’ll walk you through a WebVR framework called A-Frame by building a 100 mph fastball simulation. I won’t bother going into the detail of every aspect of the experience but I will highlight a couple of aspects that I found educational. We’ll start by building a basic baseball field. Then, we’ll explore animating a baseball from the pitcher’s mound to home plate. This post is merely meant to augment the official docs. It’s highly recommended that you read through those docs before/after reading this for a more well-rounded explanation of the framework and all its features.

Primitives

In A-Frame, “primitives” are basic shapes that come with the framework. For example, a sphere, cylinder, plane, box, etc. Using these basic shapes, we can build almost any structure. To build this simulation, for instance, we’ll be using just two: The sphere and the plane. The sphere will be used for the mound and the baseball and the plane for everything else: bases, infield, and outfield. To illustrate, let’s look at how the ball is…

The case for using one CSS grid for your entire website

CSS Grid vs Flexbox

In the dark ages, we used table, a few years ago we used float and before today most of us used flex . Of course, these older technologies still serve a purpose but when it comes to good old fashioned layout, CSS grid is where it’s at.

Examples (JSX)

A simple three-column grid in flexbox with 20px gap and 30px of gutter on the left and right:

There are a few annoying things that we have to do to accomplish this. Do you see them?

1. Negative margins on the parent to account for the padding on the left/right of the first/last columns. …