Menu icon Foundation

Engineer

My Posts




  • 3
    Replies
  • How to ascertain the latest version

    By Bit Byte

    css acss sass

    C:\websites\tuck-shop>gem install foundation Fetching: thor-0.19.1.gem (100%) Successfully installed thor-0.19.1 Fetching: foundation-1.0.4.gem (100%) Successfully installed foundation-1.0.4 Parsing documentation for thor-0.19.1 Installing ri docume... (continued)

    Last Reply by Bit Byte over 4 years ago




  • 3
    Replies
  • Solutions for Tabs in latest F5?

    By Bit Byte

    tabs

    Hello. I'm trying to use the latest Foundation code for tabs, but it displays all tabs as opened. In addition to this I want to show the Tabs as Accordion Tabs/Panels in a small screen. This was a nice feature in F4, but it seems to have been remove... (continued)

    Last Reply by Bit Byte almost 5 years ago


  • NEW
  • Incongruous size of Columns

    By Bit Byte

    panelstop-barEqualizer

    Hi, I have a 3 column layout in the xl constellation, but the left-margin on the first and the right-margin on the last columns get indented and therefore no longer inline with the single columns above them. You can have a look at the temporary site... (continued)



My Comments

Bit Byte commented on Sam Linville's post about 4 years

Thanks for the article Rafi. Very interesting and really very innovative.

Perhaps, just what you might simplify around a little to your needs, Sam.

Regards,

Bit

Bit Byte commented on Sam Linville's post about 4 years

Hi,

Thanks for clarifying the situation and as Rafi already explained sass variables have this limitation.

Nevertheless, I made a site for my travel agency some time ago and in that each itinerary is very different from each other. Unfortunately, the site is not responsive and that is what I am doing right now – rebuilding/reorganizing it using the Foundation Framework, but the principle and process will remain the same.

I have a MySQL database am using PHP to pull all attributes required for the individual pages. Depending upon the URL, PHP fills all the required attributes into a simple template which has only a background with height and width and produces the page/s within a fraction of a second. All the attributes like color, backgrounds, headings, header-images etc. (anything required) are stored in the DB. PHP creates Record Sets and these can then be dialed-in to any page as “editable attributes”.

I work mostly in Dreamweaver where making templates is a very easy process. In versions 6 and below it had all the databases, bindings, server behaviors in-built into the application, but they removed these in DW CC, but can still be accessed as extensions.

This is how I solved my problem to display unique non-stereotyped pages and came to have a unique CMS like setup. If you care to have a look: http://venture-wilderness.com/indexD.php. This is the only responsive page on the site. You would have to login to go a level deeper..

Regards,

Bit

Bit Byte commented on Sam Linville's post about 4 years

Don't you have the _settings.scss file?

I changed the color there for my top-bar as follows:

// Background color for the top bar
$topbar-bg-color: /*$oil*/$earth;
// $topbar-bg: $topbar-bg-color;

I defined $earth under the list of colors above like this:

// $steel       : #666666;
// $charcoal    : #555555;
// $tuatara     : #444444;
// $oil         : #333333;
// $jet         : #222222;
// $black       : #000000;
$earth      : #9A9786;

Thus all I have to do is to comment out the not needed scheme. I thus have 2 or so many colors as I want to have.

Unless I misunderstood your question, I think you could help yourself likewise..

Regards,

Bit

Bit Byte commented on oscar mattos's post about 4 years

If you are using Foundation 5.5.2 (always give the exact version as Foundation is always developing and optimizing) then go to the rules under line 1695:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:58.75em)/";
  width: 58.75em; }

This is showing the present breakpoint width. You need to replace with your desired width.

In addition to this you must also change it on line 2041:

