Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Want to make grid system extendable with LESS

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #46316
    DennisJohnsen
    Participant

    Hi all!

    I have this 12 column grid system i have “semi made” for personal use. But it has always had to have classes in the DOM. But since LESS 1.4.1 is now out, i wanted to be able to make it extendable directly in the stylesheet instead of having the DOM filled with classes and extra elements.

    But one of the key features about the grid system, is that it has breakpoint prefixes on the classes for verious screen sizes (mobile first) (no prefix, bp1-, bp2- etc..). And that it has changing gutter sizes via a class on the row element (.row, .row–sticky, .row–narrow, .row–custom). The rows dosn’t have bp prefixes in my codepen, but will later, just getting the basic to work first.

    Now i’m trying to do what i want, but i have no idea how to get the extend to work in the way i want.

    I have this [Codepen](http://codepen.io/dennisjohnsen/pen/xHqgl “LESS Grid system with extend”) and i hope you can understand what i am trying to do.

    Problem is that the two tests in the bottom gives me the following compiled CSS that is wrong:
    .ROWROWROW > .col,
    .row–sticky > .NAVIGATION {
    padding-left: 0;
    }

    But i want:
    .row–sticky > .col,
    .ROWROWROW > .COLCOLCOL,
    .HEADER > .NAVIGATION {
    padding-left: 0;
    }

    Kind regards,
    Dennis

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.