Menu icon Foundation

Developer | Rochester, NY

I'm currently an Interactive Developer at an Ad Agency in Rochester, NY.

My Posts







  • 1
    Reply
  • image card component

    By Jordan Bommelje

    Foundationpanel

    I know I post in here with questions too often, but the help is just so good ;) haha So the image shows what I'm looking to accomplish. I do this with panels, but I could probably do it another way if it's easier. What would be the best way of accompl... (continued)

    Last Reply by Rafi Benkual almost 4 years ago





My Comments

Jordan Bommelje commented on bill's post almost 3 years

How I usually do this, is I create a "components" folder in the assets folder and add the JS file there. This will copy into the dist folder without being added to the app.js file based on the standard Gulp file. Then, reference that JS file in the page you want to use it. Let me know if that makes sense!

Jordan Bommelje commented on Robert's post over 3 years

Hey, Robert!

The app.js file in the dist folder is the aggregated results of combining the JS files you ask in your gulp file. If you'd like to manually direct your files to the individual .js fils, you could remove that task. Here's part of the gulp file:

 // Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
  sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});

You can remove "javascript" so it shows:

 // Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
  sequence('clean', ['pages', 'sass', 'images', 'copy'], 'styleguide', done);
});

Then it won't run the task for combining them. I actually really like this feature because it makes things simpler to find instead of wondering which JS file that one function was in.

Jordan Bommelje commented on Martin's post over 3 years

So when you download the essentials and open it, there's no app.css file in the css folder? I just downloaded it and it's in there for me

Jordan Bommelje commented on Kyle Kinnison's post over 3 years

Hey, Kyle!

When you do the Download Everything way, it compiles everything into foundation.js in the js folder. You should be able to include that JS file and it should work! Let us know if you have any trouble.

-Jordan

Jordan Bommelje commented on Ron Wade's post over 3 years

I've been using foundation-cli which seems to set things up slightly different. When I look through foundation that npm installs, I don't have a _settings.scss file, but instead there's a foundation.scss which imports _variables.scss which seems to be comparable to app.scss with _globals.scss. Do you have a foundation.scss file? I wonder if something god updated and didn't go as planned.

So I think this is just an anomaly, or if you have an older version for some reason?

Jordan Bommelje commented on Roy Finaly's post over 3 years

Hey, Roy!

Try this:

$(document).foundation();
$(document).ready(function(){
    var slider = new Foundation.Orbit({
        animation: 'slide',
        timer_speed: 1000,
        pause_on_hover: true,
        animation_speed: 500,
        navigation_arrows: true,
        bullets: false
    });
});

I'm not much of a Javascript developer, so there might be another way of doing it, but I believe "$(document).foundation();" will initialize the foundation core, then in "$(document).ready(function()" you can adjust the objects. I tested this and it worked!

-Jordan

Jordan Bommelje commented on Diego Ramirez's post over 3 years

Hey, Diego!

I'd strongly suggest checking out Magellan (http://foundation.zurb.com/sites/docs/magellan.html).

This should get you up-and-running with a sticky menu bar!

-Jordan

Jordan Bommelje commented on Kevin Kershaw's post over 3 years

Foundation for Apps doesn't use the standard grid system as seen in Foundation for Sites. Try something like this:

<div class="grid-frame">
  <div class="grid-block small-4">
    <div class="grid-block content">Left Panel</div>
  </div>
  <div class="grid-block small-8">
    <div class="grid-block">
      <div class="grid-block content">
        Right Side Content
        <div class="grid-block small-8"><div class="grid-block content">Block Header Left</div></div>
        <div class="grid-block small-4"><div class="grid-block content">Block Header Right</div></div>
      </div>
    </div>
  </div>
</div>

I haven't tested this and it's just all free-hand, but give it a shot and see if it does what you're looking to do!

Jordan Bommelje commented on Ron Wade's post over 3 years

Hey Ron,

When you see a filename starting with an underscore, it typically denotes that it's an imported file. If you take a look at app.scss, you'll see "@import 'settings';" which is importing this. You'll need to compile your app.scss for any changes to take effect. Are you familiar with using Sass? I don't mean to offend you if you do, it's hard to know everyone's background!

-Jordan

Jordan Bommelje commented on Steve Valet's post over 3 years

Hey Steve, I can't be too sure what you're looking to accomplish based on your second image. if you'd like to remove the padding, you could collapse your row and see if that works for you.

   <div class="row collapse">
      <div class="large-3 columns">
          <div class="panel">Section 1</div>
      </div>
      <div class="large-6 columns">
          <div class="panel">Section 2</div>
      </div>
      <div class="large-3 columns">
          <div class="panel">Section 3</div>
      </div>
  </div>

