Menu icon Foundation

Engineer | San Jose, Ca

Hella Pixels - Hella Code

My Posts

No Content

My Comments

Arthur de la Rocha commented on Justin's post almost 4 years

Hey Justin,

So after testing out the gem, I noticed that there is no content for the off canvas if you use the example from the Docs. However going to the Building Block with the off canvas, you can drop this in your view, and edit the content to work with your site.

http://zurb.com/building-blocks/top-bar-with-off-canvas

After dropping that in, I was able to get the whole thing working. We are going to make a pass at the Docs to better show how to set up the off canvas menu. If this does not work for you, make sure that you run rails g foundation:install after updating the gem version in your app.

Arthur de la Rocha commented on Michael Blake's post almost 4 years

Pushed out a new release to the gem. We are at 6.1.1.1 now. Please update and you should be good to go! Thanks!

Arthur de la Rocha commented on Michael Blake's post almost 4 years

Hmm, There was a pull request merged in this morning for fixing the order. I will release an update to the gem once we fix an error that breaks the Travis build.

Arthur de la Rocha commented on Vocal Son's post about 4 years

I can add to this. In order to have the video clip play in the background you can use html5 video tags and some css.

Here is a quick tutorial on how to achieve this:

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

We have a similar thing on the http://zurb.com homepage, however what is different is we have the video file hosted instead of displaying a youtube or vimeo fullscreen modal, and we are using some JS. One thing to keep in mind if you want a quick page load, or as quick as possible, you will need to lower the quality of the shorter rendered clip a bit. You will notice that a lot of sites have a color overlay or blur to the video so that the lowered quality isn't noticeable.

Your HTML might look something like this with a little Foundation 5 code:

<div class="my-header-section>

  <div class="row">
    <div class="large-8 columns large-centered text-center">
      <h2>My Amazing Title Lives Here!</h2>
      <p>Right over the video :D</p>

      <a href="#">Play</a>
    </div>
  </div>

  <video autoplay loop poster="backup.jpg" id="bgvid">
    <source src="/path/to/video.webm" type="video/webm">
    <source src="/path/to/video.mp4" type="video/mp4">
  </video>

</div>

You can just link the Play button to open a modal as Rafi suggested, or if you know some Javascript, you can trigger an event to replace the background video with the full video and hide the text. :D I hope this helps!

Arthur de la Rocha commented on Anina's post about 4 years

Hi Anina,

You could try adding some bottom padding on your Rows, or even a margin bottom.
If you only want to add it to certain rows, styles the row with extra padding if it has an extra class like:

table.row.x-pad { 
  padding: 0px 0px 20px 0px; 
  width: 100%;
  position: relative;
}

I hope that helps!

Arthur de la Rocha commented on Anna Callahan's post about 4 years

No Problem! :D

Arthur de la Rocha commented on Anna Callahan's post about 4 years

Hi Anna,

On the bottom there you have 'setting-name: setting-value'. That is placeholder text telling you that is where you will add any js options like fade, lazyload, dots, arrows etc.

Try changing it to just

$(document).ready(function(){
  $('.your-class').slick();
});

That could be confusing, they should have stated it differently since that is their explanation of 'usage' in their docs.

Arthur de la Rocha commented on Alexander Görlich's post about 4 years

Hey Alexander what version of Windows are you running?

Arthur de la Rocha commented on Anna Callahan's post about 4 years

Hello Anna,

It has been a little while since I have installed Slick, so I went ahead an downloaded the files. You can just open the Slick folder in that download, and grab the slick.js file and the slick.scss file. Put these files in the folders that they should be in, for example we always have a scss and a js folder.

In your html document, or layout depending on how your site is set up, put the link to the css file in the head tag.

<head>
<link rel="stylesheet" type="text/css" href="scss/slick.scss"/>
</head>

Then add the link to the js file to the bottom of your document or layout. There should already be links to other js files, just out it under those.

<script type="text/javascript" src="js/slick.js"></script>

Does this help clear up the confusion? I think the slick download included a demo page which is why you see all those extra files.

Arthur de la Rocha commented on Michael Johann's post about 4 years

Hey Guys,

The fix has been published and is now live. Sorry for taking 3 days to get this out, but thanks for staying on top of it and letting us know. You guys rock!

https://rubygems.org/gems/foundation-rails/versions/5.5.3.2

