Menu icon Foundation

My Posts


My Comments

Agustin Sevilla commented on Amelia Banks's post almost 4 years

What part(s) of Foundation do you want to use?

Agustin Sevilla commented on Agustin Sevilla's post almost 4 years

Quick update: I made a slightly disgusting bit of CSS to patch this bug.

I used the old fixed aspect ratio CSS technique (see the foundation flex-video component for a sensible use of it) to make sure that the image's container was the correct size with media queries before interchange does it's thing. I have one ratio per breakpoint which match the aspect ratios for the images that interchange will load.

Agustin Sevilla commented on Bobby Fritze's post over 4 years

Looks to me that is has to do with where you have .exit-off-canvas in your markup.

On pages like http://sppreview.scratchpadcellars.com/amazon.html it is the last element inside the .row starting under the BEGIN the OUR WINES - YOUR DESIGNS ROW comment - line 157

On the page in question, the .exit-off-canvas appears on line 553 - it is the last item inside the .inner-wrap - which is correct normally. I got it to work by moving the exit-off-canvas so it is the last item in the .main-section (up two lines to 551) and it worked as intended.

Agustin Sevilla commented on Selva Ganesh's post almost 5 years

You can definitely write in your templates and angular logic!

Put your templates into the 'client/templates/' directory, following the structure explained here: http://foundation.zurb.com/apps/docs/#!/angular

You can start adding your services and controllers to the main app.js file, using method chaining, like this:

 //This already application module already exists in 'client/assets/js/app.js'
angular.module('application', [DEPENDECIES]) 
.service('myFancyService', [DEPENDECIES], function() {
})
.controller('myFancyCtrl', [DEPENDECIES], function() {
})

As for moving directories, I think you should be able to do this by modifying your gulpfile.js to make sure you include all the of your app's js - see line 43 - 46:

 // These files are for your app's JavaScript
var appJS = [
  'client/assets/js/app.js'
];

In the gruntfile you can also see where you will add your own template path, although I can't help you much there - I just put them in the directory that Foundation for Apps uses as default.

Hope that helps!

Agustin Sevilla commented on Hans McMurdy's post almost 5 years

This is exciting stuff, Rafi!

I also use Ionic a lot lately, and one feature is that you can start a new project from a pen on CodePen: https://github.com/driftyco/ionic-cli#starting-an-ionic-app

I have used it more than once with their examples on there, and it helped me a lot when learning the ropes!

Agustin Sevilla commented on owen's post almost 5 years

FYI: This has been answered before here: http://foundation.zurb.com/forum/posts/132-full-width-row

It's top answer is still the best:

.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

Then use it like this:

<div class="row fullwidth">
    <div class="large-12 columns">
        <!-- Your Content Here -->
    </div>
</div>

Agustin Sevilla commented on Jess Hines's post over 5 years

Here is my take on this one - forked from Rafi's pen: http://codepen.io/auginator/pen/rpgsE

I changed the structure around a bit (I put all the buttons in a nested row with .collapse. For the labels themselves, I went with absolute positioning and the vertical/horizontal center trick using top:50%;left:50% and transform: translate(-50%, -50%).

Agustin Sevilla commented on Brandon Harman's post over 5 years

Adding the class is not going to work, as Foundation is doing a bit more than that under the hood on this component.

I made a little pen to explain how I would do it. I add a data- attribute to the accordion item I want to expand when the other item is clicked. I then use jquery's .trigger() method to trigger the click event on the item with the correct data- attribute.

Hopefully this will help!

http://codepen.io/auginator/pen/yLCgH

Posts Followed


Following

    No Content

Followers

My Posts

My Comments

You commented on Amelia Banks's post almost 4 years

What part(s) of Foundation do you want to use?

You commented on Agustin Sevilla's post almost 4 years

Quick update: I made a slightly disgusting bit of CSS to patch this bug.

I used the old fixed aspect ratio CSS technique (see the foundation flex-video component for a sensible use of it) to make sure that the image's container was the correct size with media queries before interchange does it's thing. I have one ratio per breakpoint which match the aspect ratios for the images that interchange will load.

You commented on Bobby Fritze's post over 4 years

Looks to me that is has to do with where you have .exit-off-canvas in your markup.

On pages like http://sppreview.scratchpadcellars.com/amazon.html it is the last element inside the .row starting under the BEGIN the OUR WINES - YOUR DESIGNS ROW comment - line 157

On the page in question, the .exit-off-canvas appears on line 553 - it is the last item inside the .inner-wrap - which is correct normally. I got it to work by moving the exit-off-canvas so it is the last item in the .main-section (up two lines to 551) and it worked as intended.

You commented on Selva Ganesh's post almost 5 years

You can definitely write in your templates and angular logic!

Put your templates into the 'client/templates/' directory, following the structure explained here: http://foundation.zurb.com/apps/docs/#!/angular

You can start adding your services and controllers to the main app.js file, using method chaining, like this:

 //This already application module already exists in 'client/assets/js/app.js'
angular.module('application', [DEPENDECIES]) 
.service('myFancyService', [DEPENDECIES], function() {
})
.controller('myFancyCtrl', [DEPENDECIES], function() {
})

As for moving directories, I think you should be able to do this by modifying your gulpfile.js to make sure you include all the of your app's js - see line 43 - 46:

 // These files are for your app's JavaScript
var appJS = [
  'client/assets/js/app.js'
];

In the gruntfile you can also see where you will add your own template path, although I can't help you much there - I just put them in the directory that Foundation for Apps uses as default.

Hope that helps!

You commented on Hans McMurdy's post almost 5 years

This is exciting stuff, Rafi!

I also use Ionic a lot lately, and one feature is that you can start a new project from a pen on CodePen: https://github.com/driftyco/ionic-cli#starting-an-ionic-app

I have used it more than once with their examples on there, and it helped me a lot when learning the ropes!

You commented on owen's post almost 5 years

FYI: This has been answered before here: http://foundation.zurb.com/forum/posts/132-full-width-row

It's top answer is still the best:

.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
}

Then use it like this:

<div class="row fullwidth">
    <div class="large-12 columns">
        <!-- Your Content Here -->
    </div>
</div>

You commented on Jess Hines's post over 5 years

Here is my take on this one - forked from Rafi's pen: http://codepen.io/auginator/pen/rpgsE

I changed the structure around a bit (I put all the buttons in a nested row with .collapse. For the labels themselves, I went with absolute positioning and the vertical/horizontal center trick using top:50%;left:50% and transform: translate(-50%, -50%).

You commented on Brandon Harman's post over 5 years

Adding the class is not going to work, as Foundation is doing a bit more than that under the hood on this component.

I made a little pen to explain how I would do it. I add a data- attribute to the accordion item I want to expand when the other item is clicked. I then use jquery's .trigger() method to trigger the click event on the item with the correct data- attribute.

Hopefully this will help!

http://codepen.io/auginator/pen/yLCgH

Posts Followed

Following

  • No Content

Followers

  • No Content