jo-asakura / postcss-neat Goto Github PK

Hi,

Is there a timeframe of when postcss-neat will be updated on NPM to resolve #4.

The current version is 1.1.0 whereas on NPM its v 1.0.1.

Hi,

neatMaxWidth : "1170px" work, but neatGutterWidth: "30px" not, and result of NaN.

Thx.

I have float: none; in my selector, cuz i dont need clearfix and have just one column.

.grid__content {
  @neat-span-columns 8;
  @neat-shift 2;
  float: none;
}

But after postcss-neat we`ll have:

.grid__content {
  float: none;
  display: block;
  float: left;
  margin-right: 2.35765160%;
  width: 65.88078280%;
  margin-left: 17.05960860%; 
}

It would be really helpful to have a grid applied as a background to the container. At the moment its a bit difficult to see if columns / gutters are aligned correctly. I know susy does this very well so i know that this should be possible.

Any way to configure the following?

• Number of grid columns
• Column width
• Grid margin

I'm getting the following error:

$ gulp css
import neatCore from './neat-core.es6.js';
^^^^^^
SyntaxError: Unexpected reserved word
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (z:\xxx\node_modules\postcss-neat\index.js:3:18)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

Using the following processors:

require('postcss-mixins')({
    mixins: require('postcss-neat')()
}),
require('postcss-nested'),
require('postcss-each'),
require('postcss-for'),
require('postcss-conditionals'),
require('cssnext')(),
require('autoprefixer-core')()

Hi,

Is there an official list of browsers neat is able to work on? I ask because I think some of the generated code can optimised to produce a better output. Namely the zoom: 1 for clear fix is only applicable to ie6 and 7. Is that really needed if that browser isn't supported?

Could be quite a bit of savings in file size for bigger projects.

when using:

@mixin span-columns 12

the rendered css is:

width: 1%;

…since

you must use this plugin in conjunction with postcss-nested

Libraries with mixins is a Sass way. There is no reason to use postcss-mixin in plugins like postcss-neat. You should add custom properties:

.element {
  neat-span-columns 6;
}

When you add float in css there is no need to add "display block" float left or right property automatically adds "display block"

https://developer.mozilla.org/en-US/docs/Web/CSS/float

Hi,

I was searching to find a suitable grid system that support RTL languages and I found postcss-neat. It's very clean and effective but it has a little problem. If you start to implement mobile first approach and use min-width instead of max-width you will encounter a serious problem. the (@neat-omega)s will not reset and they will apply to next media query breakpoints.
Actually there is a solution for bourbon's neat which is called omega-reset
https://github.com/joshfry/omega-reset-for-bourbon-neat
do you have any plan to integrate it to your code?

thanks,

acba959 introduced a bug with media queries:

For example, media query inside element has side effects when media query is not applied:

.element1{
    @neat-outer-container;

    .element2{
        @neat-span-columns 12;

        @media (max-width: 900px){
          @neat-span-columns 9;
        }
    }
}

Produces something like:

...
@media (max-width: 900px){
    .element1 .element2{
       width:75%;
       margin-right: 5%;
    }
}
/*block below should be inside the media query*/
.element1 .element2{
    margin-right:0;
}

Version 2.1.0 works ok.

I tried to apply the code you have mentioned in your explanation

   .col-6 {

            @neat-span-columns 6;
            @neat-omega;
            @media screen and (width < 768px)
            {
                @neat-span-columns 12;
            }


        }

but, I got code like this which is not applied in my browser.

.col-6 {
            @media screen and (max-width: 767.999px)
            {
                display: block;
                float: left;
                margin-right: 2.35765160%;
                width: 100.00000000%;
                &:last-child {
  margin-right: 0;

}
            }
            display: block;
            float: left;
            margin-right: 2.35765160%;
            width: 48.82117420%;
            margin-right: 0


        }

Am I doing it the right way? I tried to put postcss-media-minmax before and after postcss-neat and I got the same result

my Gulp file

var gulp = require('gulp');
gulp.task('css', function () {
var processors = [

  require('autoprefixer')({ browsers: ['last 1 version'] }),
  require('postcss-media-minmax'),
  require('postcss-neat')(/* { options } */)


];
return gulp.src('./src/grid.css')
  .pipe(require('gulp-postcss')(processors))
  .pipe(gulp.dest('./dest/'));
  })
  .task('default', ['styles']);