devlint / gridlex Goto Github PK

I'm experiencing a bug where children of columns inside an equal height grid become columns themselves. I've written some hacky code to override it, but seems like an un-intended behaviour. Appears in both safari and chrome, so I don't think it's a browser issue.

http://codepen.io/instituteofcode/pen/dNBbvw

Hi there!

Is there a way to create a variation of the grid that allows me to quickly change the gutter width? For example .grid-gutterSm, .grid-gutterMd, etc...

This would be useful with the project that I'm working with at the moment as the design isn't very consistent.

Thanks!

If you were to have a grid as follows:

<div class="grid-equalHeight">
  <div class="col></div>
  <div class="col-2_sm-0_md-0"></div>
</div>

The resulting cascade is: https://cl.ly/3g2m093r1p2l

As you can see, the application of equalHeight is overriding the display: none.

Hola!

It's a great framework, I'm thinking in using it, however, is there a way to set up the media queries to work with a "mobile first" mindset?

This is kind of the mindset I'm talking about: css-media-queries-best-practices

I tried to just change media queries to min-width values, but the way the classes are set up makes the layout to not work as it should be ( stacking up columns in smaller devices - more space for content );

Hopefully I'm making sense; min-width is better for general performance as mobile devices doesn't have the graphic "power" of larger devices, that is basically the idea.

Thanks a lot!

You can see this problem even on the demo page if you look at it on a smaller screen(e.g. 320px width). A scrollbar will appear and you can scroll to the right because of the negative margin for every .grid

One option maybe would be to refactor the grid gutter, so that it does not need this negative space trick, but instead uses some more complex selectors to address the first and last column (also will writing this i have to admit that might be impossible, as you never know what the last colum is ;) ) Maybe there is another option, or if everything fails just clear the negative margin for smaller screens.

Tested on FF latest, windows 10. (should be the same in every browser)

I personally feel that a more logical scale and corresponding class designation would drop xs in favor of xl. Thankfully, with access to the .scss, you don't have to agree – and I should be able to change it myself.

But whenever I adjust gridlex-vars.scss and gridlex.scss as follows I'm not getting the desired result.

$gl-sm:        "screen and (max-width: 35.5em)"; // up to 568px
$gl-md:        "screen and (max-width: 48em)"; // max 768px
$gl-lg:        "screen and (max-width: 64em)"; // max 1024px
$gl-xl:        "screen and (max-width: 90em)"; // max 1440px

...and...

/************************
    GRID BY NUMBER
*************************/
@include makeGridByNumber(grid);

@media #{$gl-xl}{
  @include makeGridByNumber(_xl);
}
@media #{$gl-lg}{
  @include makeGridByNumber(_lg);
}
@media #{$gl-md}{
  @include makeGridByNumber(_md);
}
@media #{$gl-sm}{
  @include makeGridByNumber(_sm);
}


/************************
    COLS SIZES
*************************/
@include makeCol(col);
@include makeOff(off);

@media #{$gl-xl}{
  @include makeCol(_xl);
  @include makeOff(_xl);
}
@media #{$gl-lg}{
  @include makeCol(_lg);
  @include makeOff(_lg);
}
@media #{$gl-md}{
  @include makeCol(_md);
  @include makeOff(_md);
}
@media #{$gl-sm}{
  @include makeCol(_sm);
  @include makeOff(_sm);
}

For example <div class="grid-3_xl-6"> produces almost the opposite of what you'd expect – where the grid will display 6 items on a row at all breakpoints except xl, ...and where at xl it will then display 3 items on a row.

Strange. Am I missing something – have any ideas as to why this would be the case?

Hi Guy's,
sorry for my english ...
So i'm trying to explain, i have 2 columns :

<div class="col-8_sm-12"></div>
<div class="col-4_sm-12 grid">
     <div id="one" class="col-12_sm-6_xs-12"></div>
     <div id="two" class="col-12_sm-6_xs-12"<div>
     <div id="three" class="col-12_sm-6_xs-12"></div>
</div>

The problem is that my blocks "one" "two" and "three" are displayed like there was a "spaceBetween" and i don't know why . I would like block displaying like a "flex-start" but how i can do that ?

