postcss-center
PostCSS plugin to center elements.
Last updated 4 years ago by jedmao .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install postcss-center 
SYNC missed versions from official npm registry.

postcss-center

NPM version npm license Travis Build Status codecov Dependency Status

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') ]);

TypeScript

import * as postcssCenter from 'postcss-center';

postcss([ postcssCenter ]);

Options

None at this time.

Testing

Run the following command:

$ npm 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 commands in 2 separate processes:

$ npm run build:watch

Compiles TypeScript source into the ./dist folder and watches for changes.

$ npm run watch

Runs the tests in the ./dist folder and watches for changes.

Current Tags

  • 1.1.0                                ...           latest (4 years ago)

9 Versions

  • 1.1.0                                ...           4 years ago
  • 1.0.0                                ...           6 years ago
  • 0.0.7                                ...           6 years ago
  • 0.0.6                                ...           6 years ago
  • 0.0.5                                ...           6 years ago
  • 0.0.4                                ...           6 years ago
  • 0.0.3                                ...           6 years ago
  • 0.0.2                                ...           6 years ago
  • 0.0.1                                ...           6 years ago
Maintainers (1)
Downloads
Total 2,543
Today 0
This Week 12
This Month 22
Last Day 0
Last Week 6
Last Month 20
Dependencies (1)
Dev Dependencies (6)

Copyright 2014 - 2021 © npmmirror.com |