Posts Followed


  • 3
    Replies
  • App.js, what is it?

    By Robert

    app.js

    http://foundation.zurb.com/forum/posts/3008-appjs-what-is-it I dont want to have the app.js in my dist, i dont want to have the link insode my page. So i delete app.js from \src\assets\js but after building i still have both, the link and the ... (continued)

    Last Reply by Robert over 3 years ago


  • 2
    Replies
  • Foundation website

    By Martin

    Websitedownload

    Hi, The Essential package on this page : http://foundation.zurb.com/sites/download.html/ doesn't contains no any CSS. Is there a Github for the website where I can report this ? Do you get the same result ? Thanks :)

    Last Reply by Martin over 3 years ago



  • 2
    Replies
  • Orbit with Foundation 6

    By Roy Finaly

    Orbitfoundation 6

    Hello All, I am trying to get the Orbit working with foundation 6, but I get a vertical list of images. What I am trying to get is a list for 4 images and up on sliding it will show one new image. See the code attached, and help will be appreciated. Thank you Roy

    Last Reply by Roy Finaly over 3 years ago





  • 3
    Replies
  • Remove Spacing On Panel

    By Steve Valet

    panel sites

    What is the best method to remove the spacing on the side of a panel? I have three in a Foundation Row, and I would like the row to look like a single row instead of three columns in a row. I have attached images of what it looks like now, and what I ... (continued)

    Last Reply by Steve Valet over 3 years ago



Following

    No Content

Followers

  • Anna Everson has no published posts

My Posts

My Comments

You commented on bill's post almost 3 years

How I usually do this, is I create a "components" folder in the assets folder and add the JS file there. This will copy into the dist folder without being added to the app.js file based on the standard Gulp file. Then, reference that JS file in the page you want to use it. Let me know if that makes sense!

You commented on Robert's post over 3 years

Hey, Robert!

The app.js file in the dist folder is the aggregated results of combining the JS files you ask in your gulp file. If you'd like to manually direct your files to the individual .js fils, you could remove that task. Here's part of the gulp file:

 // Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
  sequence('clean', ['pages', 'sass', 'javascript', 'images', 'copy'], 'styleguide', done);
});

You can remove "javascript" so it shows:

 // Build the "dist" folder by running all of the above tasks
gulp.task('build', function(done) {
  sequence('clean', ['pages', 'sass', 'images', 'copy'], 'styleguide', done);
});

Then it won't run the task for combining them. I actually really like this feature because it makes things simpler to find instead of wondering which JS file that one function was in.

You commented on Martin's post over 3 years

So when you download the essentials and open it, there's no app.css file in the css folder? I just downloaded it and it's in there for me

You commented on Kyle Kinnison's post over 3 years

Hey, Kyle!

When you do the Download Everything way, it compiles everything into foundation.js in the js folder. You should be able to include that JS file and it should work! Let us know if you have any trouble.

-Jordan

You commented on Ron Wade's post over 3 years

I've been using foundation-cli which seems to set things up slightly different. When I look through foundation that npm installs, I don't have a _settings.scss file, but instead there's a foundation.scss which imports _variables.scss which seems to be comparable to app.scss with _globals.scss. Do you have a foundation.scss file? I wonder if something god updated and didn't go as planned.

So I think this is just an anomaly, or if you have an older version for some reason?

You commented on Roy Finaly's post over 3 years

Hey, Roy!

Try this:

$(document).foundation();
$(document).ready(function(){
    var slider = new Foundation.Orbit({
        animation: 'slide',
        timer_speed: 1000,
        pause_on_hover: true,
        animation_speed: 500,
        navigation_arrows: true,
        bullets: false
    });
});

I'm not much of a Javascript developer, so there might be another way of doing it, but I believe "$(document).foundation();" will initialize the foundation core, then in "$(document).ready(function()" you can adjust the objects. I tested this and it worked!

-Jordan

You commented on Diego Ramirez's post over 3 years

Hey, Diego!

I'd strongly suggest checking out Magellan (http://foundation.zurb.com/sites/docs/magellan.html).

This should get you up-and-running with a sticky menu bar!

-Jordan

You commented on Kevin Kershaw's post over 3 years

Foundation for Apps doesn't use the standard grid system as seen in Foundation for Sites. Try something like this:

<div class="grid-frame">
  <div class="grid-block small-4">
    <div class="grid-block content">Left Panel</div>
  </div>
  <div class="grid-block small-8">
    <div class="grid-block">
      <div class="grid-block content">
        Right Side Content
        <div class="grid-block small-8"><div class="grid-block content">Block Header Left</div></div>
        <div class="grid-block small-4"><div class="grid-block content">Block Header Right</div></div>
      </div>
    </div>
  </div>
</div>

I haven't tested this and it's just all free-hand, but give it a shot and see if it does what you're looking to do!

You commented on Ron Wade's post over 3 years

Hey Ron,

When you see a filename starting with an underscore, it typically denotes that it's an imported file. If you take a look at app.scss, you'll see "@import 'settings';" which is importing this. You'll need to compile your app.scss for any changes to take effect. Are you familiar with using Sass? I don't mean to offend you if you do, it's hard to know everyone's background!

-Jordan

You commented on Steve Valet's post over 3 years

Hey Steve, I can't be too sure what you're looking to accomplish based on your second image. if you'd like to remove the padding, you could collapse your row and see if that works for you.

   <div class="row collapse">
      <div class="large-3 columns">
          <div class="panel">Section 1</div>
      </div>
      <div class="large-6 columns">
          <div class="panel">Section 2</div>
      </div>
      <div class="large-3 columns">
          <div class="panel">Section 3</div>
      </div>
  </div>

Posts Followed

Following

  • No Content

Followers

  • Anna Everson has no published posts