Menu icon Foundation

Developer | San Diego, CA

I am a retired mathematician. I have built and maintained two websites using Zurb Foundation as a hobby.

My Posts







My Comments

George Benthien commented on George Benthien's post 2 months

I found that you need to change the :before element and not the :after element.  Here is the SCSS code to replace the +/- accordion toggle with up down triangles
.accordion-title
{
&:before {
content: "\25BC";
}
.is-active > &:before {
content: "\25B2";
}
}

George Benthien commented on Peekay's post 3 months

 For me setting
$global-flexbox: false;in the SCSS _settings.scss file solved the problem.

George Benthien commented on George Benthien's post 5 months

It does seem to work If you set
$global-flexbox: false;
in _settings.scss
 
 

George Benthien commented on George Benthien's post 6 months

I ran npm install node-sass and it completed. However, when I ran npm start it gave an error.
I found a solution on the internet the appears to work, but I have no idea why. After cloning the Zurb template replace 
"gulp-sass": "2.1.0" by "gulp-sass": "3.0.0" in the package.json file. 
Then npm install completes without error and npm start appears to work correctly. I don't like solutions that I don't understand, so if someone could explain what is happening, I would greatly appreciate it.

George Benthien commented on Tom Belknap's post 7 months

I got the same error. In my case it said it couldn't find the folder 
C:\Users\benth\AppData\Roaming\npm\node_modules\foundation-cli\node_modules\npm\node_modules\ansistyles
to rename.

George Benthien commented on George Benthien's post 11 months

Setting
$global-flexbox: false;
does solve the problem, but it doesn't seem like that should be necessary.

George Benthien commented on George Benthien's post 12 months

I downloaded the latest verson of zurb template and reinstalled it. The problem I had with with the top-bar no longer occurs. However, I still have a problem with the media object. Below is the code I used
<div class="media-object">
<div class="media-object-section">
<img src= "http://via.placeholder.com/150x150" />
</div>
<div class="media-object-section middle">
<img src= "http://via.placeholder.com/50x50" />
</div>
<div class="media-object-section bottom">
<img src= "http://via.placeholder.com/75x75" />
</div>
</div>

Even though I have specified middle and bottom on the last two images, they all align on the top.

George Benthien commented on George Benthien's post over 1 year

I found a way that seems to work. In the front matter I put
required: "name email"
In the php code I put
$required=explode(" ", '{{required}}');
By the way, the recent videos by Rafi on Panini are very helpful.

George Benthien commented on George Benthien's post over 1 year

My php code wants an array such as $required=['name', 'email']. If I rewrite the php code as $required={{required}} and put required: ['namel', 'email'] in the front matter of my form, I get $required=name,email with no brackets or quotes. If I enclose everything in double quotes such as required: "['name', 'email']", I get [&#x27;name&#x27;, &#x27;email&#x27;] with html entities instead of single quotes. Any ideas on how I can specify a php array like ['name', 'email'] in the front matter? Thanks.

George Benthien commented on George Benthien's post over 1 year

The tablet I am using is an Android. I added  data-close-on-click-inside="false" to the dropdown menu and it now works.
George 
 

Posts Followed



  • NEW
  • Wrapping top-bar does not work.

    By anish mehta

    top-bar

    Hello! &nbsp; When I am trying to wrap the contents in top-bar-left or right, it does not work as intended. I found this issue with version 6.4.1 of Foundation. But it works fine on v.6.3.1. But if I wrap the whole top-bar it works fine albeit it does n... (continued)


Following

    No Content

Followers

My Posts

My Comments

You commented on George Benthien's post 2 months

I found that you need to change the :before element and not the :after element.  Here is the SCSS code to replace the +/- accordion toggle with up down triangles
.accordion-title
{
&:before {
content: "\25BC";
}
.is-active > &:before {
content: "\25B2";
}
}

You commented on Peekay's post 3 months

 For me setting
$global-flexbox: false;in the SCSS _settings.scss file solved the problem.

You commented on George Benthien's post 5 months

It does seem to work If you set
$global-flexbox: false;
in _settings.scss
 
 

You commented on George Benthien's post 6 months

I ran npm install node-sass and it completed. However, when I ran npm start it gave an error.
I found a solution on the internet the appears to work, but I have no idea why. After cloning the Zurb template replace 
"gulp-sass": "2.1.0" by "gulp-sass": "3.0.0" in the package.json file. 
Then npm install completes without error and npm start appears to work correctly. I don't like solutions that I don't understand, so if someone could explain what is happening, I would greatly appreciate it.

You commented on Tom Belknap's post 7 months

I got the same error. In my case it said it couldn't find the folder 
C:\Users\benth\AppData\Roaming\npm\node_modules\foundation-cli\node_modules\npm\node_modules\ansistyles
to rename.

You commented on George Benthien's post 11 months

Setting
$global-flexbox: false;
does solve the problem, but it doesn't seem like that should be necessary.

You commented on George Benthien's post 12 months

I downloaded the latest verson of zurb template and reinstalled it. The problem I had with with the top-bar no longer occurs. However, I still have a problem with the media object. Below is the code I used
<div class="media-object">
<div class="media-object-section">
<img src= "http://via.placeholder.com/150x150" />
</div>
<div class="media-object-section middle">
<img src= "http://via.placeholder.com/50x50" />
</div>
<div class="media-object-section bottom">
<img src= "http://via.placeholder.com/75x75" />
</div>
</div>

Even though I have specified middle and bottom on the last two images, they all align on the top.

You commented on George Benthien's post over 1 year

I found a way that seems to work. In the front matter I put
required: "name email"
In the php code I put
$required=explode(" ", '{{required}}');
By the way, the recent videos by Rafi on Panini are very helpful.

You commented on George Benthien's post over 1 year

My php code wants an array such as $required=['name', 'email']. If I rewrite the php code as $required={{required}} and put required: ['namel', 'email'] in the front matter of my form, I get $required=name,email with no brackets or quotes. If I enclose everything in double quotes such as required: "['name', 'email']", I get [&#x27;name&#x27;, &#x27;email&#x27;] with html entities instead of single quotes. Any ideas on how I can specify a php array like ['name', 'email'] in the front matter? Thanks.

You commented on George Benthien's post over 1 year

The tablet I am using is an Android. I added  data-close-on-click-inside="false" to the dropdown menu and it now works.
George 
 

Posts Followed

Following

  • No Content

Followers