Menu icon Foundation

Designer | San Jose, CA

My Posts


My Comments

Preston McPeak commented on Stefan Staudenmeyer's post almost 5 years

Hey Stefan, Do you mind sending over a JS Fiddle or Codepen link?

Preston McPeak commented on Craig Sander's post almost 5 years

Hey! You will actually need to put in this Meta tag into your <head></head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

Preston McPeak commented on Mike Seaby's post almost 5 years

Oh this is totally sweet! I think this would work great in the Foundation code, you should make a pull request!

Preston McPeak commented on Sophia Taveras's post almost 5 years

Hey Sophia! So you will need to do some rearranging with your code, and I'm going to tell you some best practices.

You should always nest a column inside a row, never a column inside a column. Your markup should look like so (this will remove the margin on the sides, so you will have to add this in again):

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="large-9 columns">FAQ Content</div>
        <div class="large-3 columns">List Links</div>
    </div>
</div>

Next you should also build mobile first, so that means specifying your Small classes before the Large classes and this means we will also build it so that the FAQ content appears after the the Links:

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="small-12 large-3 columns">List Links</div>
        <div class="small-12 large-9 columns">FAQ Content</div>
    </div>
</div>

Now in order to offset the FAQ content and the Links to opposite sides, Foundation 4's documentation has Source Ordering classes, but you can only push/pull when the number is less than 12. In this case, we can only source order on the large screens (which is why I moved the Links column above the FAQ columns). Final code should look like this:

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="small-12 large-3 push-9 columns">List Links</div>
        <div class="small-12 large-9 pull-3 columns">FAQ Content</div>
    </div>
</div>

Preston McPeak commented on Laurence Baker's post almost 5 years

You could try putting your code into a codepen.io or jsfiddle.net

Preston McPeak commented on Breno Braga's post almost 5 years

Hey Breno, I'm not sure what your error is with Offcanvas. Is it because there is no content on the page?

Try adding your content on the page about the "exit-offcanvas- anchor" like so:

  <section class="main-section">
          <div class="row">
        <div class="large-12 columns">

          <h4 class="">The Psychohistorians</h4>

          <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>

          <p>Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.</p>

        </div>
      </div>
        </section>

Preston McPeak commented on orcun otaci's post almost 5 years

No problem, good luck!

Preston McPeak commented on Stefan Staudenmeyer's post almost 5 years

No you would need to have the Off canvas on "hide-for-large-up" and your Top bar would be "show-for-large-up"

We did the same thing in this example, check it out

http://codepen.io/ZURBFoundation/full/vKwHa/

Preston McPeak commented on orcun otaci's post almost 5 years

Hey Orcun, so I looked at it on JS and threw it into Codepen and all of the elements work fine for me:

http://codepen.io/Prestonmcpeak/pen/JwpAu
http://jsfiddle.net/zoz3dn51/2/

I think that perhaps you are importing the JavaScript wrong?
Make sure this is right before the body tag of your HTML:

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

Preston McPeak commented on orcun otaci's post almost 5 years

Hey, do you have a working example I can look at? I'd love to help out.

Posts Followed


  • 2
    Replies
  • Button Triangle

    By R Vautier

    button

    Something has changed in F 5.33. I have a simple Button Bank with data dropdowns from the buttons. 5.30 used to have a little triangle, sitting proud and pointing upward to its parent. Just upgraded to 5.33 and the same arrow seems to face right and be... (continued)

    Last Reply by gustavokinsey almost 5 years ago




  • 4
    Replies
  • Grid or Nested Grid?

    By Robocop

    Foundation 5cssgrid

    Following Problem, I have to create a navigation with 5 boxes (equal width) and at the end of the row 1 smaller Box (see picture below). My solution approach with 6 boxes (equal width) and editing the padding of each Box is not promising.. Can someon... (continued)

    Last Reply by Robocop almost 5 years ago


  • 7
    Replies
  • Dropdowns don't close upon selection

    By Rob Christian

    dropdowns

    Hello, I'm using Foundation 5.3.0. I have my dropdowns working, but they don't close when the item from the list is selected, and I'm wondering why that is, and what I have to do to have a clean solution for this. I also notice that the dropdown menus ... (continued)

    Last Reply by Lyn almost 5 years ago






Following

    No Content

Followers

My Posts

My Comments

You commented on Stefan Staudenmeyer's post almost 5 years

Hey Stefan, Do you mind sending over a JS Fiddle or Codepen link?

You commented on Craig Sander's post almost 5 years

Hey! You will actually need to put in this Meta tag into your <head></head>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

You commented on Mike Seaby's post almost 5 years

Oh this is totally sweet! I think this would work great in the Foundation code, you should make a pull request!

You commented on Sophia Taveras's post almost 5 years

Hey Sophia! So you will need to do some rearranging with your code, and I'm going to tell you some best practices.

You should always nest a column inside a row, never a column inside a column. Your markup should look like so (this will remove the margin on the sides, so you will have to add this in again):

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="large-9 columns">FAQ Content</div>
        <div class="large-3 columns">List Links</div>
    </div>
</div>

Next you should also build mobile first, so that means specifying your Small classes before the Large classes and this means we will also build it so that the FAQ content appears after the the Links:

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="small-12 large-3 columns">List Links</div>
        <div class="small-12 large-9 columns">FAQ Content</div>
    </div>
</div>

Now in order to offset the FAQ content and the Links to opposite sides, Foundation 4's documentation has Source Ordering classes, but you can only push/pull when the number is less than 12. In this case, we can only source order on the large screens (which is why I moved the Links column above the FAQ columns). Final code should look like this:

<div class="large-12 card-rates-margin">
    <div class="row">  
        <div class="small-12 large-3 push-9 columns">List Links</div>
        <div class="small-12 large-9 pull-3 columns">FAQ Content</div>
    </div>
</div>

You commented on Laurence Baker's post almost 5 years

You could try putting your code into a codepen.io or jsfiddle.net

You commented on Breno Braga's post almost 5 years

Hey Breno, I'm not sure what your error is with Offcanvas. Is it because there is no content on the page?

Try adding your content on the page about the "exit-offcanvas- anchor" like so:

  <section class="main-section">
          <div class="row">
        <div class="large-12 columns">

          <h4 class="">The Psychohistorians</h4>

          <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>

          <p>Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.</p>

        </div>
      </div>
        </section>

You commented on orcun otaci's post almost 5 years

No problem, good luck!

You commented on Stefan Staudenmeyer's post almost 5 years

No you would need to have the Off canvas on "hide-for-large-up" and your Top bar would be "show-for-large-up"

We did the same thing in this example, check it out

http://codepen.io/ZURBFoundation/full/vKwHa/

You commented on orcun otaci's post almost 5 years

Hey Orcun, so I looked at it on JS and threw it into Codepen and all of the elements work fine for me:

http://codepen.io/Prestonmcpeak/pen/JwpAu
http://jsfiddle.net/zoz3dn51/2/

I think that perhaps you are importing the JavaScript wrong?
Make sure this is right before the body tag of your HTML:

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

You commented on orcun otaci's post almost 5 years

Hey, do you have a working example I can look at? I'd love to help out.

Posts Followed

Following

  • No Content

Followers

  • No Content