sprucecss-eleventy-documentation-template

Setup

1. Clone the repository.

2. 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
   

3. Run the development mode

   To run the development mode, use the npm script. This script will also watch for changes.

   npm start
   

4. 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.

Content Managment

Adding content to the template is easy as almost everything is in Eleventy.

The Basic Structure

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.

Eleventy Navigation

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.

Other Pages

To create simple pages, make a file directly under the src folder and configure it with the available front matter.

Structure

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
├─ ...

• _data: Some global data, like the name of your site and helpers like the active navigation element or current year.
• __includes: All of the layout and partial templates.
• css: The compiled CSS.
• filters: The additional filters that you can use.
• font: The custom fonts.
• img: The static image files.
• posts: The markdown contents.
• scss: The Sass files.
• shortcodes: The available shortcodes.
• transforms: The transformations.