Setup

Table of contents

1   Installation

  1.1  PostCSS
  1.2  postcss-positioning

2   Options

---

1   Installation

1.1  PostCSS

postcss-positioning is a plugin for PostCSS, a CSS post-processing tool, that you probably already use for autoprefixer. If not, you can find instructions on how to setup PostCSS for your environment in its repository.

1.2  postcss-positioning

First, install postcss-positioning and its peerDependency.

npm install --save-dev postcss-positioning postcss-calc

Then, add them as a plugin to your PostCSS setup. For example, if you are using Webpack, your .postcss.config.js could look like:

module.exports = {
    plugins: [
        require('postcss-positioning')({ /* options */ }),
        require('postcss-calc')
    ]
}

Note that postcss-calc has to run after postcss-positioning.

2   Options

Note: dev and warn options are currently unimplemented

reset

false, 'minimal' or 'full'. Default is 'minimal'

Prepend a CSS reset. Without the reset, default margins and padding might alter the positioning.

• false: Don't prepend anything
• 'minimal': Reset margin, padding and borders
• 'full': Prepend a full CSS reset

dev

Boolean. Default is false

Visualize how all elements are positioned on the page, to debug or showcase your work.

warn

String. 'all', 'same' or 'none'. Default is 'same'

Warn when using properties that may interfere with postcss-positioning, like width, height, position, margin...

• 'all': always warn
• 'same': only warn when horizontal or vertical are used on the same element
• 'none' or false: never warn