https://github.com/deckchairlabs/eleventy-plugin-theme-ui

An 11ty plugin allowing the use of ThemeUI within your templates.
https://github.com/deckchairlabs/eleventy-plugin-theme-ui

11ty 11ty-plugin theme-ui

Last synced: 3 months ago
JSON representation

An 11ty plugin allowing the use of ThemeUI within your templates.

• Host: GitHub
• URL: https://github.com/deckchairlabs/eleventy-plugin-theme-ui
• Owner: deckchairlabs
• License: mit
• Created: 2020-07-17T05:14:04.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T23:01:34.000Z (almost 2 years ago)
• Last Synced: 2024-09-30T09:21:17.891Z (3 months ago)
• Topics: 11ty, 11ty-plugin, theme-ui
• Language: TypeScript
• Homepage:
• Size: 4.12 MB
• Stars: 5
• Watchers: 1
• Forks: 0
• Open Issues: 30
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# eleventy-plugin-theme-ui (alpha)

An [11ty](https://www.11ty.dev/) plugin allowing the use of [ThemeUI](https://theme-ui.com/) within your templates.

This project was bootstrapped with [TSDX](https://github.com/jaredpalmer/tsdx).

## TODO

- Reach some kind of feature parity with the React variant of ThemeUI

- Add some tests

## Installation

```sh

yarn add eleventy-plugin-theme-ui --dev

```

## Configure

```js

const pluginThemeUI = require('eleventy-plugin-theme-ui');

// Your theme adhering to the Theme Specification https://theme-ui.com/theme-spec

const theme = {};

module.exports = function(eleventyConfig) {

  eleventyConfig.addPlugin(pluginThemeUI, {

    theme,

  });

};

```

## Usage

You can now use the `sx` shortcode within any of the 11ty shortcode supported template languages.

```html



  Hello world



Primary Button

```

## Local Development

Below is a list of commands you will probably find useful.

### `npm start` or `yarn start`

Runs the project in development/watch mode. Your project will be rebuilt upon changes. TSDX has a special logger for you convenience. Error messages are pretty printed and formatted for compatibility with VS Code's Problems tab.

Your library will be rebuilt if you make edits.

### `npm run build` or `yarn build`

Bundles the package to the `dist` folder.

The package is optimized and bundled with Rollup into multiple formats (CommonJS, UMD, and ES Module).

### `npm test` or `yarn test`

Runs the test watcher (Jest) in an interactive mode.

By default, runs tests related to files changed since the last commit.