ismamz/postcss-utilities

PostCSS plugin to add a collection of mixins, shortcuts, helpers and tools for your CSS

postcss-utilities's Issues

Add text-stroke

Like this one https://www.npmjs.com/package/postcss-text-stroke

Syntax highlight

I realise this is not directly relevant to the plugin,
but tried to look for ways to add the '@Util' to css/scss syntax highlighting in Atom editor
but couldn't find a reference for it.

Anyone has any advice?

Documentation for @util circle output is incorrect

The output for @Util circle is:

.circle {
    height: 200px;
    width: 200px;
    border-radius: 50%;
    color: #268BD2;
}

Where color should be background-color

more customization to `hr`

How about adding height and style arguments to hr?

/* signature: hr( [color], [vertical-margin], [style], [height] ) */
/* defaults: style = solid, height = 1px

/* before */
hr {
  @util hr(#000, 20px, dashed, 10px);
}

/* after */
hr {
  height: 0;
  border: 0;
  border-top: 10px dashed #000;
  margin: 20px 0;
  display: block;
}

Add max/min to size utility

Hello, it will be better if you can add max/min size for both width and height to the size shortcut or even create new shortcuts like min-size and max-size something like what they did here in this plugin postcss-short-size.
Thanks

Bug with centerMethod option

Hi! I found a bug with centerMethod option. Problem with number of argument in center function. This problem was solved in last pull request, but last version in npm is still 7.0. Can you provide new release?

Use flexbox to center vertically

Isn't it better to use flexbox to center vertically?

replace `center` with more general one

Sometimes it's need to center block only vertically or horizontally. Maybe it's worth to replace center with more general align( [vertical], [horizontal] ). vertical argument can be one of top, center, bottom and horizontal argument can be one of left, center, right:

/* before */
.centered {
  @util align(center, center);
}

.aligned {
  @util align(bottom, right);
}

/* after */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.aligned {
  position: absolute;
  bottom: 0;
  right: 0;
}

Also It may be useful to have fill values for both arguments:

/* before */
.fill-horizontally {
  @util align(center, fill);
}

/* after */
.fill-horizontally {
  position: absolute;
  top: 50%;
  left: 0;
  rigth: 0;
  transform: translateY(-50%);
}

All this behaviour can be implemented with flexbox method too

fixed sticky footer

Hi, I wanted ask, why you choose implementation with wrapper ?
I think this realization more clean - http://mystrd.at/modern-clean-css-sticky-footer/

html {
    position: relative;
    min-height: 100%;
}
body {
    margin: 0 0 100px; /* bottom = footer height */
}
footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100px;
    width: 100%;
}

triangle-framed (non-filled)

This may be a tricky one, requiring both pseudo element positions and other magic.

Add visibility:hidden to clearfix

Webkit only bug.
Chromium bugtracker

Bump postcss dependency ^6.0.0?

Any reason not to?

Does not support stylus or sass？

Such as title

Use flexbox for sticky footer

We need to find the best way to use flexbox for sticky footer utility.

• Solved by Flexbox - Sticky Footer

Documentation

Reminder to go through documentation/website, proofreading as well.

@util hr - should be able to pass 0-4 parameters without any warnings

Hi - Thanks for the helpful plugin!

I believe i've discovered a bug with @util hr;

As per the documentation, 4 parameters can be passed to the hr utility. This works as expected as far as functionality.

The Issue:
I'm currently getting a warning in the build output when I pass only one param or when I pass more than 2 params.

It seems that the issue lies in the walkAtRules function in index.js

Solution: Regarding @util hr;, based on documentation, you should be able to pass 0-4 parameters with out any warnings.

Use PostCSS 7

There are no AST API changes. We just need to update dependencies.

HTTPS

Add HTTPS on the website. https://github.com/blog/2186-https-for-github-pages

@util position if all 0 doesn't work

I get error in this situation
@Util position(absolute, 0 0 0 0)

and everything is fine in this
@Util position(absolute, 0px 0 0 0)

Potentially update clearfix util to be more modern

I've noticed that the clearfix util is using the display: table/block method, however there is a more modern approach which is to use display: flow-root.

A demo is here showing it off.

"centerMethod" option doesn't work as intended

Hi!

I am using this plugin with webpack and postcss-loader with postcss-load-config to load config from package.json.

In package.json I've got it configured like this:

...
    "postcss": {
        "plugins": {
            "postcss-import": {},
            "postcss-url": {},
            "postcss-utilities": {
                "centerMethod": "flexbox",
                "textHideMethod": "font"
            },
            "postcss-cssnext": {},
            "postcss-browser-reporter": {},
            "postcss-reporter": {}
        }
    },
...

And it seems to ignore passed option "centerMethod" - to use flexbox centering instead.
It keeps using the default one transform.

However! Passing option "textHideMethod": "font", works without problems.

I believe there's a typo somewhere, which doesn't switch to flexbox as intended?

Depedencies:
"postcss-utilities": "^0.7.0",
"webpack": "^3.8.1",
"postcss-loader": "^2.0.8",

Background image

Hi, I often set images as backgrounds, especially when I need specific ratio, maybe mixin for that can look something like this

.thumb-image {
  @util bg-image(/assets/images/awesome-image.jpg);
}

.thumb-image {
  background-image: url(/assets/images/awesome-image.jpg);
  background-position: center;
  background-size: cover;
}

Or maybe in combination with aspect-ratio mixin

.thumb-image {
  @util aspect-ratio(16:9);
  @util bg-image(/assets/images/awesome-image.jpg);
}