PHPackages                             rareloop/primer - 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. rareloop/primer

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

rareloop/primer
===============

v3.0.0(6y ago)43536[2 issues](https://github.com/Rareloop/primer/issues)[1 PRs](https://github.com/Rareloop/primer/pulls)PHPPHP >=7.1.0

Since Jul 23Pushed 6y ago6 watchersCompare

[ Source](https://github.com/Rareloop/primer)[ Packagist](https://packagist.org/packages/rareloop/primer)[ RSS](/packages/rareloop-primer/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (2)Dependencies (10)Versions (8)Used By (0)

Primer
======

[](#primer)

[![Latest Stable Version](https://camo.githubusercontent.com/54717596b9561e6f1b8caa89295dcfd8efb3146add169de93598c5025a6e5281/68747470733a2f2f706f7365722e707567782e6f72672f726172656c6f6f702f7072696d65722d636f72652f762f737461626c65)](https://packagist.org/packages/rareloop/primer-core)[![CI](https://camo.githubusercontent.com/73f21c1bb2197a727d7214128689999c66529632b626c4555b758994e911840c/68747470733a2f2f7472617669732d63692e6f72672f526172656c6f6f702f7072696d65722d636f72652e7376673f6272616e63683d6d6173746572)](https://camo.githubusercontent.com/73f21c1bb2197a727d7214128689999c66529632b626c4555b758994e911840c/68747470733a2f2f7472617669732d63692e6f72672f526172656c6f6f702f7072696d65722d636f72652e7376673f6272616e63683d6d6173746572)[![Coveralls](https://camo.githubusercontent.com/66b08de05bee20d4497a0465d5de4ce20c717b1179c33b55009e6257824dc56b/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f526172656c6f6f702f7072696d65722d636f72652f62616467652e7376673f6272616e63683d6d6173746572)](https://camo.githubusercontent.com/66b08de05bee20d4497a0465d5de4ce20c717b1179c33b55009e6257824dc56b/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f6769746875622f526172656c6f6f702f7072696d65722d636f72652f62616467652e7376673f6272616e63683d6d6173746572)[![Downloads](https://camo.githubusercontent.com/92eb94181d96b4ef9f0e71ff8d05078fece675302fd79f0557bf72aee804ea6c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f726172656c6f6f702f7072696d65722d636f72652e737667)](https://camo.githubusercontent.com/92eb94181d96b4ef9f0e71ff8d05078fece675302fd79f0557bf72aee804ea6c/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f726172656c6f6f702f7072696d65722d636f72652e737667)

Primer is an extensible Design System/Pattern Library written in PHP. By default it utilises Twig for templating and Markdown/YAML for Documentation.

Installation
------------

[](#installation)

To create a new Primer project run the following command:

`composer create-project rareloop/primer my-primer-folder --remove-vcs`

Usage
-----

[](#usage)

The easiest way to get up and running is to use the inbuilt PHP Standalone Server:

`composer server`

And then open the following URL in your browser `http://localhost:8080`.

If you need to specify the port you can pass this as an argument to the command:

`composer server 1234`

Getting Started
---------------

[](#getting-started)

Primer has three separate sections:

1. [Documents](#documents) - A place to store the written documentation for your Design System.
2. [Patterns](#patterns) - A Pattern Library that catalogues all the components within your system.
3. [Templates](#templates) - A way to view the various Page Templates available in your system.

Patterns
--------

[](#patterns)

Patterns are the building blocks of your system and Primer provides a simple way to view your entire catalogue, a selection or just a single item. Patterns are located in the `resources/patterns` folder and are themselves a folder that contain all it's related files.

### Anatomy of a pattern

[](#anatomy-of-a-pattern)

Each Pattern has an implicit `id` and `title`.

The `id` is the path used to identify it under the patterns folder, e.g. `elements/forms/input`.

A patterns `title` is built from the name of the pattern's folder, e.g. `elements/lists/ordered-list` => `Ordered List`.

Each pattern folder can contain the following:

- **A template** A Twig template used to build the pattern's HTML (`template.twig`)
- **One or more data files** A file to provide the state data required by the template file

### State Data

[](#state-data)

Out of the box, Primer supports State Data in two formats, PHP or JSON.

#### PHP State Data

[](#php-state-data)

PHP State Data files are named `data.php` and must return an array of key/values. This data is then passed to your Twig template at render time.

```