Get started

Add and delete your custom block stylesheets in src/assets/css/blocks/*.css, they get pulled in your output stylesheet automatically.

The methodology used is CUBE CSS.

You can delete the following files and archives (the theme may break though, if there are still references to them):

• github.js in src/_data/
• builtwith.json in src/_data/
• all the blog posts, as these serve only as an example
• the directoy and all files in src/docs
• all pages in src/pages, though you might want to keep index.njk as a starting point
• You can delete screenshots, blog and gallery in src/assets/images.
  Keep the favicon and template folders though.

If you don’t want to feature any code examples, you may delete the whole stylesheet for syntax highlighting: src/assets/css/blocks/code.css.

Edit all your preferences (colors, fluid text sizes etc.) in src/_data/designTokens/*.json.

Additional colors, variants and gradients for custom properties are automatically created in src/assets/css/global/variables.css based on the colors set in colors.json. If you change names you should edit variables.css as well and check if the names are used elsewhere in the template.

In the style guide you can see how everything turns out.

Please note that adjustments in viewports.json only affect your utility classes and custom properties, but do not change the dimensions of your page. You can control this using the custom property --wrapper-width.

This starter uses three fonts, Red Hat Display, Figtree and Roboto Mono. You can add or delete fonts in src/assets/fonts.

You can create font subsets for a better performance, for example using the Fontsquirrel Webfont Generator.

Next, edit src/assets/css/global/fonts.css.

Add your new font aliases in src/_data/designTokens/fonts.json.

Finally, in src/_layouts/base.njk edit the font preloads. Roboto Mono is only used for code blocks. Its preload is set directly in the post layout: src/_layouts/post.njk.

You can see a preview of the OG images in a blog post.

They are referenced in meta-info.njk:

<meta
  property="og:image"
  content="{{ meta.url }}
  {% if (layout == 'post') %}/assets/og-images/{{ title | slugify }}-preview.jpeg
  {% else %}{{ meta.opengraph_default }}
  {% endif %}"
/>

To change the look and behaviour of those images and replace the SVG background edit src/common/og-images.njk.

The implementation is based on Bernard Nijenhuis article.

If you want to be inspired, have a look at what Lea does here.

Previously the images were created at build time, but this leads to not rendering the font - if the system executing the build has not installed it, it will not be generated.

A solution would be to always build the page yourself and then place it on the server directly. Or, as Sophie Koonin does, explicitly specify the system to be used for the build and select a font that this system has installed by default.

At the moment I have relocated the creation of the images in the development process, so that the font only needs to be installed on your own system. The images are located in src/assets/og-images and are comitted.

This is fine as long as you only work with markdown and the font is always installed on your system, how this works with a CMS workflow remains to be seen.

Let me know if you encounter any problems.

Find available social media / platform icons in src/_includes/svg (prefixed with platform-).
If you add new icons they too must be prefixed with “platform-”.

In personal.yaml you can add new platforms and their URLs. The key must be the same as the prefix of the icon.

https://simpleicons.org/ features a great variety of free SVG icons for popular brands.

This was probably the most opinionated decision: tags have been integrated since version 2.0.

In several places you will find a code block that looks like this:

<!-- loop posts -->
{% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
<!-- activate tags -->
{% set activateTags = true %}
<!-- set heading context -->
{% set headingContext = "h3" %}
<!-- card -->
{% include 'components/card.njk' %} {% endfor %}

Here card.njk is imported as a component, and some settings are made beforehand. In connection with tags, is important, because here you can switch off the display of tags in this card instance.

The tags are in your collection items in the front matter with the syntax

tags:
  - image
  - feature

or

tags: ['markdown', 'feature']

are entered.

If you generally do not want any tags to show, it is probably easiest to not create any at all.

With version 2.0 I introduced dark and light mode. This is not intended to be a gimmick, but to support the accessibility of the site. And I tend to read blog posts at night, and if there is no dark mode then I leave the tab for later, and we all know how that ends.

Dark and light mode respects the user agent or operating system settings using the prefers-color-scheme CSS media feature. But there is also a switch in the <footer>.

If you want to change something here, for example replace the button with a classic sun/moon icon, make sure to preserve accessibility. The accessible name (“Theme dark” or “Theme light”) results from two IDs:

aria-labelledby="theme-switcher-label theme-switcher-value"

If you remove the text content of the <button>, the value for theme-switcher-value must therefore be obtained differently.