Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
naimlatifi5 opened this issue Nov 29, 2018 · 2 comments

Comments

@naimlatifi5
Copy link

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
Copy link

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

@scrobbleme
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants