Menu icon Foundation

My Posts

No Content

My Comments

Andrew J. Holden commented on Nick Caldwell's post about 5 years

Bit late to the game on this, but I'd echo Nick's sentiments. If we could remove the dependency on certain markup elements, or at least add a few more valid element options - it would be very helpful to those of us who are working on complex state-driven applications :)

  • Thanks!

Andrew J. Holden commented on frank nelson's post about 5 years

Couple of notes on this:

@Tim - Due to the addition of subtabs I made the targeting for bordering more specific, and introduced some sibling and other selectors. This makes the CSS more dependent on the normative Foundation style, but in the context of a "subtab override" makes sense.

@ Tim @ SCSS - Included $primary-color here and some notes on other options available.

@ All - Included a media query for "Foundation 4 tab styles" as I found the F4 tab-pattern breaks down a bit on small screens. Planning to look at doing a swap in via interchange or another method. Mobile-second in this case :)

@ All - Note that this SCSS will generate CSS that is specific to a pattern, although it could be easily updated for other HTML element uses (e.g, dd, dt, etc.)

Andrew J. Holden commented on frank nelson's post about 5 years

Hi Frank, James, Tim, et. al.

I also needed to apply Foundation 4 "tab styles" (borders) to Foundation 5.

The F5 tab method is lovely, and a separation from the accordion pattern makes sense in my opinion.

However, I'm using "tabs" for a complex interface which also includes "subtabs". In that context, the visible border helps usability (unlike most cases where borders actually make the page more difficult to use.)

Long story short, I took Tim's SCSS code and updated it a bit, then added a new option for subtabs.

// add borders to Foundation 5 tabs
@media #{$medium-up} {
  ul.tabs {
     > li > a {
       border-width: 1px;
       border-style: solid;
       border-color: #ccc #ccc #fff;
       margin-right: -1px;
     }
     > li:not(.active) > a {
       border-bottom: solid 1px #ccc;
     }
   }
  .tabs-content {
    border: 1px solid #ccc;
    .content {
      padding: .9375rem;
      margin-top: 0;
    }
    margin: -1px 0 .9375rem 0;
  }
}

// if tabs container has a background color
.tabs-content { background-color: #fff; }

// create subtab styles
$subtab-item-color: $primary-color;

ul.tabs.wx-subtabs {
  margin: 0 0 .9375rem;
  text-transform: capitalize;

  > li > a, {
    font-size: .875rem;
    margin:  0;
    padding: .25rem .5rem;
    border: none;
    background-color: transparent;
  }
  > li.active a {
    background-color: $subtab-item-color;
    color: #fff; // bg-lightness option is available for you fancy folks
    //@include radius($button-radius);
  }
  + .tabs-content {
    margin: 0;
    border: none;
      > .content {
        padding-right: 0;
        padding-left:  0;
      }
  }
}

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Nick Caldwell's post about 5 years

Bit late to the game on this, but I'd echo Nick's sentiments. If we could remove the dependency on certain markup elements, or at least add a few more valid element options - it would be very helpful to those of us who are working on complex state-driven applications :)

  • Thanks!

You commented on frank nelson's post about 5 years

Couple of notes on this:

@Tim - Due to the addition of subtabs I made the targeting for bordering more specific, and introduced some sibling and other selectors. This makes the CSS more dependent on the normative Foundation style, but in the context of a "subtab override" makes sense.

@ Tim @ SCSS - Included $primary-color here and some notes on other options available.

@ All - Included a media query for "Foundation 4 tab styles" as I found the F4 tab-pattern breaks down a bit on small screens. Planning to look at doing a swap in via interchange or another method. Mobile-second in this case :)

@ All - Note that this SCSS will generate CSS that is specific to a pattern, although it could be easily updated for other HTML element uses (e.g, dd, dt, etc.)

You commented on frank nelson's post about 5 years

Hi Frank, James, Tim, et. al.

I also needed to apply Foundation 4 "tab styles" (borders) to Foundation 5.

The F5 tab method is lovely, and a separation from the accordion pattern makes sense in my opinion.

However, I'm using "tabs" for a complex interface which also includes "subtabs". In that context, the visible border helps usability (unlike most cases where borders actually make the page more difficult to use.)

Long story short, I took Tim's SCSS code and updated it a bit, then added a new option for subtabs.

// add borders to Foundation 5 tabs
@media #{$medium-up} {
  ul.tabs {
     > li > a {
       border-width: 1px;
       border-style: solid;
       border-color: #ccc #ccc #fff;
       margin-right: -1px;
     }
     > li:not(.active) > a {
       border-bottom: solid 1px #ccc;
     }
   }
  .tabs-content {
    border: 1px solid #ccc;
    .content {
      padding: .9375rem;
      margin-top: 0;
    }
    margin: -1px 0 .9375rem 0;
  }
}

// if tabs container has a background color
.tabs-content { background-color: #fff; }

// create subtab styles
$subtab-item-color: $primary-color;

ul.tabs.wx-subtabs {
  margin: 0 0 .9375rem;
  text-transform: capitalize;

  > li > a, {
    font-size: .875rem;
    margin:  0;
    padding: .25rem .5rem;
    border: none;
    background-color: transparent;
  }
  > li.active a {
    background-color: $subtab-item-color;
    color: #fff; // bg-lightness option is available for you fancy folks
    //@include radius($button-radius);
  }
  + .tabs-content {
    margin: 0;
    border: none;
      > .content {
        padding-right: 0;
        padding-left:  0;
      }
  }
}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content