On npm latest version is 1.2.0, without this #13 musthave fix. Update it please 😉

In your media queries Stylus/Sass docs we able to do this:

@media (max-width: 61.24em) {
  li {
    @include mq-col(flex);
  }
}

But i got error when compile:

Double check in repo, it's doesn't have this functionality:
Not for Stulys
Not for Sass

I'm not a long time to the project. Anyone would like to help me?

First off - thanks for making a responsible css library that is both lightweight and not based on pre-defined class names.

One of your naming conventions creates some conflict and confusion. In particular, the content-align mixin is misleading because it's an alias to the CSS justify-content property. However, CSS flexbox contains an align-content property which is completely different than justify-content.

I would recommend renaming the content-align mixing to something like justify (which is still semantically meaningful even to non-developers) so that it doesn't get confused with CSS's native property.

Fala Afonso, fui tentar usar a versão sass e deu erro na linha 130. Aparentemente falta ":" pra atribuir o valor à variável "$margin-left".

Consegui corrigir localmente, mas não consegui descobrir onde essa variável é usada.

Btw: prefere que escreva em inglês?

/* Row
------------------------------------------------*/
%row {
max-width: max-width;
}
error in your code
%row {
max-width: $max-width;
}

Hi! We started using this grid in our application and it fits our needs quite well: the way it defines mixins instead of extra classes allows us to write isolated styles and keep our css codebase stable. However we noticed that this line:

*
  box-sizing border-box

breaks some other parts of our application, primarily legacy stuff that was written before we even discovered flex-grid-framework.

I know that it sounds like specific case, but anyway don't you think that moving box-sizing: border-box inside $row and col() definition would be a better approach that defining a really strong rule to all the elements in a page? It will also provide a better support for build systems, since the source will only contain variables and mixins, but not selectors (selector could appear several times in the resulting css, depends on how build system handles the @import statement).

Go daddy parked your domain...

Hi, what do you think about add more suported browsers using modernizr for exemple?
There is a project with flexbox that provides this way. https://github.com/ptb/flexgrid

I made the initial settings

/* Configs
------------------------------------------------*/
flx-max-width = 1240px
flx-margin = 0.52083%
flx-padding = 20px
flx-column_number = 12
flx-column_width = (100% / flx-column_number) - 2 * flx-margin

$margin
    margin-right flx-margin
    margin-left flx-margin

$padding
    padding-right flx-padding
    padding-left flx-padding

and attempts to call @extend $row

.header__top-menu
    @extend $row
    @extend $justify-between
    @extend $vertical-align-middle

Generates this type of code

.header__top-menu {
  margin-left: 0;
  margin-right: 0;
  max-width: max-width;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
}

I change max-width on flx-max-width and ofc it's start work.
But what these settings are necessary?
flex-padding = 20px
What I value is not exhibited, they gives me the code of this type.

.header__top-menu {
  margin-left: -10px;
  margin-right: -10px;
  max-width: 1240px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  box-sizing: border-box;
}

It is useless, because it still does not centralize block
Sorry for english, i use google. Thx advance.

I feel it's easier to work with fixed width for gutters. Is it possible with this framework?