gridlex icon indicating copy to clipboard operation
gridlex copied to clipboard

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

Open naimlatifi5 opened this issue 7 years ago • 2 comments

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

naimlatifi5 avatar Nov 29 '18 21:11 naimlatifi5

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

scrobbleme avatar Mar 27 '19 12:03 scrobbleme

@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.

scrobbleme avatar Apr 05 '19 06:04 scrobbleme