Geek Answers Handbook

Susy 2: fixed-width sidebar with area of ​​main fluid content

Using Susy 2 (candidate for release), I'm trying to figure out how to create a simple fluid layout with a fixed width sidebar — either left or right — I'm happy with the first and last keywords. Can someone give me any guidance on how to do this in Susy 2?

Thank!

+4
source share
2 answers

There are several ways to combine fixed / liquid layouts, depending on your specific case.

  • Insulate the side panel.

    - .

    .side {
  @include span(3 static isolate);
}

.main {
  @include full;
  padding-left: span(3 static wide);
}

// or...

.main {
  margin-left: span(3 static wide);
}

    span(3 static) 3 , / column-width. isolate , . wide, . , 200px. .

  • .

    , . Susy 2, :

    .side {
  position: absolute;
  left: 0;
  top: 0;
  width: span(3 static);
}

.main {
  padding-left: span(3 static wide);
}

  • - hack.

    , . overflow: hidden;

    .side {
  @include span(3 static);
}

.main {
  overflow: hidden;
}

    , - . , hackey downsides, :

    .main {
  display: table-cell;
  vertical-align: top;
  width: 10000px;
}
+10

Susy . Susy ( "" ), SCSS ( CSS, ):

$side-bar-width: 250px; // whatever width you want

.side {
    float: left;
    width: $side-bar-width;
}

.main {
    width: calc(100% - #{$side-bar-width});
}

.

CSS calc().

+2

More articles:


All Articles