A pair of glasses in the foreground focus to reveal machinery in the ocean in the background
A pair of glasses in the foreground focus to reveal machinery in the ocean in the background
Photo by Elena Taranenko on Unsplash

Accessibility is quickly becoming one of the most important aspects of the way we use the web, if not the most important. Just between 2017 and 2018, the number of federal court cases regarding web accessibility nearly tripled, signifying the trend of accessibility becoming more and more important to users. In response, it will have to be important to website owners as well.

With all this in mind, it’s hard to believe that over 98% of sites on the web are inaccessible according to the WCAG (Web Content Accessibility Guidelines). …

I recently watched an excellent lecture by Marcy Sutton on accessibility in JavaScript applications on Frontend Masters.

Marcy Sutton is currently the Lead Software Developer at Gatsby (one of my favorite tools for building fast modern web apps) and she has been a professional in accessibility for quite some time. She was a Developer Advocate on the axe-core team and she was an Accessibility Engineer at Adobe.

Her lecture takes you through the many different ways that accessibility affects the work we do as JavaScript developers, such as the importance of testing and how to build accessible components. …

In the fifth and final part of this pattern library tutorial, we’re going to build a card view for our homepage. Then we’ll create a React context that will control whether the list on the homepage is displaying the list view or the card view.

Create Card-View

We’re going to start by building the component for our card view. Go ahead and create a new file in the src/components/ directory called card-view.js. …

In this portion of the tutorial, we are going to build a searchable list that the user can select patterns from. To do this we’ll need to install a new plugin, and use that plugin to build a wrapper that will ultimately hold our search bar and list of patterns.

Elasticlunr Plugin

Elasticlunr is a lightweight search engine built in JavaScript. We are going to be using it via a Gatsby plugin called @gatsby-contrib/gatsby-plugin-elasticlunr-search. So the first thing to do is install that plugin. …

In this tutorial we will configure Gatsby to automatically generate a page for each of our patterns and we’ll create a template that Gatsby will use to render those pages.

Modify Gatsby-Config

The first thing we need to do is install a new package. Our Gatsby project needs a plugin to allow GraphQL to recognize the pattern markdown files that are created and stored on our repo by Netlify-CMS. …

In this part of the tutorial we’re going to deploy our application to Netlify, set up our Netlify-CMS backend, and create our first pattern!

Deploying to Netlify

First things first, to make sure that things are actually working when we start to set up our Netlify-CMS backend, we need to deploy the repo we created in Part 1 to Netlify.

Make your way to (netlify.com) and login, or sign up with your GitHub account if don’t already have a Netlify account. Once you’re logged in you should see a button that says “New site from Git”. That will bring you to a page where you choose which Git provider your project is hosted on. For us that will be GitHub, so click GitHub and you should be greeted with a page that looks like…

In this first part of the tutorial, we will begin by setting up your Gatsby project, saving it to a repo, and setting up the basic layout for the application.


This tutorial is written with the assumption that you have some experience with Reactjs. …

Image for post
Image for post
Photo by Andrew Ridley on Unsplash

What is pattern-lib?

An open source pattern library built with Gatsby that uses Netlify-CMS as its backend.

What is a pattern library?

A pattern library is a collection of user interface (UI) patterns with guidelines on how to design and develop with each pattern.

Reference: Anatomy of a Pattern in a Pattern Library — Brad Frost

What’s the purpose of pattern-lib?

Pattern-lib enables designers to create and deploy their own pattern libraries to the web:

  • Designers may not have the resources to build and deploy their own pattern library easily.
  • A pattern library may help Evangelize design principles and systems within an organization and may speed up day-to-day design & development workflow.
  • This product is free and open-source. …


Marcello Paiva

I am a front-end web developer with a passion for accessibility!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store