Thanks

I was experimenting with your grid system (which seems to be really cool btw) and found an issue with the attributes push-left and push-right when used in JSX syntax. According to the React docs "if you pass properties to native HTML elements that do not exist in the HTML specification, React will not render them". For that reason, I would like to know if it is possible to change the approach. Why not use a class? Or an attribute prefixed with data-? Thank you!

Source: https://facebook.github.io/react/docs/jsx-gotchas.html#custom-html-attributes

Hello there,

I just started to work with your grid system and I have to say it's pretty awesome. Very good job to you!

Anyway I have a little request for you. It should be great to specify for each breakpoints what we want to do with our grid with data-attribute or whatever.

For exemple:

.grid[data-xs="column wrap-reverse justifyCenter alignStretch"][data-sm="row-reverse nowrap justifyCenter"]

etc. etc.

Same for cols:

.col-[data-xs="-1 1 0 auto flex-start"]

(order / flex / align-self)

What do you guys think about that ?

Thanks!

I have the following HTML:

<div class="grid">
  <div class="col-12">
    <div class="box"></div>
  </div>
  <div class="col-3_sm-12">
    <div class="box"></div>
  </div>
  <div class="col-9_sm-12">
    <div class="box"></div>
  </div>
  <div class="col-3_sm-12">
    <div class="box"></div>
  </div>
  <div class="col-9_sm-12">
    <div class="box"></div>
  </div>
  <div class="col-3_sm-12">
    <div class="box"></div>
  </div>
  <div class="col-9_sm-12">
    <div class="box"></div>
  </div>
  <div class="col-6_xs-12 grid">
    <div class="col-6_sm-12">
      <div class="box"></div>
    </div>
    <div class="col-6_sm-12">
      <div class="box"></div>
    </div>
  </div>
  <div class="col-6_xs-12 grid">
    <div class="col-6_sm-12">
      <div class="box"></div>
    </div>
    <div class="col-6_sm-12">
      <div class="box"></div>
    </div>
  </div>
  <div class="col-6_xs-12 grid">
    <div class="col-6_sm-12">
      <div class="box"></div>
    </div>
    <div class="col-6_sm-12">
      <div class="box"></div>
    </div>
  </div>
  <div class="col-6_xs-12 grid">
    <div class="col-6_sm-12">
      <div class="box"></div>
    </div>
    <div class="col-6_sm-12">
      <div class="box"></div>
    </div>
  </div>
  <div class="col-3_sm-12">
    <div class="box"></div>
  </div>
  <div class="col-9_sm-12">
    <div class="box"></div>
  </div>
  <div class="col-12">
    <div class="box"></div>
  </div>
</div>

When I load your css via cdnjs I get the result I want:

When I include your SASS files into my SASS files I get the following result:

Working example: https://jsfiddle.net/dg4k84zj/.

Would it be possible to fix that? I would prefer to import the sass files instead of using the generated CSS, since I want to be able to access your SASS variables... Thank you!

Hi, I have forked your repo and added some changes to the SASS version.
Now the grid is generated with a for loop and you can specify how many columns you want it to be. I can't send a pull request because there are a lot more changes, but if you are interested in the changes, the repo is here. I think I'll probably rename my fork as I am going to add breaking changes (changing the media queries from max-width to min-width, as I think it is more intuitive and it is mobile-first).

BTW, there are several errors here and here. Also here.

For example:
<div class="col-1_xs-12_sm-0_md-9_lg-12">...</div>

It seems this div must be displayed on xs, md and lg sizes, and be hidden on sm.
But it's not working, cause on xs-screen div inherits "display: none" by sm-size.

Is it a bug and how to fix it? Thanks.

Hello,

Juste a little > missing in the website, section: "... and nesting in the grid:"

Have a nice day !

I am having a problem adding an img tag inside a nested grid. For some reason it creates a gap at the bottom that I can't remove.

Screenshot

HTML

  <div class="grid-noGutter">
    <div class="col-12 grid-noGutter">
      <div class="col-8" data-push-left="off-2">
        <img class="imgContent" src="../img/santander/participant-md.png" alt="">
      </div>
    </div>
  </div>

