4.0.1 • Published 7 years ago
fela-plugin-debug-layout v4.0.1
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/fela-plugin-debug-layout@4.0.1/dist/fela-plugin-debug-layout.js"></script>
<!-- Fela (Production): Minified version -->
<script src="https://unpkg.com/fela-plugin-debug-layout@4.0.1/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.