collision class names to an element that starts with modified grid name 'row'

naimlatifi5 commented 5 years ago

Hi,

I have noticed that there is a collisions with class names when using gird. I have changed the grid name to show as row $gl-gridName: 'row'. Let's say that I have a div element and inside of that div I have a class name .arrow-dropdown -> then the there is style which will be applied to element from grid because it has detected a word row inside "arrow".

Thanks! /Naim

scrobbleme commented 5 years ago

Can confirm. This also happens, when you have custom classes containing "col" .

scrobbleme commented 5 years ago

@naimlatifi5 Btw. one easy way to avoid such collisions is to build gridlex with custom parameters.

i.e.

custom_gridlix.scss

// Gridlex
$gl-gridName: gridlex-row;
$gl-colName: gridlex-col;

$gl-gutter: 30px; // Total left + right
$gl-gutter-vertical: 15px;
$gl-mq-list: (
        lg: 1200px,
        md: 992px,
        sm: 768px,
        xs: 480px
)

@import "gridlex-master/src/gridlex";

Then you can use it like this:

  <div class="gridlex-row-3_xs-2">  
     <div class="gridlex-col">

To be more safe you could even overwrite $gl-attributeName to use a different attribute instead of class, i.e. data-gridlex.

devlint / gridlex

collision class names to an element that starts with modified grid name 'row' #87