CSS

.imgContent {
  width: 100%;
  height: auto;
  image-rendering: auto;
  background-color: $gray;
}

Having an issue where elements placed inside the divs with a class of col also appear in columns themselves. For example,

Displays like this with the heading and the paragraph next to each other.

I understand I could probably fix this by adding an additional div, but I would rather not add unnecessary markup if I can avoid it.

hey @devlint

the existing breakpoints (which use max-width) don't make too much sense to me.

for example, an iphone 5 has a res of 320 x 568. if a user rotates the phone to gain almost 2x the screen width, there's no additional content that can become visible. the breakpoints that exist in gridlex are actually designed for min-width media rules.

what i had to do is override the existing breakpoints to subtract 1px from each of them to get the responsive behavior that users would expect from changing device orientations:

$gl-mq-list: (
  lg: "screen and (max-width: 1279px)", // 80em - 1px
  md: "screen and (max-width: 1023px)", // 64em - 1px
  sm: "screen and (max-width: 767px)", // 48em - 1px
  xs: "screen and (max-width: 567px)" // 35.5em - 1px
) !default;

sadly, i don't think it's possible to stick with ems without using non-intuitive awkward decimals.

cf. philipwalton/flexbugs#58

There doesn't seem to be a way to hide content for greater than 1280px / 'lg' (see below). Is there a way that I'm missing? Or should I add my local overrides?

.col
-* (1 to 12)
_xs-* (0 to 12)
_sm-* (0 to 12)
_md-* (0 to 12)
_lg-* (0 to 12)
e.g.

// Added the following locally to get it to work

$gl-xl: "screen and (min-width: 80em)" !default; // max 1280px

@media #{$gl-xl}{
@include makeGridByNumber(_xl);
}

@media #{$gl-xl}{
@include makeCol(_xl);
@include makeOff(_xl);
}

@media #{$gl-xl}{
[class*="#{$gl-gridName}"] {
> :not([class*="_xl-0"]){
display: block;
}
&:not([class*="_xl-0"]) {
display: flex;
}
>[class*="_xl-0"],
&[class*="-equalHeight"] > [class*="_xl-0"]{
display: none;
}
}
}

What are your thoughts on adding col-0 classes? These would function as utility classes to hide columns at various breakpoints.

For example, a sidebar may look like "col-2_md-3_sm-0" to indicate that it should be hidden on mobile.

I'm happy to submit a PR if this is something others would find useful.

PS- This grid seriously rocks. Thanks!

This works: col-0 but this does not seem to col-2_xs-0 (for any breakpoint).

