A simple documentation template made with Eleventy and Spruce CSS.
MIT License
Welcome to the official documentation of Spruce Docs Elventy theme. A small template you can use to document any of your projects.
A documentation template is always helpful. There are a lot of solutions to make one; we wanted to create our self-hosted version based on our favorite static site generator Eleventy.
By structure, it is simple, with two levels and additional custom templates like FAQ and Changelog.
The template is built on Spruce CSS, a small and customizable CSS framework. The main benefit of this is that you can use the Spruce UI components with dark mode and RTL support.
Clone the repository.
Install the dependencies.
In the package.json
file, you will find all of the dependencies (and scripts) to install them using the following command:
npm install
Run the development mode
To run the development mode, use the npm script
. This script will also watch for changes.
npm start
Run the production mode
Before you go live, you should use the production script to compress the Sass files.
npm run prod
You can find some more npm scripts in the package.json that can be helpful.
Adding content to the template is easy as almost everything is in Eleventy.
Our base folder for the documentation pages is the posts
folder. You must follow the folder structure, which means the category
here. If you create a folder, you must make a list page with the same name as the folder. You must also create another posts
folder under the category
folder where your posts go. You must create the posts.json
file that will parameter your layout
and permalink
values.
The theme utilizes the Eleventy Navigation plugin, so you must explicitly set up the hierarchy. This is needed for the automatic sidebar navigation, the navigation order, and breadcrumb generation.
To create simple pages, make a file directly under the src
folder and configure it with the available front matter.
spruecss-eleventy-documentation-template/
├─ node_modules/
├─ dist/
├─ src/
│ ├─ _data/
│ ├─ _includes/
│ ├─ css/
│ ├─ filters/
│ ├─ font/
│ ├─ img/
│ ├─ js/
│ ├─ posts/
│ ├─ scss/
│ ├─ shortcodes/
│ ├─ transforms/
│ ├─ changelog.md
│ ├─ faq.md
│ ├─ index.md
├─ .eleventy.js
├─ package.json
├─ README.md
├─ ...