Menu icon Foundation

Developer | Cornwall, UK

My Posts


  • 4
    Replies
  • X-Large Columns

    By Charlie Gilman

    x-largecolumns

    I am developing an application to be used on a full variety of devices from phones and ipads to ultra high resolution 29" monitors, is there an easy way to add support for x-large columns? I am using SASS with Foundation 5.2, I looked at the media quer... (continued)

    Last Reply by Jamesoliver about 1 year ago



My Comments

Charlie Gilman commented on Charlie Gilman's post over 5 years

Also for those wondering, this is the SCSS I whipped up for it, I included a divide class to divide the page into the specified numbers, as an alternative to using specific columns (12 columns cannot be described with 5 equal width columns using default, instead use .xlarge-divide-5, this will calculate).

I could have refactored this further using a SCSS @include, but I wish to keep them separate for now.

// xlarge queries (1441px to 1920px)
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  @for $i from 1 through $total-columns {
    .xlarge-divide-#{$i} {
      width: #{100 / $i}% !important;
    }
    .xlarge-#{$i} {
      width: #{(100/$total-columns)*$i}% !important;
    }
  }
}

// xxlarge queries (1921px up)
@media only screen and (min-width: 120em) {
  @for $i from 1 through $total-columns {
    .xxlarge-divide-#{$i} {
      width: #{100 / $i}% !important;
    }
    .xxlarge-#{$i} {
      width: #{(100/$total-columns)*$i}% !important;
    }
  }
}

Charlie Gilman commented on Björn Steneram's post over 5 years

Have you added the JavaScript?

    <script src="bower_components/foundation/js/foundation/foundation.tabs.js"></script>

Charlie Gilman commented on Charlie Gilman's post over 5 years

Awesome, the media queries were there in the end, that topic was a good help though.

I would definitely agree with you on the first part, however this is an internal company scheduling application rather than a production website, normal rules can be swayed a little :)

Charlie Gilman commented on puriphat's post over 5 years

Not really a Foundation specific topic, but here, this should do the trick in PHP:

$string = strlen($input) > 100 ? substr($input,0,100)."... (continued)" : $input;

Replace 100 with your selected number of characters.

This function checks the string length, if it's more than 100 it cuts it in half and appends '... (continued)' at the end.

An alternative would be using CSS, set an absolute height or width then use:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

Charlie Gilman commented on Ian Jay Broñola's post almost 6 years

Just ran 'foundation update' through terminal, running 5.1.1, still the same error.

Charlie Gilman commented on Ian Jay Broñola's post almost 6 years

Checked for errors in your Javascript console?

I think the AJAX modals are bugged anyway, doesn't matter how I use it I always get "Uncaught TypeError: Cannot read property 'close' of undefined".

Charlie Gilman commented on Charlie Gilman's post almost 6 years

Think this was due to using the 'foundation upgrade', whereas I should've just used 'foundation update', it seemed to have wiped all my .scss files and replaced with the default ones, in there I happened to have redefined the base fonts.

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Charlie Gilman's post over 5 years

Also for those wondering, this is the SCSS I whipped up for it, I included a divide class to divide the page into the specified numbers, as an alternative to using specific columns (12 columns cannot be described with 5 equal width columns using default, instead use .xlarge-divide-5, this will calculate).

I could have refactored this further using a SCSS @include, but I wish to keep them separate for now.

// xlarge queries (1441px to 1920px)
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  @for $i from 1 through $total-columns {
    .xlarge-divide-#{$i} {
      width: #{100 / $i}% !important;
    }
    .xlarge-#{$i} {
      width: #{(100/$total-columns)*$i}% !important;
    }
  }
}

// xxlarge queries (1921px up)
@media only screen and (min-width: 120em) {
  @for $i from 1 through $total-columns {
    .xxlarge-divide-#{$i} {
      width: #{100 / $i}% !important;
    }
    .xxlarge-#{$i} {
      width: #{(100/$total-columns)*$i}% !important;
    }
  }
}

You commented on Björn Steneram's post over 5 years

Have you added the JavaScript?

    <script src="bower_components/foundation/js/foundation/foundation.tabs.js"></script>

You commented on Charlie Gilman's post over 5 years

Awesome, the media queries were there in the end, that topic was a good help though.

I would definitely agree with you on the first part, however this is an internal company scheduling application rather than a production website, normal rules can be swayed a little :)

You commented on puriphat's post over 5 years

Not really a Foundation specific topic, but here, this should do the trick in PHP:

$string = strlen($input) > 100 ? substr($input,0,100)."... (continued)" : $input;

Replace 100 with your selected number of characters.

This function checks the string length, if it's more than 100 it cuts it in half and appends '... (continued)' at the end.

An alternative would be using CSS, set an absolute height or width then use:

text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

You commented on Ian Jay Broñola's post almost 6 years

Just ran 'foundation update' through terminal, running 5.1.1, still the same error.

You commented on Ian Jay Broñola's post almost 6 years

Checked for errors in your Javascript console?

I think the AJAX modals are bugged anyway, doesn't matter how I use it I always get "Uncaught TypeError: Cannot read property 'close' of undefined".

You commented on Charlie Gilman's post almost 6 years

Think this was due to using the 'foundation upgrade', whereas I should've just used 'foundation update', it seemed to have wiped all my .scss files and replaced with the default ones, in there I happened to have redefined the base fonts.

Posts Followed

Following

  • No Content

Followers

  • No Content