Hi,

I have a question about the new layout system. Is there a way (or will there be a way) to make a static grid layout?

Lets say I'd like to have this kind of layout :

[ fixed col ][ fluid col ][ fixed col ]

I tried to add math: static inside $susy (susy settings variable) located inside layout ▸ site-builder ▸ sass ▸ _site-builder-base.scss , but since it requires a fixed column-width, it doesn't feel right.

It seems to have a way to do it, but I don't know how to make it in the actual theme version. I don't want this post to be exclusively about susy. I'd just like to know if the theme is (or will) be flexible enough to reach my goal.

Thanks a lot

Comments

JFKiwad’s picture

JFKiwad
Location Montreal
CreditAttribution: JFKiwad commented
Issue summary: View changes
JFKiwad’s picture

JFKiwad
Location Montreal
CreditAttribution: JFKiwad commented
Issue summary: View changes
Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Good question!

Basic answer to your question is yes, Susy can do this. According to the stack overflow issue you can use the isolate method.

Give me a couple of hours, I am rather flat out at the moment, I can probably figure out how to make this work and put together some docs on how to do it, or even provide some code, I think its something that will be needed by others as well.

I've done a few static layouts with Susy but none with a flexible main column, just strait static layouts (so called adaptive-responsive design) etc.

Note that you can build your own layout plugin and use it, however this is not well documented at this stage. You can use any layout system you want, Bootstrap, Zen grids etc, all the theme cares about is the layout plugin is done the right way and provides a bunch of CSS files with layouts - again I need to document this and its at the point now where I can probably write those docs.

Basically the theme doesn't care about Susy very much, UNLESS you are using the UIKit as well, then it does care very much because the UIKit makes extensive use of the $flow-direction variables - however i am getting off the point here a bit.

partyp’s picture

partyp CreditAttribution: partyp commented

Hi I am interested in this feature as well, as I want first sidebar fixed. In D7 you could enter sidebar widths in the UI theme settings, but I am not entirely sure of the recommended way to do this now in D8.

To solve I changed "_page.scss" to the following...

$side-bar-width: 225px;
// Main
@media #{$wide}{
  .pr-main {
    &__rw {}
    &__content {
      width: calc(100% - #{$side-bar-width}) !important;
    }
    &__sidebar-first {
      width:$side-bar-width !important;
      margin-right:0 !important;
    }
    &__sidebar-second {}
  }
}

Any guidance would be appreciated!