Menu icon Foundation

Developer

My Posts


  • 2
    Replies
  • Changing button length (with grid)

    By Matt Camp

    buttongrid

    I am using Foundation 5 with Sass mix-ins. I am trying to make a dynamic button that can be in the grid system, but change length depending on the amount of text in the button. For example: on one page the button says "Games" (which fits great in a grid-c... (continued)

    Last Reply by Rafi Benkual over 5 years ago




My Comments

Matt Camp commented on Matt Camp's post over 4 years

Steve,

Currently my site is working using the sass mixins grid, but I don't understand why. Below is a simplified version of my HTML and SCSS (using the grid with sass).

<header>
  <h1> logo </h1>
    <a class="login"> Login </a>

<nav>
<a class="button1"></a>
</nav>

</header>
header {
@include grid-row();
}
h1 {
@include grid-column(10);
}
.login {
@include grid-column(2);
}
nav {
@include grid-column(12);
}

My question is with the 'nav' part. I thought that every time you had 12 columns you needed to define a new row, but I don't and it still works. The 'nav' goes under the 'h1' and '.login' just like it should (if I had a row before 'nav')

Hope that makes sense. Thanks in advance!

Matthew

Matt Camp commented on Matt Camp's post almost 5 years

I found a solution to my problem:

My first issue was that I did not have modernizr running on my site. In the <head> section of your page add Modernizr:

<script src="/js/vendor/modernizr.js"></script>

This should work if your Foundation files are installed correctly, but for some reason mine were not. So I used this to install modernizr:

 <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/modernizr.js"></script>

Then to fix the issue proposed in the title, I had to add data-tooltip, tooltip classes (class="has-tip tip-top etc...") and the title inside of my <td>

So in the end my code look like this:

 <tr>
        <td data-tooltip class="statusPaused has-tip tip-top" title="Paused"></td>
        <td>My First Game</td>
        <td>100 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Archive</a></td>
      </tr>

My scss didn't change (you can view it above in the question).

Thanks for the help and I hope this helps in the future!

Matt Camp commented on Ubiratan Cunha's post almost 5 years

What are in your classes (share, tweet and plusone)? Does you need classes like that for it to work?

Matt Camp commented on Jeremy Englert's post almost 5 years

Jeremy try data-width"200"

It should look something like this:

<span data-tooltip class="has-tip tip-right" data-width="200" title="Tooltips are awesome, you should totally use them!">extended information</span>

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Matt Camp's post over 4 years

Steve,

Currently my site is working using the sass mixins grid, but I don't understand why. Below is a simplified version of my HTML and SCSS (using the grid with sass).

<header>
  <h1> logo </h1>
    <a class="login"> Login </a>

<nav>
<a class="button1"></a>
</nav>

</header>
header {
@include grid-row();
}
h1 {
@include grid-column(10);
}
.login {
@include grid-column(2);
}
nav {
@include grid-column(12);
}

My question is with the 'nav' part. I thought that every time you had 12 columns you needed to define a new row, but I don't and it still works. The 'nav' goes under the 'h1' and '.login' just like it should (if I had a row before 'nav')

Hope that makes sense. Thanks in advance!

Matthew

You commented on Matt Camp's post almost 5 years

I found a solution to my problem:

My first issue was that I did not have modernizr running on my site. In the <head> section of your page add Modernizr:

<script src="/js/vendor/modernizr.js"></script>

This should work if your Foundation files are installed correctly, but for some reason mine were not. So I used this to install modernizr:

 <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/modernizr.js"></script>

Then to fix the issue proposed in the title, I had to add data-tooltip, tooltip classes (class="has-tip tip-top etc...") and the title inside of my <td>

So in the end my code look like this:

 <tr>
        <td data-tooltip class="statusPaused has-tip tip-top" title="Paused"></td>
        <td>My First Game</td>
        <td>100 / 250 plays</td>
        <td class="tightcell"><a href="#">Players</a><a href="#">Archive</a></td>
      </tr>

My scss didn't change (you can view it above in the question).

Thanks for the help and I hope this helps in the future!

You commented on Ubiratan Cunha's post almost 5 years

What are in your classes (share, tweet and plusone)? Does you need classes like that for it to work?

You commented on Jeremy Englert's post almost 5 years

Jeremy try data-width"200"

It should look something like this:

<span data-tooltip class="has-tip tip-right" data-width="200" title="Tooltips are awesome, you should totally use them!">extended information</span>

Posts Followed

No Content

Following

  • No Content

Followers