Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Hey folks! I created a website template for y’all that you are free to take and use for whatever you like. Like everything public on CodePen, it’s MIT.

Wanna use it?

You can fork a copy of your own anytime.

With the Project on CodePen, you can deploy it and map it to your own domain if you like (like this), making the entire thing easy-to-manage right here on CodePen.

It’s also a one-click template:

But if you’d like to just snag a copy to use elsewhere, that’s fine! You can export it like you can any other project:

The project uses Sass, Nunjucks, and Markdown though, so you’ll have to fire up a system for processing those (we use a custom Gulp process behind the scenes in CodePen Projects).

It’s a one-page site.

Not because it’s using some fancy client-side routing, but because it’s literally just a one-page site that scrolls. But rather than pack all the content of the site into one file, the project uses Nunjucks to process the index page (index.njk) so that it can use include statements to piece the content together.

The content sections are in Markdown

Individual little Markdown files (e.g. file.md) are processed into HTML first, and that’s what the Nunjucks file includes, like…

<section>
  {% include "sections/o-01-introduction.html" %}
</section>

Include them in any order you like:

Styles are in Sass

Really only to break things up a bit and make it faster to customize if you like. Like if you want to change the fonts, primary colors, or media queries, it’s all right in style.scss to change.

$primary: #8585ef;
$link: #60b4ff;

$font-family-body: "Markazi Text", serif;
$font-family-mono: "IBM Plex Mono", monospace;

$small-screen: (max-width: 700px);

@import "prism";
@import "callouts";
@import "typography";
@import "layout";

The design is centered around code documentation

But of course, you can use this for whatever you like. I mention the code documentation stuff because the structure and styles are specifically set up to have the sort of typical things you’d see on a homepage for a technical product like a JavaScript library. For instance, a sidebar nav might help developers returning for reference to quickly find a method or other information they know they need.

Plus there are styling thing available like callout blocks and code blocks that sites like this need. Also notably missing things, like there is not blockquote styling or even generic buttons. BYO!

Smooth Scrolling & Active Nav

As a long scrolling site, smooth scrolling might help teach users that everything is right here, punctuated by setting the active navigation state.

If you’re interested in the tech behind that, it’s all right in index.js and I was pleasantly surprised at how straightforward most of it was. Native APIs for smooth scrolling to an existing element are great:

target.scrollIntoView({
  behavior: "smooth",
  block: "start"
});

And with Markdown generating unique IDs on headers, there are perfect scrolling and measuring targets all over the page.

Notice the sidebar makes use of position: sticky; as well, so if a user is hopping around, the navigation isn’t lost on them.

Responsive

The site shrinks as you might expect, collapsing the nav into a hamburger and fixed position.

There is a touch of viewport units in the main header as well, giving that a prominent boost on very large screens.

Code Highlighting with Prism

Prism.js is Lea Verou’s open source client-side library for syntax highlighting code. Just the kind of project that this template is for, coincidentally! What is notable about this is that Markdown is very friendly with Prism. You can write code blocks in Markdown code fences (with language!):

And that will generate class names like this:

Which is exactly what Prism wants for knowing the language and highlighting it. The CSS to style all the code blocks is in _prism.scss, so it’s entirely customizable.

Note that long code will wrap rather than break the layout.

Other tidbits

There is a little SVG in use on the site. The logo in the upper left is a just a simple bit of inline SVG copied right from Design Assets in Projects, and the footer background is a pattern copied in the same way.

A perfect use for Editable Embeds

Rather than just tell people about the library, why not let them play with it immediately? That’s what Editable Embeds are. Any Pen on CodePen can be embedded, and it’s a PRO feature to make them editable.

Surely your library is more impressive than this, but check out how you can bring a live editor experience right to the site:

300 KB

All that, and it’s a pretty lean and mean site at 300 KB. And 75% of that comes from the Editable Embed. I wouldn’t call Editable Embeds overly heavy, I’d call the rest of this site super minimal leaving plenty of room for things like images and videos if you need them, while still being pretty fast!

Don’t like some part of it? Fork it and change it!

If you find a bug or big problem with it, definitely let me know. But if you just have ideas for it that you’d make if it was your project, well, it can be your project. Fork it and you’ll have your own copy to do with what you please.