Menu icon Foundation

Coder | Charlotte, NC

Graphic Designer & Front-End Developer | Code Enthusiast | Crazy about all things Branding, Web and UX/UI

My Posts


My Comments

Jacob Brooks commented on J Jaeckle's post over 2 years

Glad it worked out. If you ever need help, dont hesitate to ask.
 
Jacob

Jacob Brooks commented on J Jaeckle's post over 2 years

J Jaeckle
That is what I thought you were going for. I have coded something up. Let me know if this works for your needs:
<div class="row" data-equalizer>
<div class="small-12 medium-6 columns" data-equalizer-watch>
<div class="row">
<div class="small-4 medium-4 columns">
Approximate Weight:
</div>
<div class="small-4 medium-4 columns">
<input type="number" size="2" max-size="2" placeholder="enter a #">
</div>
<div class="small-4 medium-4 columns">
<input type="radio" name="weightType" value="L" checked="">&nbsp;Lbs&nbsp;
<input type="radio" name="weightType" value="K">&nbsp;Kgs
</div>
</div>
</div>
<!-- Start of new 6 column wide div -->
<div class="small-12 medium-6 columns" data-equalizer-watch>
<div class="row">
<div class="small-6 medium-6 columns">
Container supplied by:
</div>
<div class="small-6 medium-6 columns">
<input type="radio" name="containerType" value="F" checked="" onclick="javascript:isForwardAirContainer();">&nbsp;Forward Air&nbsp;
<input type="radio" name="containerType" value="S" onclick="javascript:isShipperContainer();">&nbsp;Shipper
</div>
</div>
</div>
</div>
 
