Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

PostCSS Verthorz Build Status

PostCSS plugin to add vertical and horizontal spacing shorthand.

Examples

Shorthand vertical and horizontal declarations

.foo {
    padding-vertical: 2rem;
    margin-horizontal: auto;
}
.foo {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}

Shorthand vert and horz declarations

.foo {
    padding-vert: 2rem;
    margin-horz: auto;
}
.foo {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
}

Even shorter shorthand declarations

.bar {
    ph: 30px;
    mv: 100px;
}
.bar {
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 100px;
    margin-bottom: 100px;
}

It even supports multiple values!

.baz {
    padding-vert: 10px 15px;
    margin-horz: 15px 21px;
}
.baz {
    padding-top: 10px;
    padding-bottom: 15px;
    margin-left: 15px;
    margin-right: 21px;
}

Usage

postcss([ require('postcss-verthorz') ])

See PostCSS docs for examples for your environment.

About

PostCSS plugin to add vertical and horizontal spacing rules

Resources

License

Packages

No packages published