The CSS that sets display: block only checks [class*="col-"]:not([class*="grid"]):not([class*="col-0"]) {

Adding !important to lines 192, 195 and 199 seems to fix this (although likely breaks something else)

Appears while using the bottom scroll normalize.css. If you set the margin to the default value (8px), the scroll disappears.
ps: abolish the right margin at grid- *, scroll disappears.

Hi,
The grid is fantastic and very flexible, we love it! Unfortunately, there are no breakpoints for REVERSE, FIRST or LAST. That means that if, for example, I need columns to go side-by-side on desktop, but one over the other (in REVERSE order) on mobile, I cannot do it :(

Could you please integrate thos enice xs, sm, md breakpoints for these classes as well?

Thanks!

I think I miss something in the @mixin makeCol($col) mixin:

//************************
//    VARIABLES
//************************
$gl-gridName:   grid !default;
$gl-colName:    col !default;
$gl-gutter:     .8rem !default; // Total
$gl-col-bottom: $gl-gutter !default;

$gl-xs:        "screen and (max-width: 35.5em)" !default; // up to 568px
$gl-xs-plus:   "screen and (min-width: 35.5em)" !default; // up to 568px
$gl-sm:        "screen and (max-width: 48em)" !default; // max 768px
$gl-sm-plus:   "screen and (min-width: 48em)" !default; // max 768px
$gl-md:        "screen and (max-width: 64em)" !default; // max 1024px
$gl-md-plus:   "screen and (min-width: 64em)" !default; // max 1024px
$gl-lg:        "screen and (max-width: 80em)" !default; // max 1280px
$gl-lg-plus:   "screen and (min-width: 80em)" !default; // max 1280px



$glp_col-1: (100%/12);
$glp_col-2: ($glp_col-1*2);
$glp_col-3: ($glp_col-1*3);
$glp_col-4: ($glp_col-1*4);
$glp_col-5: ($glp_col-1*5);
$glp_col-6: ($glp_col-1*6);
$glp_col-7: ($glp_col-1*7);
$glp_col-8: ($glp_col-1*8);
$glp_col-9: ($glp_col-1*9);
$glp_col-10: ($glp_col-1*10);
$glp_col-11: ($glp_col-1*11);
$glp_col-12: ($glp_col-1*12);
$glp_col-13: ($glp_col-1*13);
$glp_col-14: 100%;

$glp_col-5-14: (100%/5);
$glp_col-7-14: (100%/7);
$glp_col-8-14: (100%/8);
$glp_col-9-14: (100%/9);
$glp_col-10-14: (100%/10);
$glp_col-11-14: (100%/11);
$glp_col-13-14: (100%/13);

// Function to generate the grid by number
@mixin makeGridByNumber($grid)
{
  [class*="#{$grid}-1"] > .#{$gl-colName}, [class*="#{$grid}-1"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-14; max-width: $glp_col-14; }
  [class*="#{$grid}-2"] > .#{$gl-colName}, [class*="#{$grid}-2"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-7; max-width: $glp_col-7; }
  [class*="#{$grid}-3"] > .#{$gl-colName}, [class*="#{$grid}-3"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-3-14; max-width: $glp_col-3-14; }
  [class*="#{$grid}-4"] > .#{$gl-colName}, [class*="#{$grid}-4"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-4-14; max-width: $glp_col-4-14; }
  [class*="#{$grid}-5"] > .#{$gl-colName}, [class*="#{$grid}-5"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-5-14; max-width: $glp_col-5-14; }
  [class*="#{$grid}-6"] > .#{$gl-colName}, [class*="#{$grid}-6"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-6-14; max-width: $glp_col-6-14; }
  [class*="#{$grid}-7"] > .#{$gl-colName}, [class*="#{$grid}-7"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-2; max-width: $glp_col-2; }
  [class*="#{$grid}-8"] > .#{$gl-colName}, [class*="#{$grid}-8"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-8-14; max-width: $glp_col-8-14; }
  [class*="#{$grid}-9"] > .#{$gl-colName}, [class*="#{$grid}-9"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-9-14; max-width: $glp_col-9-14; }
  [class*="#{$grid}-10"] > .#{$gl-colName}, [class*="#{$grid}-10"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-10-14; max-width: $glp_col-10-14; }
  [class*="#{$grid}-11"] > .#{$gl-colName}, [class*="#{$grid}-11"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-11-14; max-width: $glp_col-11-14; }
  [class*="#{$grid}-12"] > .#{$gl-colName}, [class*="#{$grid}-12"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-12-14; max-width: $glp_col-12-14; }
  [class*="#{$grid}-13"] > .#{$gl-colName}, [class*="#{$grid}-13"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-13-14; max-width: $glp_col-13-14; }
  [class*="#{$grid}-14"] > .#{$gl-colName}, [class*="#{$grid}-14"] > [class*='#{$gl-colName}-']{ flex-basis: $glp_col-1; max-width: $glp_col-1; }
}

// Function to generate the grid by columns
@mixin makeCol($col)
{
    [class*='#{$gl-gridName}'] {
        > [class*="#{$col}-1"]{ flex-basis: $glp_col-1;max-width: $glp_col-1; }
        > [class*="#{$col}-2"]{ flex-basis: $glp_col-2;max-width: $glp_col-2; }
        > [class*="#{$col}-3"]{ flex-basis: $glp_col-3;max-width: $glp_col-3; }
        > [class*="#{$col}-4"]{ flex-basis: $glp_col-4;max-width: $glp_col-4;}
        > [class*="#{$col}-5"]{ flex-basis: $glp_col-5;max-width: $glp_col-5;}
        > [class*="#{$col}-6"]{ flex-basis: $glp_col-6;max-width: $glp_col-6;}
        > [class*="#{$col}-7"]{ flex-basis: $glp_col-7;max-width: $glp_col-7;}
        > [class*="#{$col}-8"]{ flex-basis: $glp_col-8;max-width: $glp_col-8;}
        > [class*="#{$col}-9"]{ flex-basis: $glp_col-9;max-width: $glp_col-9;}
        > [class*="#{$col}-10"]{ flex-basis: $glp_col-10;max-width: $glp_col-10;}
        > [class*="#{$col}-11"]{ flex-basis: $glp_col-11;max-width: $glp_col-11;}
        > [class*="#{$col}-12"]{ flex-basis: $glp_col-12;max-width: $glp_col-12;}
        > [class*="#{$col}-13"]{ flex-basis: $glp_col-13;max-width: $glp_col-13;}
        > [class*="#{$col}-14"]{ flex-basis: $glp_col-14;max-width: $glp_col-14;}
    }
}

// Function to generate the offset
@mixin makeOff($off)
{
    [class*="#{$gl-gridName}"]{
        > [data-push-left*="#{$off}-0"]{ margin-left: 0; }
        > [data-push-left*="#{$off}-1"]{ margin-left: $glp_col-1; }
        > [data-push-left*="#{$off}-2"]{ margin-left: $glp_col-2; }
        > [data-push-left*="#{$off}-3"]{ margin-left: $glp_col-3; }
        > [data-push-left*="#{$off}-4"]{ margin-left: $glp_col-4; }
        > [data-push-left*="#{$off}-5"]{ margin-left: $glp_col-5; }
        > [data-push-left*="#{$off}-6"]{ margin-left: $glp_col-6; }
        > [data-push-left*="#{$off}-7"]{ margin-left: $glp_col-7; }
        > [data-push-left*="#{$off}-8"]{ margin-left: $glp_col-8; }
        > [data-push-left*="#{$off}-9"]{ margin-left: $glp_col-9; }
        > [data-push-left*="#{$off}-10"]{ margin-left: $glp_col-10; }
        > [data-push-left*="#{$off}-11"]{ margin-left: $glp_col-11; }
        > [data-push-left*="#{$off}-12"]{ margin-left: $glp_col-12; }
        > [data-push-left*="#{$off}-13"]{ margin-left: $glp_col-13; }

        > [data-push-right*="#{$off}-0"]{ margin-right: 0; }
        > [data-push-right*="#{$off}-1"]{ margin-right: $glp_col-1; }
        > [data-push-right*="#{$off}-2"]{ margin-right: $glp_col-2; }
        > [data-push-right*="#{$off}-3"]{ margin-right: $glp_col-3; }
        > [data-push-right*="#{$off}-4"]{ margin-right: $glp_col-4; }
        > [data-push-right*="#{$off}-5"]{ margin-right: $glp_col-5; }
        > [data-push-right*="#{$off}-6"]{ margin-right: $glp_col-6; }
        > [data-push-right*="#{$off}-7"]{ margin-right: $glp_col-7; }
        > [data-push-right*="#{$off}-8"]{ margin-right: $glp_col-8; }
        > [data-push-right*="#{$off}-9"]{ margin-right: $glp_col-9; }
        > [data-push-right*="#{$off}-10"]{ margin-right: $glp_col-10; }
        > [data-push-right*="#{$off}-11"]{ margin-right: $glp_col-11; }
        > [data-push-right*="#{$off}-12"]{ margin-right: $glp_col-12; }
        > [data-push-right*="#{$off}-13"]{ margin-right: $glp_col-13; }
    }
}

Is there any changelog to what has been changed since last few versions ? I noticed at least one thing (push-* changed to data-push-*). I don't want to run around my files to find what i need to fix.

I'm liking your grid system quite a bit, but would love to see an option to not have to put extra classes into the DOM if possible. Sort of the same thing that Bootstrap does currently with makeContainer(), makeRow(), etc. This particularly becomes useful as you can't use @extend's in Media Queries nor can you do stuff like this:

.header {
  background-color: #fff;


  &__inner {
    @extend .grid;
    @extend .container;
  }

  &__logo {
    @extend .col;
  }

  &__nav {
    @extend .col;
  }
}

You can see this on the project home page, the nested grid example there does not work. I think due to line 193 of gridlex.scss where it sets every child of grid that isn't set to "0" to display block (I think), but the nested grid wants to be display flex.

[attr*=value] selectors for class names in this context are likely to have unintended consequences, particularly with such short class values and no namespacing. (Imagine classes such as collapse or color.)

Sticking with the approach of loose-matching selectors, the col selector looks like it could be more safely expressed as .col, [class*="col-"] without breaking compatibility. What do you think of this?

I made a page to reference sites that use Gridlex:
http://gridlex.devlint.fr/expo.html

You have URL you would like to share? You can help me to add new sites if you want.
Thx!

With the latest NPM version, the docs/gridlex.css file (as well as the minified version) appears to be using the gridlex selector, rather than the class selector by default. As per commit 6c5b5cd I assume this is not intentional?

Thanks!

I think you guys should mention that in the docs.

The following screenshot has the latest version on the left, with the older version on the right:

https://jross.me/l/v836m

As you can see, all of the classes on the left use a starts with operator, which triggers unexpected styling on classes such as colorBand, etc. This also causes another issue with elements that have col as a class, but not the first class. For example, using someClass col inside of a grid-6 won't trigger the latest rule in 2.3.1 as it does not start with col.

Is this intended behaviour, or a regression from the previous version?

Great work on the library!

It's making my life much easier, except that I've run into a snag with conflicting CSS names, primarily with the generic "grid" class. I've got a few other libraries which unfortunately also use that name, and it's causing chaos.

Allowing Gridlex to use a class prefix variable would clear off class name re-use issues forever! i.e. gl_grid, gl_col etc...

There seems to be a bug where you cannot vertically center equal height columns -- see example. Is there are a way around this?

http://codepen.io/instituteofcode/pen/evWmPL

I can think of a hacky fix, but is there any way reason it would behave like this?

Cheers,
Tina

How can I solve Clearfix issues with Gridlex? I've tried the solution below without success.

Thank you in advance.

.cf:before,
.container:after {
  content: "";
  display: table;
}

.cf:after {
  clear: both;
}
/* IE 6/7 */
.cf {
  zoom: 1;
}

Foundation 6 does this thing where in your sass files you can go @include grid-column(6) (for 6 columns, but any number from 1-12 is valid) and it generates the styles for you in whatever block you want.

Useful for keeping your classes clean.

Use as so:

.wrapper {
    @include grid-row();
}

.main-block {
    @inclide grid-column(8);
}

.sidebar {
    @include grid-column(4);
}

Is there any to use gridlex as such?

Foundation way: http://foundation.zurb.com/sites/docs/grid.html

On version 2.2 the dist folder is no longer present. Any reason for that? Since there are bugs on the SASS version (#16) I would like to still be able to use the compiled files while those bugs aren't fixed. I know the CDN version is also there but I don't want to be dependent on it.

Could this change be reverted? Thanks!

Really loving this grid so far! However I'm wondering, Is there any way to accomplish something like the following?

<div class="col-sm-10" data-push-right="off-sm-1" data-push-right="off-sm-1">Content</div>

Thanks alot!

Hi,
I recently read this article abouts the css selectors based on regular expressions: https://github.com/CSSLint/csslint/wiki/Disallow-selectors-that-look-like-regular-expressions

It seems all the selectors [class*="..."] you use in your code cost a lot for the browser, because it needs to check all existing DomElements in the page to check if its class verify or not the regExp (even if this DomElement doesn't works at all with flexgrid).

So I'm wondering about the performances of your grid compared to another one that doesn't use your suffix management, ie instead of use a class name "grid-spaceAround-center", use a more simple "grid spaceArround center" class.

The problem for me is that your code is more readable / usable than others that's why I'm hesitant.

To improve this potential problem, i've got 3 possible solution for you.

• instead of managing your work in the "class" attribute, your can use another data-attribute like this:

<div flexGrid="grid-spaceAround">
  <col flexGrid="col-2"></col>
</div>

The advantage of this technique is only the elements that are concerned with the flexGrid management will be impacted with the CSS RegExp tests, because others will not have the data-attribute at all.
And in term of code in your sass file, it has a very small impact, because you can create a var
$gl-attributeName: class
and inside your mixins/code replace
[class*='#{$gl-gridName}']
with
[#{$gl-attributeName}*='#{$gl-gridName}']

And with this, basically everyone will have the same usage, and advanced user can change the attribute name if they want

• Second possibility it to start all your css by a static class name:
  instead of [class*="#{$gl-gridName}-"] { .all nesting } for example use this
  .gridlex[class*="#{$gl-gridName}-"] {...}
  With this, the browser will check the existance of the class gridlex before any Regexp test I think.

• Last possibility is to declare all existing possibilities as static classes:
  .grid-noGutter: {} .grid-noWrap: {} .grid-center: {} .grid-noGutter-noWrap: {} .grid-noGutter-center: {} grid-noGutter-noWrap-centerd: {}
  This can be done programmatically, but generates a very big css file (and perhaps not better in term of performances due to all the existing combinations.

I've no idea how to manage a benchmark for all these solutions because it's fully linked to the rendering / painting for the browser, so I cannot test all my ideas.

Are you interested by developping one of them, that can be backward compatible with olders versions ?
I can help you if you want.

Thanks

Expectation: .grid-6 > .col-2 = 2/6 = 1/3 = 100% / 3
Reality: .grid-6 > .col-2 = 2/12 = 1/6
It seems like only one 12-columns grid supported?

Hello,

I couldn't manage to find a license to use this grid system.

Could you please advise what license it is?

Thanks

Gridlex will be perfect if it would has a class like -maxHeight
for that cases where you want a sidebar with the max height of the window no matter of the automatic size of the children elements of that div with .col

Hi,

Do you plan to support stylus, in addition to less and sass? It's always the left-behind one…

Thanks!

Hey all, love the library but I would love a way to add more breakpoints.. I have tried to manually add it using...

// Create XLG breakpoint
$gl-xlg: 'screen and (max-width: 120em)' !default; // max 1920px

// Must load after variables
@import '~gridlex/src/gridlex';

@media #{$gl-xlg} {
  @include makeGridByNumber(_xlg);
}

@media #{$gl-xlg} {
  @include makeCol(_xlg);
  @include makeOff(_xlg);
  @include makeFirstLast(_xlg);
}

Though this works it messes up all other breakpoints. because they're declared in a particular order, the only way ive been able to get it to work is to rerun the same mixin calls but with mine on top and in order.

Am I missing something? Is this not possible?

I'm trying to get a simple layout with gutters. Here is my code:

		<div class="grid">
			<div class="col-6">Col</div>
			<div class="col-6">Col</div>      
		</div>

What am I missing that would cause the cols above to be displayed with no gutters?

Thank you

If i use the class .grid-equalHeight it is working fine in Chrome, but not in Safari for Mac. Any ideas how to work this out? Any fixes planing?

as it is stated in your guide:
Columns can be hidden at breakpoints using _*-0 (e.g. col-4_md-6_sm-0)

however this does not work if grid class has "-noGutter", "-center" and perhaps any other suffix. It seems to be working only on class="grid"

can you explain why this happens and is it supposed to work this way?

React.js restricts allowed list of attributes and it's not possible to use that. Meanwhile it's not a valid HTML. Why not just use extra CSS-classes?

I made a test page using your cards layout. The page uses handlebars to load a template populated by json data. The html loads as expected but the the resulting grid layout shows all the cards in a single column and as one scrolls down the page, each card gets smaller and smaller until they disappear! I can't find any errors in the code I am using so far but totally confused as to why this happens with the css. Here is a link to the test page:
Demo page
Hope I am just missing something simple to get this to work.

This class interfering with all the element

[class*="col-"]:not([class*="grid"]):not([class*="col-0"]) {
display: block;
}