fela-plugin-debug-layout

Adds either colored outlines or a almost transparent background color to debug the application layout. Same rules will always have the same color.

Installation

npm i --save fela-plugin-debug-layout

Assuming you are using npm as your package mananger you can just npm install. Otherwise we also provide a UMD. You can easily use it via unpkg. It registers a FelaPluginDebugLayout global.

<!-- Fela (Development): Unminified version including all warnings -->
<script src="https://unpkg.com/[email protected]/dist/fela-plugin-debug-layout.js"></script>
<!-- Fela (Production): Minified version -->
<script src="https://unpkg.com/[email protected]/dist/fela-plugin-debug-layout.min.js"></script>

Usage

Make sure to read the documentation on how to use plugins.

import { createRenderer } from 'fela'
import debugLayout from 'fela-plugin-debug-layout'

const renderer = createRenderer({
  plugins: [ debugLayout() ]
})

Configuration

Options

| Option | Value | Default | Description | | --- | --- | --- | --- | | mode | outline, backgroundColor | outline | sets the debug mode | | thickness | (number) | 1 | outline thickness for outline mode |

Example

import { createRenderer } from 'fela'
import debugLayout from 'fela-plugin-debug-layout'

const debugLayoutPlugin = debugLayout({
  mode: 'outline',
  thickness: 4
})

const renderer = createRenderer({
  plugins: [ debugLayoutPlugin ]
})

Example

background-mode

outline-mode

License

Fela is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @rofrischmann and all the great contributors.