PHPackages                             nolte/lean-styleguide - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. nolte/lean-styleguide

ActiveLibrary[Utility & Helpers](/categories/utility)

nolte/lean-styleguide
=====================

A styleguide for the Lean Theme's UI components

1.1.2(5y ago)018.8k↓50%1MITPHPPHP >=7.2

Since Aug 8Pushed 4y ago5 watchersCompare

[ Source](https://github.com/wearenolte/lean-theme-styleguide)[ Packagist](https://packagist.org/packages/nolte/lean-styleguide)[ Docs](https://github.com/wearenolte/lean-theme-styleguide)[ RSS](/packages/nolte-lean-styleguide/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (4)Dependencies (1)Versions (16)Used By (1)

The LEAN Theme's styleguide
===========================

[](#the-lean-themes-styleguide)

View in a single page all your coded UI components.

By default it reads the atoms, molecules, organisms and templates from the components folder of the Lean Theme.0

The styleguide can be accessed on `[site-url]/styleguide`

How to use
----------

[](#how-to-use)

### Component Autoload

[](#component-autoload)

The UI components will be loaded automatically.

If they don't show up then you may need to pass dummy data. (Read next section)

### Passing dummy data to the components in the styleguide

[](#passing-dummy-data-to-the-components-in-the-styleguide)

To pass the arguments to the components in the styleguide, you will need to create a json file named exactly as the component and declare the data in the following format:

```
{
  "variants": [
    {
      "arg1": "Lorem Ipsum",
      "arg2": "Lorem Ipsum"
    }
  ]
}
```

**example:**

Component filename: *link.php*

Component dummy data filename: *link.json*

```
{
  "variants": [
    {
      "class": "color-red",
      "title": "Lorem Ipsum Title",
      "url": "http://google.com"
    }
  ]
}
```

### Declaring component variants

[](#declaring-component-variants)

Simply create another object in the variants array:

```
{
  "variants": [
    {
      "arg1": "Lorem Ipsum",
      "arg2": "Lorem Ipsum"
    },
    {
      "arg1": "Lorem Ipsum",
      "arg2": "Lorem Ipsum"
    }
  ]
}
```

**example:**

```
{
  "variants": [
    {
      "title": "Lorem Ipsum Title",
      "url": "http://google.com"
    },
    {
      "style": "red",
      "title": "Lorem Ipsum Title",
      "url": "http://google.com"
    }
  ]
}
```

**Note**: the `style` argument is a keyword convention in the styleguide. You can declare multiple styles for a component and they will be printed in the component's heading info section.

Current version supports to 4 styles per component:

`style`

`style2`

`style3`

`style4`

### Setting a variable placeholder

[](#setting-a-variable-placeholder)

Sometimes it's useful to have a variable placeholder as a component's argument value.

For example if the component uses the function wp\_get\_attachment\_image(), you can set an image placeholder.

Use this hook to create placeholders:

```
add_filter(
  'lean_styleguide_component_variables',
  function() {
    return [
      'placeholder-key'   => 'placeholder-value',
      'placeholder-key-2' => 'placeholder-value-2',
    ];
  }
);
```

Now you can use the placeholder in the json dummy files like so:

```
{
  "variants": [
    {
      "class": "",
      "image_id": "${placeholder-key}", // this will be replaced to 'placeholder-value'.
      "html": "${placeholder-key-2}", // this will be replaced to 'placeholder-value-2'.
      "alt": "Lorem Ipsum alt"
    }
  ]
}
```

**example**:

```
add_filter(
  'lean_styleguide_component_variables',
  function() {
    return [
      'image-id' => 2 // Where 2 is the WP image attachment ID.
    ];
  }
);
```

Placeholder usage:

```
{
  "variants": [
    {
      "class": "",
      "image_id": "${image-id}",
      "alt": "Lorem Ipsum alt"
    }
  ]
}
```

Configurations
--------------

[](#configurations)

### Change the template file

[](#change-the-template-file)

Use this filter: `lean_styleguide_template`

**example**:

Adding your own template in the theme's folder.

```
add_filter(
    'lean_styleguide_template',
    function() {
        return get_stylesheet_directory() . '/styleguide-template2.php';
    }
);
```

**Important**: The custom template will need to have this 3 action calls:

`do_action( 'lean_styleguide_header' );`

`do_action( 'lean_styleguide_content' );`

`do_action( 'lean_styleguide_footer' );`

You can view the styleguide-template.php from this library for reference.

### Add code to the Head tag

[](#add-code-to-the-head-tag)

Use this action: `lean_styleguide_header`

**example**:

```
add_action(
    'lean_styleguide_header',
    function() {
        echo '
        body {
            background-color: blue;
        }
        ';
    }
);
```

### Add code to the Footer tag

[](#add-code-to-the-footer-tag)

Use this action: `lean_styleguide_footer`

**example**:

```
add_action(
    'lean_styleguide_footer',
    function() {
        echo '
            console.log(\'hello\')
        ';
    }
);
```

### Change the component's folder path

[](#change-the-components-folder-path)

Use this filter: `lean_styleguide_component_dir_path`

**example**:

```
add_action(
  'lean_styleguide_component_dir_path',
  function() {
    return get_template_directory() . '/frontend/views';
  }
);
```

### Change the styleguide's CSS stylesheet

[](#change-the-styleguides-css-stylesheet)

Use this filter: `lean_styleguide_css`

**example**:

```
add_filter(
  'lean_styleguide_css',
  function() {
    return get_stylesheet_directory() . '/frontend/dist/main2.css';
  }
);
```

###  Health Score

32

—

LowBetter than 72% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity23

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 66.7% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~66 days

Recently: every ~197 days

Total

14

Last Release

1615d ago

Major Versions

0.0.1 → 1.0.02019-08-09

PHP version history (3 changes)0.0.1PHP >=7.3.2

v1.0.25PHP >=7.2

v1.0.27PHP >=7.2 || >=8.0

### Community

Maintainers

![](https://www.gravatar.com/avatar/4aa05a59deaf5695b3a80e42e2c6b971ab92c171ad13cd7b95ca8175382cda60?d=identicon)[WeAreNolte](/maintainers/WeAreNolte)

---

Top Contributors

[![honekun](https://avatars.githubusercontent.com/u/572652?v=4)](https://github.com/honekun "honekun (2 commits)")[![nelsonamaya82](https://avatars.githubusercontent.com/u/6953921?v=4)](https://github.com/nelsonamaya82 "nelsonamaya82 (1 commits)")

### Embed Badge

![Health badge](/badges/nolte-lean-styleguide/health.svg)

```
[![Health](https://phpackages.com/badges/nolte-lean-styleguide/health.svg)](https://phpackages.com/packages/nolte-lean-styleguide)
```

###  Alternatives

[helhum/dotenv-connector

Makes it possible to set environment variables for composer projects.

1594.6M34](/packages/helhum-dotenv-connector)[phpro/grumphp-shim

GrumPHP Phar distribution

274.4M307](/packages/phpro-grumphp-shim)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)