Skip to main content
LFP Docs

Custom Styles

LFP Docs applies a rich and thoughtful design system to all layouts. But there are multiple ways to adjust styles in single-use cases or for the entire site.

Add Styles

There are two main ways to include additional styles with the default theme: adding external stylesheets, or inlining styles.

The default theme's styles are gathered in a layer lfpdocs, which allows you to introduce your own base or reset styles, and add your custom styles afterwards:

@layer custom-resets, lfpdocs, custom-styles;

@layer custom-resets {
  /* your resets */
}

@layer custom-styles {
  /* your styles */
}
your-styles.css

Stylesheets

if styles should apply to many or all pages in your project, it's best to include them with <link> elements in each page's <head>.

First, we have to write the CSS from its source file into the project's output directory. The two approaches for this are by copying them without modifying or by applying them via a template:

  1. Add a Passthrough Copy, either within the eleventy configuration of your project or within LFP Docs's configuration object:

    export default function (eleventyConfig) {
  // 1. via the plugin's configuration
  eleventyConfig.addPlugin(lfpDocs, {
    // configuration...
    passthroughCopies: {
      'path/to/input/file.css': 'path/to/output.css',
      // add as many files to copy as needed
    },
    // ... more configuration
  });
  // via Eleventy's own function
  eleventyConfig.addPassthroughCopy({
    'path/to/input/file.css': 'path/to/output.css',
  });
  // repeat the above method call as many times as there are files to copy
}
    eleventy.config.js

  2. It is also possible to manage styles like you would do with every other Eleventy page, by organizing them with templates. Create a couple of CSS files and a template with your preferred language (Nunjucks, in this case) in your source directory:

    └─ docs
    └─ styles
      ├─ style-1.css
      ├─ style-2.css
      └─ bundle.njk

    Add your styles to the CSS files and add the following to your template file:

    ---
permalink: assets/styles/bundle.css
---
{% include "./styles-1.css" %}
{% include "./styles-2.css" %}
    bundle.njk

Regardless of which approach you choose, you than have to tell the default theme to include your output CSS with the site. For that, add a new entry for linkAttrs in the plugin's configuration:

eleventyConfig.addPlugin(lfpDocs, {
  // configuration...
  linkAttrs: [
    ['stylesheet', '/assets/styles/bundle.css'],
    // add as many links to resources as needed
  ],
  // ... more configuration
});

Inline Styles

An easy method to add styles to a particular page or scope them to a subset of pages is to inline them with <style> tags in the page's <head>.

This is done by passing the CSS into the page's frontmatter:

---
title: Example Page
styles: ".custom-element {
  border: 4px solid rebeccapurple;
}"
---
Page content...
example-page.md

Overwrite Custom Properties

LFP Docs's design system builds upon CSS custom properties. Refer to the reference for a complete overview of all available properties.

To quickly adjust themes for the default layouts, either append inline styles or a dedicated stylesheet, where you overwrite LFP Docs default custom properties.

All custom styles that you would append are loaded after the theme's default styles, thus your styling takes precendence over them.

Tailwind

You can add Tailwind to your build pipeline. The default theme's class tokens should not interfere with Tailwind's set of utility classes.

There are Eleventy plugins available, for integrating Tailwind into Eleventy's build order (untested with LFP Docs).

Edit this page on Codeberg
Last updated: