Menu icon Foundation

Designer | Nashville, TN

I design web applications for a Fortune 500 company in healthcare.

My Posts








My Comments

Jay Thatcher commented on Jay Thatcher's post 4 months

Here's my quick fix which is working for my situation, but let me know if there's a solution built into Foundation.
@media print, screen and (min-width: 64em) {
.row-reverse-large {
display: flexbox;
flex-direction: row-reverse;
}
}

Jay Thatcher commented on Sorina Vladu's post 4 months

You have to use the Foundation 6 framework. I don't see it loaded in your jsfiddle. Also, your data-reveal-id and the div id you want to reveal need to be named the same.

Jay Thatcher commented on Kilian D.'s post 4 months

If you want to change it in the CSS and not with SASS, look for .pagination li { …
And change display: none; to display: inline-block;
Consider overriding it with a custom.css that loads after instead of changing it directly in the app.css file. Hope this helps.
.pagination li {
margin-right: 0.0625rem;
border-radius: 0;
font-size: 0.875rem;
display: none; }

Jay Thatcher commented on Sorina Vladu's post 4 months

<p><button class="button" data-open="mapModal1">Map</button></p>

<div class="reveal" id="mapModal1" data-reveal>

<h3>Map</h3>

<!-- Put your map code here -->

<button class="close-button" data-close aria-label="Close modal" type="button">

&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;

</button>

</div>
 

Jay Thatcher commented on Jay Thatcher's post 6 months

I put together a CodePen for this. Ideas for a Flexbox or Equalizer solution is welcome.
https://codepen.io/ThatcherDesign/pen/NBgxeg
Thanks,
Jay

Jay Thatcher commented on Jay Thatcher's post almost 2 years

Thanks for the answer. Makes sense. I darkened the color to #5c6b77, which changed color to the $white setting. Appreciate the help and detailed explanation.

Jay Thatcher commented on Jay Thatcher's post almost 2 years

My question wasn't phrased clear enough. I added a color to the _settings.scss. It generated button, badge, etc. using that color, but it pulls $black for color as default and in this case I need $white for color. See image attached.

Jay Thatcher commented on Aaron Robinson's post almost 2 years

An Auto-Complete dropdown box is something our team needs weekly. Adding jquery-ui or telerik controls adds a ton of css to contend with. Some developers are going the nuclear option of using Angular or React for the entire project, when html, css, and a simple auto-complete control would have made the project much simpler. 
Is this a component Zurb has had to solve before? Would love to see a Building Block or Playground of an auto-complete (combo box) dropdown that utilizes Foundation styling.

Jay Thatcher commented on PJLDesign's post almost 3 years

I'm interested in something similar as well, but the behavior of this example is a little odd, how it's at the top, then after you trigger it, it jumps down lower on the screen (at least on Chrome/Mac).
I'm hoping to create navigation similar to the left side of https://almsaeedstudio.com/preview. It's pretty smooth. A friend of mine created a nice trimmed down variation of it in Bootstrap. It's 10,000+ lines of CSS in multiple files. Instead of starting here and trimming back, I'm going to try to start lean and add-in. Zurb has similar navigation here: http://zurb.com/library
Suggestion: Zurbians, mind showing us the basics to this train of thought in your http://zurb.com/university/lessons ?

Jay Thatcher commented on Jay Thatcher's post almost 3 years

That's it, exactly. Thank you. I really appreciate it. It may seem small, but it's the small things that make it feel polished.

Posts Followed



  • 5
    Replies
  • Help creating a "combo box"

    By Aaron Robinson

    combo-box

    Ultra-new to Foundation (and somewhat to css in general too) and trying to create a "combo box" widget (using Foundation 6 for Sites). This is something like a text input field with a Dropdown Menu attached. &nbsp;My use is for a search box but there is&n... (continued)

    Last Reply by Jacky888 3 months ago






Following

    No Content

Followers

My Posts

My Comments

You commented on Jay Thatcher's post 4 months

Here's my quick fix which is working for my situation, but let me know if there's a solution built into Foundation.
@media print, screen and (min-width: 64em) {
.row-reverse-large {
display: flexbox;
flex-direction: row-reverse;
}
}

You commented on Sorina Vladu's post 4 months

You have to use the Foundation 6 framework. I don't see it loaded in your jsfiddle. Also, your data-reveal-id and the div id you want to reveal need to be named the same.

You commented on Kilian D.'s post 4 months

If you want to change it in the CSS and not with SASS, look for .pagination li { …
And change display: none; to display: inline-block;
Consider overriding it with a custom.css that loads after instead of changing it directly in the app.css file. Hope this helps.
.pagination li {
margin-right: 0.0625rem;
border-radius: 0;
font-size: 0.875rem;
display: none; }

You commented on Sorina Vladu's post 4 months

<p><button class="button" data-open="mapModal1">Map</button></p>

<div class="reveal" id="mapModal1" data-reveal>

<h3>Map</h3>

<!-- Put your map code here -->

<button class="close-button" data-close aria-label="Close modal" type="button">

&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;

</button>

</div>
 

You commented on Jay Thatcher's post 6 months

I put together a CodePen for this. Ideas for a Flexbox or Equalizer solution is welcome.
https://codepen.io/ThatcherDesign/pen/NBgxeg
Thanks,
Jay

You commented on Jay Thatcher's post almost 2 years

Thanks for the answer. Makes sense. I darkened the color to #5c6b77, which changed color to the $white setting. Appreciate the help and detailed explanation.

You commented on Jay Thatcher's post almost 2 years

My question wasn't phrased clear enough. I added a color to the _settings.scss. It generated button, badge, etc. using that color, but it pulls $black for color as default and in this case I need $white for color. See image attached.

You commented on Aaron Robinson's post almost 2 years

An Auto-Complete dropdown box is something our team needs weekly. Adding jquery-ui or telerik controls adds a ton of css to contend with. Some developers are going the nuclear option of using Angular or React for the entire project, when html, css, and a simple auto-complete control would have made the project much simpler. 
Is this a component Zurb has had to solve before? Would love to see a Building Block or Playground of an auto-complete (combo box) dropdown that utilizes Foundation styling.

You commented on PJLDesign's post almost 3 years

I'm interested in something similar as well, but the behavior of this example is a little odd, how it's at the top, then after you trigger it, it jumps down lower on the screen (at least on Chrome/Mac).
I'm hoping to create navigation similar to the left side of https://almsaeedstudio.com/preview. It's pretty smooth. A friend of mine created a nice trimmed down variation of it in Bootstrap. It's 10,000+ lines of CSS in multiple files. Instead of starting here and trimming back, I'm going to try to start lean and add-in. Zurb has similar navigation here: http://zurb.com/library
Suggestion: Zurbians, mind showing us the basics to this train of thought in your http://zurb.com/university/lessons ?

You commented on Jay Thatcher's post almost 3 years

That's it, exactly. Thank you. I really appreciate it. It may seem small, but it's the small things that make it feel polished.

Posts Followed

Following

  • No Content

Followers

  • No Content