The thing you were missing is that you were only using the "small" grid. The way Foundation works is it goes small-medium-large. if you dont specify sizes for medium or large breakpoints, it uses the small size. So in your case it was using the small sizes for everything. I have added a little code that you might not have seen (or maybe you have). I used the 'data-equalizer-watch' code to try and keep all your divs the same height. The radio buttons by default are taller. If you dont mind the divs being different heights, you can remove that code. I also nested a row inside a row. This is how I use Foundation and try to keep code into chunks.
I will try to keep this short, but it could get a little wordy, so bare with me. I took a row and have 2 divs inside. Both are set to 'small-12 medium-6 columns'. This means that on small screens they will be full width and on medium and up screen sizes they will be half width. Those to divs give you the outer 'shell' of what you were trying to do. 2 side by side divs on large and full width/stacked on small. Inside each of those divs i set a new row and then broke up the content as you had it. In your case the first div has 3 pieces of content so i used 'small-4 medium-4 columns' X3 (remember it should add up to 12 columns, it doesn't always have to, but its nice). In your 2nd div you only have 2 pieces of content so i used 'small-6 medium-6 columns' to keep things aligned the way you needed. Its kind of hard to type it all out, but I will answer anything you need more specific questions on.
I suggest looking over the grid docs to try and get a little more familiar with how to best use it. If you have anymore questions then let me know. http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html

Jacob Brooks commented on Bradley Cooper's post over 2 years

You can use Foundation any way that works best for you. I was asking about the 'Foundation New' command because its easier to set up new projects, but now i understand you have extras for your sites. Duplicating your folder and then running "foundation watch" while in that folder should work for you. 

Jacob Brooks commented on Seth Hoveland's post over 2 years

Got ya, yeah I dont remember that being in F5 either. Ill see if can work on something for ya.
Jacob

Jacob Brooks commented on Seth Hoveland's post over 2 years

I have not noticed any differences in what gets displayed from F5 to F6. I used your code (I had to change the asp:TextBox to be an input type="text", but my code behaves as expected. Any chance that the asp is throwing it off. I dont use asp so I wont be of much help from there, but maybe try using an input to see if the code works the way you want. It would at least help narrow your focus as to what is causing the issue. The code i used is:
<div class="row">

            &lt;div class="small-12 medium-6 columns"&gt;

                &lt;label&gt;

                    First Name &lt;small&gt;required&lt;/small&gt;

                    &lt;input type='text' runat="server" ID="tbxFName" required /&gt;

                &lt;/label&gt;

                &lt;small class="error"&gt;Please enter your first name&lt;/small&gt;

            &lt;/div&gt;

            &lt;div class="small-12 medium-6 columns"&gt;

                &lt;label&gt;

                    Last Name &lt;small&gt;required&lt;/small&gt;

                    &lt;input type='text' runat="server" ID="tbxLName" required /&gt;

                &lt;/label&gt;

                &lt;small class="error"&gt;Please enter your last name&lt;/small&gt;

            &lt;/div&gt;

        &lt;/div&gt;</code></pre>

Jacob Brooks commented on J Jaeckle's post over 2 years

Hey J Jaeckle!
I took a look at the CodePen (Thanks for adding that) and it looks like you are missing some code for the grid. You mentioned being new to Foundation, so I understand where you were headed. I can help you get your more specific question taken care of as well as lead you towards some resources that might help!I was trying to understand what your end goal was and was wondering if you could do a quick mockup (static image) of how you what your content to look on large and small screens. After I see what that looks like I can guide you in the right direction!
Jacob

Jacob Brooks commented on Bradley Cooper's post over 2 years

Hey Bradley!
How did you get Foundation Sass installed? Did you use the Foundation CLI by chance? You can technically duplicate your folder that is working, rename it and then run commands from inside that folder and everything should be fine. If you do have the Foundation CLI, i would recommend just using the 'foundation new' command. It will set up your project folder for you with everything you need to get up and running (including Sass).
Let me know if you have more specific questions.
Jacob

Jacob Brooks commented on Clara's post over 2 years

Hey "Someone" have you checked the final output source code for app.css? Usually the Foundation Version number is commented out in that code as well. If you inherited a version of Foundation there is no telling what the previous owner did to the framework, so its hard to tell why there wouldnt be a version number in the bower.json file. Just wanted to give you another spot to look and see if you can figure out what you are using.
Jacob

Jacob Brooks commented on Brendan's post over 2 years

Hey Brendan!
Couple of quick questions. Which version of Foundation are you using? How did you install?
Jacob

Jacob Brooks commented on Seth Hoveland's post over 2 years

Hey Seth!
That is weird. You haven't by chance messed with the breakpoint sizes have you? I can try to help!
Jacob

Posts Followed







  • 2
    Replies
  • Upload files

    By Ed Quijano

    Sasscomponentshtml

    Hello, I'm working in my web site and I've almost finalized the process. I worked with sass. Now my question is what files I need to discharge before to upload my file to my server-domain provider? &nbsp;I made this question because I see that my working... (continued)

    Last Reply by Ed Quijano over 2 years ago





Following

Followers

My Posts


My Comments

You commented on J Jaeckle's post over 2 years

Glad it worked out. If you ever need help, dont hesitate to ask.
 
Jacob

You commented on J Jaeckle's post over 2 years

J Jaeckle
That is what I thought you were going for. I have coded something up. Let me know if this works for your needs:
<div class="row" data-equalizer>
<div class="small-12 medium-6 columns" data-equalizer-watch>
<div class="row">
<div class="small-4 medium-4 columns">
Approximate Weight:
</div>
<div class="small-4 medium-4 columns">
<input type="number" size="2" max-size="2" placeholder="enter a #">
</div>
<div class="small-4 medium-4 columns">
<input type="radio" name="weightType" value="L" checked="">&nbsp;Lbs&nbsp;
<input type="radio" name="weightType" value="K">&nbsp;Kgs
</div>
</div>
</div>
<!-- Start of new 6 column wide div -->
<div class="small-12 medium-6 columns" data-equalizer-watch>
<div class="row">
<div class="small-6 medium-6 columns">
Container supplied by:
</div>
<div class="small-6 medium-6 columns">
<input type="radio" name="containerType" value="F" checked="" onclick="javascript:isForwardAirContainer();">&nbsp;Forward Air&nbsp;
<input type="radio" name="containerType" value="S" onclick="javascript:isShipperContainer();">&nbsp;Shipper
</div>
</div>
</div>
</div>
 
The thing you were missing is that you were only using the "small" grid. The way Foundation works is it goes small-medium-large. if you dont specify sizes for medium or large breakpoints, it uses the small size. So in your case it was using the small sizes for everything. I have added a little code that you might not have seen (or maybe you have). I used the 'data-equalizer-watch' code to try and keep all your divs the same height. The radio buttons by default are taller. If you dont mind the divs being different heights, you can remove that code. I also nested a row inside a row. This is how I use Foundation and try to keep code into chunks.
I will try to keep this short, but it could get a little wordy, so bare with me. I took a row and have 2 divs inside. Both are set to 'small-12 medium-6 columns'. This means that on small screens they will be full width and on medium and up screen sizes they will be half width. Those to divs give you the outer 'shell' of what you were trying to do. 2 side by side divs on large and full width/stacked on small. Inside each of those divs i set a new row and then broke up the content as you had it. In your case the first div has 3 pieces of content so i used 'small-4 medium-4 columns' X3 (remember it should add up to 12 columns, it doesn't always have to, but its nice). In your 2nd div you only have 2 pieces of content so i used 'small-6 medium-6 columns' to keep things aligned the way you needed. Its kind of hard to type it all out, but I will answer anything you need more specific questions on.
I suggest looking over the grid docs to try and get a little more familiar with how to best use it. If you have anymore questions then let me know. http://foundation.zurb.com/sites/docs/v/5.5.3/components/grid.html

You commented on Bradley Cooper's post over 2 years

You can use Foundation any way that works best for you. I was asking about the 'Foundation New' command because its easier to set up new projects, but now i understand you have extras for your sites. Duplicating your folder and then running "foundation watch" while in that folder should work for you. 

You commented on Seth Hoveland's post over 2 years

Got ya, yeah I dont remember that being in F5 either. Ill see if can work on something for ya.
Jacob

You commented on Seth Hoveland's post over 2 years

I have not noticed any differences in what gets displayed from F5 to F6. I used your code (I had to change the asp:TextBox to be an input type="text", but my code behaves as expected. Any chance that the asp is throwing it off. I dont use asp so I wont be of much help from there, but maybe try using an input to see if the code works the way you want. It would at least help narrow your focus as to what is causing the issue. The code i used is:
<div class="row">

            &lt;div class="small-12 medium-6 columns"&gt;

                &lt;label&gt;

                    First Name &lt;small&gt;required&lt;/small&gt;

                    &lt;input type='text' runat="server" ID="tbxFName" required /&gt;

                &lt;/label&gt;

                &lt;small class="error"&gt;Please enter your first name&lt;/small&gt;

            &lt;/div&gt;

            &lt;div class="small-12 medium-6 columns"&gt;

                &lt;label&gt;

                    Last Name &lt;small&gt;required&lt;/small&gt;

                    &lt;input type='text' runat="server" ID="tbxLName" required /&gt;

                &lt;/label&gt;

                &lt;small class="error"&gt;Please enter your last name&lt;/small&gt;

            &lt;/div&gt;

        &lt;/div&gt;</code></pre>

You commented on J Jaeckle's post over 2 years

Hey J Jaeckle!
I took a look at the CodePen (Thanks for adding that) and it looks like you are missing some code for the grid. You mentioned being new to Foundation, so I understand where you were headed. I can help you get your more specific question taken care of as well as lead you towards some resources that might help!I was trying to understand what your end goal was and was wondering if you could do a quick mockup (static image) of how you what your content to look on large and small screens. After I see what that looks like I can guide you in the right direction!
Jacob

You commented on Bradley Cooper's post over 2 years

Hey Bradley!
How did you get Foundation Sass installed? Did you use the Foundation CLI by chance? You can technically duplicate your folder that is working, rename it and then run commands from inside that folder and everything should be fine. If you do have the Foundation CLI, i would recommend just using the 'foundation new' command. It will set up your project folder for you with everything you need to get up and running (including Sass).
Let me know if you have more specific questions.
Jacob

You commented on Clara's post over 2 years

Hey "Someone" have you checked the final output source code for app.css? Usually the Foundation Version number is commented out in that code as well. If you inherited a version of Foundation there is no telling what the previous owner did to the framework, so its hard to tell why there wouldnt be a version number in the bower.json file. Just wanted to give you another spot to look and see if you can figure out what you are using.
Jacob

You commented on Brendan's post over 2 years

Hey Brendan!
Couple of quick questions. Which version of Foundation are you using? How did you install?
Jacob

You commented on Seth Hoveland's post over 2 years

Hey Seth!
That is weird. You haven't by chance messed with the breakpoint sizes have you? I can try to help!
Jacob

Posts Followed

Following

Followers

  • No Content