Skip to content

jednano/postcss-center

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

postcss-center

Travis Build Status AppVeyor Build Status npm version npm license

Code Climate Test Coverage

npm

PostCSS plugin to center elements.

Introduction

Centering elements in CSS isn't exactly straight-forward, but we can change that!

.foo {
	top: center;
	left: center;
}

Transpiles into:

.foo {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-right: -50%;
	transform: translate(-50%, -50%)
}

Of course, you don't have to include both top and left:

.foo {
	top: center;
}

Transpiles into:

.foo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

Or...

.foo {
	left: center;
}

Transpiles into:

.foo {
	position: absolute;
	left: 50%;
	margin-right: -50%;
	transform: translateX(-50%);
}

That's about it!

Conditions

  • If the value of top or left is not center it will be preserved. If both are not center, this plugin will do nothing!
  • If the rule already has a position it will only be preserved if its value is relative or fixed. All other values will be replaced with absolute.
  • If the rule has a position of relative or the value of left is not center, the margin-right declaration will not be inserted.

Installation

$ npm install postcss-center

Usage

JavaScript

postcss([
	require('postcss-center'),
	// more plugins...
])

TypeScript

///<reference path="node_modules/postcss-center/.d.ts" />
import postcsscenter = require('postcss-center');

postcss([
	postcsscenter,
	// more plugins...
])

Options

None at this time.

Testing

Run the following command:

$ ./scripts/test

This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.

Watching

For much faster development cycles, run the following command:

$ ./scripts/watch

This will build scripts, run tests and watch for changes.

About

PostCSS plugin to center elements.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published