Overview

The Simple Jekyll-based style guide offers a highly flexible approach to creating style guides that can cater to various needs, whether you're aiming for a straightforward list-based guide or a more intricate design using posts and pages. Built on the Jekyll platform, it is designed to make the creation and management of style guides efficient and accessible, streamlining the process for designers and developers alike.

This style guide generator encourages users to define components in a structured manner, allowing for easy modifications and customizations. With its organized file structure and comprehensive functionality, it stands as a robust solution for those looking to harmonize their design language across projects.

Features

Custom Collections: Utilizes a custom collection (with output set to false) to facilitate the creation of complex style guides without being tied to standard posts or pages.
Component Definition: Components can be easily defined in the _components folder, maintaining an organized setup for all styles and elements.
Dynamic Includes: Uses a single include file (_includes/component.html) to render each component twice, providing both the code and preview seamlessly.
Grouping and Filtering: Allows users to group components by type using the group_by parameter and filter what gets displayed using the where clause in {% for %} loops.
Easy Expansion: Component variables are straightforward to update, meaning you can add notes or JavaScript files simply by adjusting the components YAML front matter.
Simplified Looping: Provides the simplicity of {% for %} loops to display components in templates, whether ordered by file names or grouped by type.
Customization Flexibility: The sass variable allows users to link specific SASS files for custom CSS rules that apply to their components, enabling more tailored styling.

Jeromecoupe

11ty Paginate Taxonomies

Iad_eleventy_introduction

Jekyllstyleguide

Multilingual_eleventy