Cam N. Coulter — Graph Paper

Graph Paper Is Unmaintained

2021-11-09T20:12:00-08:00

Graph Paper was a good project for me. Working on this project taught me about HTML, Jekyll, RSS feeds, and Bootstrap. But I’m done with this project now, and I will no longer maintain or update it.

Now, if you want to fork Graph Paper to set up your own website, you’re still welcome to do so. I hope it’s helpful! You might want to consider updating Bootstrap to a newer version.

Even if you don’t want to fork Graph Paper, I think this project can still stand as a great reference for how to do cool things in Jekyll, like support Twitter cards, paginate your blog, and create custom RSS feeds.

Why?

I’ve learned a lot about web design and accessibility in the last year. I’ve come to really appreciate the simple power of Flexbox, Grid, and intrinsic web design. I have different standards for what good and accessible code looks like, and I’ve come to value vanilla HTML, CSS, and JavaScript over frameworks. Put all that together and frankly, I’m just not interested in using Bootstrap anymore.

I still like the idea of Graph Paper: a Jekyll website that I can quickly fork and use to set up a new site with. Sometime in the future, I may cycle back and create a Graph Paper 2.0: a website base with higher accessibility and design standards, written in vanilla HTML, CSS, and JavaScript.

Want to Take Over?

I’m also abandoning this project because, as far as I’m aware, this project hasn’t been useful to anyone else. If I’m mistaken, if you appreciate Graph Paper, you’re welcome to take over as maintainer.

If you want to update Graph Paper — to add new features or update to a newer version of Bootstrap — great! Fork Graph Paper (you’re welcome to keep the name or change it), and let me know. I’ll add a new blog post here pointing over to your site.

Accessibility Updates

2020-10-21T07:26:00-07:00

Over the summer, I’ve learned a lot more about web accessibility, and I realized that Graph Paper had some accessibility errors. So I conducted an accessibility audit on the project to the best of my abilities, logged the issues I found on GitHub, and then went about remediating those issues. Here are the issues I found and the changes I made.

I replaced a number of div elements with semantic sectioning elements, such as header, nav, main, section, and footer.

I updated the focus and hover styles for links so that they are more noticeable and more beautiful.

I added “skip to main content” links on each page.

I fixed several validation errors that I didn’t catch earlier.

I fixed heading levels on a number of pages. For example, there was one page with multiple h1 elements, and other pages where I skipped from an h2 element to an h4. I updated these so that there is only one h1 element per page, headings are used in a logical order, and Graph Paper doesn’t skip heading levels. For those places where I wanted an h2 element styled as an h4, I used Bootstrap’s h4 class to achieve that styling without confusing the semantic heading levels.

I also changed text colors so that the color contrast between text and it’s background is WCAG level AA conformant. By default, the color contrast between Bootstrap’s bg-light variable and Bootstrap’s primary variable (used for blue link text) is not WCAG AA conformant (a strange decision on Bootstrap’s part, methinks), so I updated the primary variable to a darker shade of blue that is conformant. Additionally, some of the colors used in our syntax highlighting stylesheet lacked sufficient contrast against the light gray background used for code blocks. While I can’t claim that I updated the entire syntax highlighting stylesheet to make it WCAG AA conformant, but I did update a few colors to darker shades so that all the syntax highlighting actually in use on this website has WCAG-conformant color contrast.

If you notice any accessibility issues with Graph Paper, please let me know! You can report accessibility issues via GitHub or send a pull request.

If you’re interested in learning more about web accessibility, here are a few resources that I recommend:

Welcome to Graph Paper!

2020-05-30T16:13:00-07:00

It is my great pleasure to finally release Graph Paper! This is a project that I’ve been working on sporadically over the past year.

I’m a hobbyist web and ebook designer. I started with installing and designing WordPress sites. I love WordPress because it’s packed with features and it’s accessible for techies and non-techies alike, but for me it also feels too big and too complex at times, especially from the back-end point-of-view. So upon discovering Jekyll, I quickly fell in love. Jekyll is simple and flexible. It gives me control over everything I want without too much extra stuff in the way to worry about. Also, you can quickly host a Jekyll website on GitHub for free (as well as move your site over to basically any other hosting service you’d like without too much hassle). Jekyll’s great.

You know what else is great? Bootstrap. Once I discovered the Bootstrap framework, suddenly it was so easy to create beautiful, responsive websites.

For me, Jekyll and Bootstrap are a perfect match for one another. Bootstrap is my building blocks; Jekyll is my glue. When I put them together, there’s only one thing I’m missing: features. In Jekyll, you can implement most of the features you’d expect in a modern website or blog: tags, categories, comments, pagination, featured images, and more. However, those features aren’t ready-to-go from the get-go.

This is where Graph Paper comes in. Graph Paper is a Jekyll website/blog, integrated with Bootstrap, that’s ready for you to fork. Moreover, Graph Paper is already set up with all of those features you’d expect in a modern website. (Check out the about page for the complete list.) Once you fork the project and start your own website, you can keep those features, tweak them, or remove them as you like. If Graph Paper is missing any features you wish it had, let me know! You can send me an email or a tweet, or, if you’re technically inclined, implement the feature yourself and send a pull request.

I confess: I mostly made Graph Paper for myself, to get extra web design practice and so that in the future I’ll be able to quickly and easily spin up beautiful and functional websites. But I hope Graph Paper can be helpful for others as well. I’ve done my best to keep the code clean, the project well-documented, and the copyright and licensing info explicit. If Graph Paper is difficult for you to use for some reason, please let me know and I’ll do my best to improve it!

Accessibility

Accessibility and universal design are super important, and they’re even more important for a project like Graph Paper, a template upon which other websites can be built. I’m familiar with the basic principles of accessible web design, and I’ve done my best to make Graph Paper as accessible and WCAG-compliant as possible.

However, I’m definitely still learning about accessibility and universal design, and there’s a lot to it once you start digging into the details. As I learn more, I will keep updating Graph Paper to improve its accessibility, but it would also be helpful if you could chip in. Please report any accessibility issues you find and/or fork the project, implement accessibility, and submit pull requests.