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 10 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 10 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 10 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 10 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 12 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 over 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 over 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 over 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 over 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 over 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 9 months ago






Following

    No Content

Followers

My Posts

My Comments

You commented on Jay Thatcher's post 10 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 10 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 10 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 10 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 12 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 over 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 over 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 over 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 over 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 over 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