Outset - Responsive

Outset - Responsive is an Essential css helpers to fully control responsive html elements.

install

using npm

npm install postcss-outset-responsive --save

Usage

postcss([ require('postcss-outset-responsive') ])

See POSTCSS docs for examples for your environment.

Options

Call plugin function to set options:

var outsetResponsive = require('postcss-outset-responsive')
postcss([ 
    outsetResponsive({
        type: 'class', //# selector type
        seprator: ':', //# selector seperator
        grid: {  //# grid and columns option
            selectors: {
                column: 'col', //# column selector
                grid: 'grid', //# grid selector
                wrap: 'wrap' //# wrap selector
            },
            columns: 12, //# number of columns
            gap: '0.5rem', //# default grid gap
            calc: false //# use of css calc() "IE 9+ support"
        }
    })
])

type (string)

to use this plugin you have three optional types of selector combinations

available combinations (Class, Media, attribute)

type: Class

<!-- apply general style -->
<section class="#{property}(:)#{attribute}"></section>
<!-- and to target media -->
<section class="#{media}(:)#{property}(:)#{attribute}"></section>

example

<section class="wrap col:4 display:col:4 medium:col:6 small:col:12">
    <h3 class="float:left medium:float:none mobile:text-align:center">Responsive Elements is Easy<h3>
<section>

type: media

<section #{media}="#{property}(:)#{attribute}"></section>

example

<section default="wrap" display="col:4" medium="col:6" small="col:12">
    <h3 default="float:left" medium="float:none" small="text-align:center">Responsive Elements is Easy<h3>
<section>

type: attribute

<!-- apply general style -->
<section #{attribute}="#{attribute}"></section>
<!-- and to target media -->
<section #{attribute}="#{media}(:)#{attribute}"></section>

example

<section wrap col="col:4 medium:6 small:12">
    <h3 text-align="left medium:none small:center">Responsive Elements is Easy<h3>
<section>