WEM + Lost Grid Methodology

Question

WEM + Lost Grid Methodology

Navigation

#1 by (0 votes)

0

I would like to know what would be the best practice to use different grid sizes with the same block.

Ex:

I have a Card component, and on my dashboard page I wish to have 4 Card s per line
I also use this component elsewhere, on the users page, I want to display 2 cards per line

In case I would have:

// dashboard.html

| Card1 | Card2 | Card3 | Card4 |
| Card5 | Card6 | Card7 | Card8 |

// users.html

|     Card1     |     Card2     |
|     Card3     |     Card4     |


// Estrutura

<div class="Card">
    <div class="Card__title">
        Meu titulo
    </div>
    <div class="Card__content">
        Meu conteúdo
    </div>
</div>

I thought of the following options:

// Card.scss

.Card {
    border: solid 1px black;
}

.Card__title {
    display: block;
    border-bottom: solid 1px black;
}

Create a custom component for each page

// Dash-cardgrid.scss

.Dash-cardgrid {
    > .Card {
            lost-column: 1/4;
    }
}

// User-cardgrid.scss

.User-cardgrid {
    > .Card {
            lost-column: 1/2;
    }
}

Create a component for each page

// Dash-card.scss

.Dash-card{
    @extend .Card;
    lost-column: 1/4;
}

// User-card.scss

.User-card{
    @extend .Card;
    lost-column: 1/2;   
}

Create modifiers

// Card.scss

.Card {
    ...
    &--four-by-row {
        lost-column: 1/4;   
    }

    &--two-by-row {
        lost-column: 1/2;   
    }
}
...

Create a gray utility

// utils.scss

.utils {
    ...
    &--four-by-row {
        lost-column: 1/4;   
    }

    &--two-by-row {
        lost-column: 1/2;   
    }
}
...

Use some grid of some framework (but the goal was to make html cleaner and easier to understand

html html5 css sass bem

asked by anonymous 30.12.2015 / 21:15

1 answer

How to pause a progress of a Notification? Connecting webservice android

score 0 · Accepted Answer

I found the answer in this article:

link

Basically, I will create the components normally, and if I need to work with the grid in a specific location, I can create a module of the part of the application I'm working on and overwrite the component

<div class="my-module">
  <div class="my-module__child-component">
    <div class="child-component">
      <div class="child-component__grandchild-component">
        <div class="grandchild-component--modifier"></div>
      </div>
    </div>
  </div>
</div>