Posts Followed


  • 4
    Replies
  • JS Components not working (Rails)

    By Justin

    rails

    I have been hacking around with different ways of including foundation into my rails project. All the CSS/SASS components seem to work correctly. However the JS components aren't working at all. An example, i have the off canvas code example on the app, t... (continued)

    Last Reply by John Setiawan over 3 years ago




  • 3
    Replies
  • Space between rows - Row Height

    By Anina

    rowheightspace

    Hi there! I am new to Ink Email platform. I really love the integration! :) Well done! One question though, I want the change row height to some of my rows to have more space between them for better readability. Thanks in advance!!

    Last Reply by Anina over 3 years ago







Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Justin's post almost 4 years

Hey Justin,

So after testing out the gem, I noticed that there is no content for the off canvas if you use the example from the Docs. However going to the Building Block with the off canvas, you can drop this in your view, and edit the content to work with your site.

http://zurb.com/building-blocks/top-bar-with-off-canvas

After dropping that in, I was able to get the whole thing working. We are going to make a pass at the Docs to better show how to set up the off canvas menu. If this does not work for you, make sure that you run rails g foundation:install after updating the gem version in your app.

You commented on Michael Blake's post almost 4 years

Pushed out a new release to the gem. We are at 6.1.1.1 now. Please update and you should be good to go! Thanks!

You commented on Michael Blake's post almost 4 years

Hmm, There was a pull request merged in this morning for fixing the order. I will release an update to the gem once we fix an error that breaks the Travis build.

You commented on Vocal Son's post about 4 years

I can add to this. In order to have the video clip play in the background you can use html5 video tags and some css.

Here is a quick tutorial on how to achieve this:

http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video

We have a similar thing on the http://zurb.com homepage, however what is different is we have the video file hosted instead of displaying a youtube or vimeo fullscreen modal, and we are using some JS. One thing to keep in mind if you want a quick page load, or as quick as possible, you will need to lower the quality of the shorter rendered clip a bit. You will notice that a lot of sites have a color overlay or blur to the video so that the lowered quality isn't noticeable.

Your HTML might look something like this with a little Foundation 5 code:

<div class="my-header-section>

  <div class="row">
    <div class="large-8 columns large-centered text-center">
      <h2>My Amazing Title Lives Here!</h2>
      <p>Right over the video :D</p>

      <a href="#">Play</a>
    </div>
  </div>

  <video autoplay loop poster="backup.jpg" id="bgvid">
    <source src="/path/to/video.webm" type="video/webm">
    <source src="/path/to/video.mp4" type="video/mp4">
  </video>

</div>

You can just link the Play button to open a modal as Rafi suggested, or if you know some Javascript, you can trigger an event to replace the background video with the full video and hide the text. :D I hope this helps!

You commented on Anina's post about 4 years

Hi Anina,

You could try adding some bottom padding on your Rows, or even a margin bottom.
If you only want to add it to certain rows, styles the row with extra padding if it has an extra class like:

table.row.x-pad { 
  padding: 0px 0px 20px 0px; 
  width: 100%;
  position: relative;
}

I hope that helps!

You commented on Anna Callahan's post about 4 years

No Problem! :D

You commented on Anna Callahan's post about 4 years

Hi Anna,

On the bottom there you have 'setting-name: setting-value'. That is placeholder text telling you that is where you will add any js options like fade, lazyload, dots, arrows etc.

Try changing it to just

$(document).ready(function(){
  $('.your-class').slick();
});

That could be confusing, they should have stated it differently since that is their explanation of 'usage' in their docs.

You commented on Alexander Görlich's post about 4 years

Hey Alexander what version of Windows are you running?

You commented on Anna Callahan's post about 4 years

Hello Anna,

It has been a little while since I have installed Slick, so I went ahead an downloaded the files. You can just open the Slick folder in that download, and grab the slick.js file and the slick.scss file. Put these files in the folders that they should be in, for example we always have a scss and a js folder.

In your html document, or layout depending on how your site is set up, put the link to the css file in the head tag.

<head>
<link rel="stylesheet" type="text/css" href="scss/slick.scss"/>
</head>

Then add the link to the js file to the bottom of your document or layout. There should already be links to other js files, just out it under those.

<script type="text/javascript" src="js/slick.js"></script>

Does this help clear up the confusion? I think the slick download included a demo page which is why you see all those extra files.

You commented on Michael Johann's post about 4 years

Hey Guys,

The fix has been published and is now live. Sorry for taking 3 days to get this out, but thanks for staying on top of it and letting us know. You guys rock!

https://rubygems.org/gems/foundation-rails/versions/5.5.3.2

Posts Followed

Following

  • No Content

Followers