Menu icon Foundation
Some Novice Questions (Tabs, Sass & Ruby)

Hi,
I'm new to Foundation and I'm also not very familiar with Sass.

First, I'm trying to figure out how to put borders around tabs and their containers. It looks like Foundation 4 tabs (formerly called sections?) used to look exactly how I want them.. as seen here...
http://foundation.zurb.com/docs/v/4.3.2/components/section.html#panel1.
So, that's my first question is what is the best way to get that look in Foundation 5?

Second, after a little research, it appears that there's no 'simple' built-in way to get those borders and that I may have to use Sass to customize it? According to the Foundation Sass page, it appears that you have to use Ruby in order to use Sass to customize Foundation elements.
This may be a dumb question... I don't know Ruby, but my understanding is that this is a server-side language. I am using Java/JSP/Tomcat. Does this preclude me from using Sass with Foundation??

Thanks!

Sass.scsstabsbordersrubyJava

Hi,
I'm new to Foundation and I'm also not very familiar with Sass.

First, I'm trying to figure out how to put borders around tabs and their containers. It looks like Foundation 4 tabs (formerly called sections?) used to look exactly how I want them.. as seen here...
http://foundation.zurb.com/docs/v/4.3.2/components/section.html#panel1.
So, that's my first question is what is the best way to get that look in Foundation 5?

Second, after a little research, it appears that there's no 'simple' built-in way to get those borders and that I may have to use Sass to customize it? According to the Foundation Sass page, it appears that you have to use Ruby in order to use Sass to customize Foundation elements.
This may be a dumb question... I don't know Ruby, but my understanding is that this is a server-side language. I am using Java/JSP/Tomcat. Does this preclude me from using Sass with Foundation??

Thanks!

frank nelson almost 6 years ago

OK, I think I've got my 2nd question (about Ruby) answered. Apparently it is only for setting up your development environment for Sass.... not for web page runtime. I found a good tutorial here...
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/setting-up-foundation-with-sass-and-compass/
(thanks Matt Pilott)

I still have no idea what I'm doing. haha. But this is a start.

But if someone could still give me some pointers on how to add borders to the Tabs, that would be much appreciated.
Thanks

James Dullaghan almost 6 years ago

There is an active class available on the tabs.

you can apply the following to the active class:

border-top: solid 1px #ccc;
border-right: solid 1px #ccc;
border-left: solid 1px #ccc;

and selectively add borders to

.tabs dd > a

and selectively add borders to

.tabs-content > .content.active

It will require some finessing but it will do the job.

frank nelson almost 6 years ago

Hi James,
Thanks for your reply.
I assume this is some Sass-related stuff you're talking about and should make sense to me when I learn more about it?

James Dullaghan almost 6 years ago

Hey Frank,

You can use either SCSS/Sass or CSS to modify the borders. The markup I posted is CSS.

You can find css installation instructions here

Alternatively, you can find the SCSS/Sass installation instructions here

It will make more sense if you have a solid understanding of HTML/CSS or HTML/Sass.

Hope this helps

-James

frank nelson almost 6 years ago

Again, thanks for your help.
I am pretty familiar with CSS (although I was not familiar with the "<" operator), but today is my first day looking at Sass. In any case, you gave me some good stuff to go on. Much appreciated!

Tim Scott over 5 years ago

Just upgrading to v5. I was able to fix the regression in tabs styling with the following scss. Not sure if it's the most elegant, but it's working for me.

.tabs {
  dd > a {
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #fff;
    margin-right: -1px;
  }
  dd:not(.active) > a {
    border-bottom: solid 1px #ccc;
  }
}
.tabs-content {
  border: 1px #aaa solid;
  .content {
    padding: 15px;
    margin-top: 0;
  }
  margin: -1px 0 15px 0;
}

Andrew J. Holden over 5 years ago

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;
      }
  }
}

Andrew J. Holden over 5 years ago

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.)