Menu icon Foundation

My Posts



My Comments

Marco M. Jaeger commented on Marco M. Jaeger's post almost 4 years

no mixin for that

Marco M. Jaeger commented on Marco M. Jaeger's post almost 4 years

This is just not working form me - I guess the reason is that I'm nesting two rows without a column in between - I just don't know how to set this up.

Marco M. Jaeger commented on Marco M. Jaeger's post almost 4 years

In order to make this work and match the columns in the footer area I had to change the code like this:

.content-sidebar-wrap {
    @include flex-grid-row(collapse);
    //@include flex-grid-column(12);
    flex: 1 0 100%;
}

Marco M. Jaeger commented on Marco M. Jaeger's post almost 4 years

Thank you Rafi
I think I understand that part - however, I'm struggling terrible with using mixins to apply to a Genesis theme html layout - don't take it personal but I struggled a lot less using Bootstrap 4 to do the same - the main issue is that Bootstrap has a container mixin that basically just sets the max-width per breakpoint.

This is the basic structure of a Genesis theme:

<div class="site-container">
  <div class="site-inner">
    <div class="wrap">
                       <div class="breadcrumb">.....</div>
      <div class="content-sidebar-wrap">
        <div class="content">
          CONTENT
        </div>
        <div class="sidebar-primary">
          SIDEBAR
        </div>
      </div>
    </div>
  </div>
</div>

the .wrap DIV basically limits the page-width - where the max-width should be applied - in order to do so in Foundation I have to apply the row mixin - by the way, I'm using flexbox.

That wrap div shouldn't have any padding and margin: 0 auto;

I guess the breadcrumb div is supposed to be a row as well as a column and the content-sidebar-div is a row and a column again at the same time?

what I came up so far is this:

.wrap {
  @include flex-grid-row();
}

.breadcrumb {
    @include flex-grid-column(12);
}

.content-sidebar-wrap {
    @include flex-grid-row(nest);
    @include flex-grid-column(12);
}

.content {
    @include flex-grid-column(8);
}
.sidebar-primary {
    @include flex-grid-column(4);
}

Am I missing something here - does the above make sense to you - honestly I really miss the Bootstrap container mixin.

Hope you can shed some light please.

Thank you in advance for your input.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Marco M. Jaeger's post almost 4 years

no mixin for that

You commented on Marco M. Jaeger's post almost 4 years

This is just not working form me - I guess the reason is that I'm nesting two rows without a column in between - I just don't know how to set this up.

You commented on Marco M. Jaeger's post almost 4 years

In order to make this work and match the columns in the footer area I had to change the code like this:

.content-sidebar-wrap {
    @include flex-grid-row(collapse);
    //@include flex-grid-column(12);
    flex: 1 0 100%;
}

You commented on Marco M. Jaeger's post almost 4 years

Thank you Rafi
I think I understand that part - however, I'm struggling terrible with using mixins to apply to a Genesis theme html layout - don't take it personal but I struggled a lot less using Bootstrap 4 to do the same - the main issue is that Bootstrap has a container mixin that basically just sets the max-width per breakpoint.

This is the basic structure of a Genesis theme:

<div class="site-container">
  <div class="site-inner">
    <div class="wrap">
                       <div class="breadcrumb">.....</div>
      <div class="content-sidebar-wrap">
        <div class="content">
          CONTENT
        </div>
        <div class="sidebar-primary">
          SIDEBAR
        </div>
      </div>
    </div>
  </div>
</div>

the .wrap DIV basically limits the page-width - where the max-width should be applied - in order to do so in Foundation I have to apply the row mixin - by the way, I'm using flexbox.

That wrap div shouldn't have any padding and margin: 0 auto;

I guess the breadcrumb div is supposed to be a row as well as a column and the content-sidebar-div is a row and a column again at the same time?

what I came up so far is this:

.wrap {
  @include flex-grid-row();
}

.breadcrumb {
    @include flex-grid-column(12);
}

.content-sidebar-wrap {
    @include flex-grid-row(nest);
    @include flex-grid-column(12);
}

.content {
    @include flex-grid-column(8);
}
.sidebar-primary {
    @include flex-grid-column(4);
}

Am I missing something here - does the above make sense to you - honestly I really miss the Bootstrap container mixin.

Hope you can shed some light please.

Thank you in advance for your input.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content