@media only screen and (min-width: 58.75em) {

to the same as above.

You should also do a search before posting a question as this has been asked and answered many times before. There is a small box in right column (where your question appears) for doing this.

Bit Byte commented on Bit Byte's post over 4 years

I simply changed "medium" to "top-bar-desktop" in the foundation.topbar.js and that is working quite efficiently!

Best regards,

Bit

Bit Byte commented on Bit Byte's post over 4 years

That is exactly what I mean.

In the meanwhile I checked the foundation.topbar.js and that is where it has been specified:

  // Pull element out of the DOM for manipulation
      section.detach();

      self.S('.has-dropdown>a', section).each(function () {
        var $link = self.S(this),
            $dropdown = $link.siblings('.dropdown'),
            url = $link.attr('href'),
            $titleLi;

        if (!$dropdown.find('.title.back').length) {

          if (settings.mobile_show_parent_link == true && url) {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
          } else {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
          }

          // Copy link to subnav
          if (settings.custom_back_text == true) {
            $('h5>a', $titleLi).html(settings.back_text);
          } else {
            $('h5>a', $titleLi).html('&laquo; ' + $link.html());
          }
          $dropdown.prepend($titleLi);
        }
      });

settings.mobile_show_parent_link == true && url

I suppose this needs to be changed.

Thank You,

Bit

Bit Byte commented on Bit Byte's post over 4 years

Hello Rafi,

Thank you for the input, but I wasn't asking about the top-bar breakpoint. When the view-port is foundations default 40em and then you open the collapsed top-bar. Now, when any of menu items have sub-menus and you click it open, it shows the menu and it's sub-menus. But when the breakpoint has been increased and is more than 40em, it does not show the menu; it shows only the sub-menus without showing the menu they belong to. I would like to change it so it shows the menu as well as the sub-menus even when the toggle width has been increased.

[I wish there was someway to show image/s in a reply post as there are no options to do that when making a reply. One can do it when creating a post, but that option is no longer accessible.]

The link you posted refers to more than one year old solutions, but as you know a lot of water has flowed down the bridge since.

// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: 64rem !default; //#{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
//$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";

I had to do it this way. And this is because the media query maps have changed since and need to be tampered with if we want Grunt to accept any changes using the previous solutions. At least for me it worked that way without having the "swine grunting all the time".

Regards,

Bit

Bit Byte commented on Bit Byte's post over 4 years

I think you beat me by just a few seconds!!!

Bit

Bit Byte commented on Bit Byte's post over 4 years

Please don't bother!

It is version 5.5.2 ! One can look it up under bower components / foundation/CSS/foundation.css ..

Thank you

Bit Byte commented on Bit Byte's post over 4 years

Hello Rafi,

Many thanks for having a look..

I entered the .ui-tabs height to the existing .ui-tabs in jquery.ui.tabs.min.css.

Yes, the columns are theoretically of the same height, but I would like these to be visually also the same, i.e. I would like the bottom outlines of both the sidebar and the main-content to line up. I suppose I would have to apply the "data-equalizer-watch" to some other element. I tried on some other variations, but visually it remains the same. [sigh!]

One other thing I noticed is that when I refresh the page it reverts to the first Tabs on both sides. Is there a way to keep the open tabs as they are when refreshing? And is there a way to place a set of tabs or links at the bottom of the content so that you don't have to scroll to the top to change the tab?

Thank you so much for the wonderful "footer"; it works so beautifully and with so little code!

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Sam Linville's post about 4 years

Thanks for the article Rafi. Very interesting and really very innovative.

Perhaps, just what you might simplify around a little to your needs, Sam.

Regards,

Bit

You commented on Sam Linville's post about 4 years

Hi,

Thanks for clarifying the situation and as Rafi already explained sass variables have this limitation.

Nevertheless, I made a site for my travel agency some time ago and in that each itinerary is very different from each other. Unfortunately, the site is not responsive and that is what I am doing right now – rebuilding/reorganizing it using the Foundation Framework, but the principle and process will remain the same.

I have a MySQL database am using PHP to pull all attributes required for the individual pages. Depending upon the URL, PHP fills all the required attributes into a simple template which has only a background with height and width and produces the page/s within a fraction of a second. All the attributes like color, backgrounds, headings, header-images etc. (anything required) are stored in the DB. PHP creates Record Sets and these can then be dialed-in to any page as “editable attributes”.

I work mostly in Dreamweaver where making templates is a very easy process. In versions 6 and below it had all the databases, bindings, server behaviors in-built into the application, but they removed these in DW CC, but can still be accessed as extensions.

This is how I solved my problem to display unique non-stereotyped pages and came to have a unique CMS like setup. If you care to have a look: http://venture-wilderness.com/indexD.php. This is the only responsive page on the site. You would have to login to go a level deeper..

Regards,

Bit

You commented on Sam Linville's post about 4 years

Don't you have the _settings.scss file?

I changed the color there for my top-bar as follows:

// Background color for the top bar
$topbar-bg-color: /*$oil*/$earth;
// $topbar-bg: $topbar-bg-color;

I defined $earth under the list of colors above like this:

// $steel       : #666666;
// $charcoal    : #555555;
// $tuatara     : #444444;
// $oil         : #333333;
// $jet         : #222222;
// $black       : #000000;
$earth      : #9A9786;

Thus all I have to do is to comment out the not needed scheme. I thus have 2 or so many colors as I want to have.

Unless I misunderstood your question, I think you could help yourself likewise..

Regards,

Bit

You commented on oscar mattos's post about 4 years

If you are using Foundation 5.5.2 (always give the exact version as Foundation is always developing and optimizing) then go to the rules under line 1695:

meta.foundation-mq-topbar {
  font-family: "/only screen and (min-width:58.75em)/";
  width: 58.75em; }

This is showing the present breakpoint width. You need to replace with your desired width.

In addition to this you must also change it on line 2041:

@media only screen and (min-width: 58.75em) {

to the same as above.

You should also do a search before posting a question as this has been asked and answered many times before. There is a small box in right column (where your question appears) for doing this.

You commented on Bit Byte's post over 4 years

I simply changed "medium" to "top-bar-desktop" in the foundation.topbar.js and that is working quite efficiently!

Best regards,

Bit

You commented on Bit Byte's post over 4 years

That is exactly what I mean.

In the meanwhile I checked the foundation.topbar.js and that is where it has been specified:

  // Pull element out of the DOM for manipulation
      section.detach();

      self.S('.has-dropdown>a', section).each(function () {
        var $link = self.S(this),
            $dropdown = $link.siblings('.dropdown'),
            url = $link.attr('href'),
            $titleLi;

        if (!$dropdown.find('.title.back').length) {

          if (settings.mobile_show_parent_link == true && url) {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="' + url + '">' + $link.html() +'</a></li>');
          } else {
            $titleLi = $('<li class="title back js-generated"><h5><a href="javascript:void(0)"></a></h5>');
          }

          // Copy link to subnav
          if (settings.custom_back_text == true) {
            $('h5>a', $titleLi).html(settings.back_text);
          } else {
            $('h5>a', $titleLi).html('&laquo; ' + $link.html());
          }
          $dropdown.prepend($titleLi);
        }
      });

settings.mobile_show_parent_link == true && url

I suppose this needs to be changed.

Thank You,

Bit

You commented on Bit Byte's post over 4 years

Hello Rafi,

Thank you for the input, but I wasn't asking about the top-bar breakpoint. When the view-port is foundations default 40em and then you open the collapsed top-bar. Now, when any of menu items have sub-menus and you click it open, it shows the menu and it's sub-menus. But when the breakpoint has been increased and is more than 40em, it does not show the menu; it shows only the sub-menus without showing the menu they belong to. I would like to change it so it shows the menu as well as the sub-menus even when the toggle width has been increased.

[I wish there was someway to show image/s in a reply post as there are no options to do that when making a reply. One can do it when creating a post, but that option is no longer accessible.]

The link you posted refers to more than one year old solutions, but as you know a lot of water has flowed down the bridge since.

// Using rem-calc for the below breakpoint causes issues with top bar
$topbar-breakpoint: 64rem !default; //#{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
//$topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";

I had to do it this way. And this is because the media query maps have changed since and need to be tampered with if we want Grunt to accept any changes using the previous solutions. At least for me it worked that way without having the "swine grunting all the time".

Regards,

Bit

You commented on Bit Byte's post over 4 years

I think you beat me by just a few seconds!!!

Bit

You commented on Bit Byte's post over 4 years

Please don't bother!

It is version 5.5.2 ! One can look it up under bower components / foundation/CSS/foundation.css ..

Thank you

You commented on Bit Byte's post over 4 years

Hello Rafi,

Many thanks for having a look..

I entered the .ui-tabs height to the existing .ui-tabs in jquery.ui.tabs.min.css.

Yes, the columns are theoretically of the same height, but I would like these to be visually also the same, i.e. I would like the bottom outlines of both the sidebar and the main-content to line up. I suppose I would have to apply the "data-equalizer-watch" to some other element. I tried on some other variations, but visually it remains the same. [sigh!]

One other thing I noticed is that when I refresh the page it reverts to the first Tabs on both sides. Is there a way to keep the open tabs as they are when refreshing? And is there a way to place a set of tabs or links at the bottom of the content so that you don't have to scroll to the top to change the tab?

Thank you so much for the wonderful "footer"; it works so beautifully and with so little code!

Posts Followed

Following

  • No Content

Followers

  • No Content