PostCSS Layout Selector

PostCSS plugin for easy handling of different layouts without media queries but with conditional compilation.

header {
  background: #eee;
 
  @layout landscape {
    height: 75px;
  }
 
  @layout portrait {
    height: 150px;
  }
}

Generating "landscape" version:

header {
  background: #eee;
  height: 75px;
}

Generating "portrait" version:

header {
  background: #eee;
  height: 150px;
}

Installation

Should be installed locally in your project source code:

npm install postcss-layout-selector --save-dev

Integrate like this in your e.g. gulpfile.js:

postcss([
  require("postcss-layout-selector")({
    layout: "portrait"
  })
])

See PostCSS docs for examples for your environment.