Skip to content

.grid-item-first et *-last et leurs enfants héritent de classes non voulues #222

Closed
@PhilippeVay

Description

Lorsqu'ils sont un enfant de .grid, .grid-item-first et .grid-item-last (qui rajoutent un order: -1 ou +1 pour chambouler leur ordre d'affichage par rapport à celui du code HTML) matchent la règle de grillade :

[class*=" grid-"],
  [class^="grid-"] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    // …
}

Leurs enfants matchent également :

  [class*=" grid-"],
  [class^="grid-"] {
    // …
    & > * {
      box-sizing: border-box;
      min-width: 0;
      min-height: 0;
    }
}

situées dans _grillade.scss ligne 11

Codepen : http://codepen.io/PhilippeVay/pen/oYbvYL?editors=1100

=> ces classes ne devraient pas pouvoir être confondues par grillade avec celles créant un système de grille (.grid et .grid-quelque-chose) ou autrement dit .grid-quelquechose devrait être réservé aux flex containers créant une grille.
Je pense que le plus simple est de les renommer (parce que rajouter des :not([class*="grid-item-"]), comment dire...) ? Ça ne respectera pas une notation à la SMACSS m'enfin .one-fourth non plus et ici c'est cette notation qui pose problème. Et la grille n'est pas un module ou composant mais un réceptacle à modules ^_^
Propales : item-grid-last, item-last, pos-grid-last, last-grid-item.

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions