Menu icon Foundation

Coder | Charleston, SC

Left my job after 11 years to go all in on an idea. Scared shittless but it's fun learning all of this stuff. This world has changed since the last time I dabbled in it. That was 2002.

My Posts



My Comments

charlyRoot commented on Kyle De Sousa's post 9 months

 @Edward Nickerson:
That fixed me too! I tried the import but not with the window dec. Brilliant!
import $ from 'jquery';

import jQuery from 'jquery'; // STEP ONE**********

import whatInput from 'what-input';

window.$ = $;

window.jQuery = jQuery; // STEP TWO**********

import Foundation from 'foundation-sites';

$(document).foundation();

charlyRoot commented on Roy Six's post 9 months

Thank you very much for this. I thought I had sticky footers all figured with the new XY Grid out until I added enough content to exceed a vh100. Then the content just ran right through the footer without moving it. I thought I was so slick untill... It was very  YAYboo...  :(
I would love an XY Grid conversion of this. I use Panini so excuse the handlebars. I tried attaching your CSS to the native foundation grid classes but couldn't get the footer to stick AND my content to push the footer down. 
Mine works but I suspect there is a better way. Thanks Again for taking the time to share. You helped me out big time!  
 
Codepen (Live Example)
 
.v-jack {
display: flex;
flex-direction: column;
height: 100vh;
}

.v-jack-bar,
.v-jack-nav,
.v-jack-footer {
flex-shrink: 0;
}

.v-jack-main {
flex: 1 0 auto; /* Use 1 0 auto instead of just 1 for backwards compatibility with other browsers */
}

/* All the below is optional CSS to help visualize and stylize */

body {
font-family: "Montserrat", Arial;
text-align: center;
}

.v-jack-nav,
.v-jack-footer {
background: #444;
color: #fcfcfa;
}

.v-jack-bar {
margin: 24px;
font-size: 20px;
}

.v-jack-nav {
padding: 8px;
}

.v-jack-main {
margin: 12px;
}

.v-jack-footer {
padding: 16px;
}

.slider {
width: 700px;
margin-top: 20px;
}

slider-result {

background: #ca1f40;
}
 
<div class="grid-y v-jack">
<div class="cell v-jack-bar">
{{> top-bar}}
</div>
<div class="cell v-jack-nav">
{{> nav}}
</div>
<div class="cell v-jack-main">
{{> body}}
<!-- Slider to adjust main's height -->
<p class="help-text" style="margin-top: 1em;">
Current Rectangle Height = <span id="slider-adjust">20px</span>
</p>
<div class="slider float-center" data-slider data-initial-start="1" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>

&lt;div id="slider-result"&gt;&lt;/div&gt;

</div>
<div class="cell v-jack-footer">
{{> footer}}
</div>
</div>
 
 

charlyRoot commented on charlyRoot's post 10 months

I knew I had way too much going on. You have 3 divs and have 8. That works for me. I think I was hung up on a semantic solution and pretty much wasted a few hours. 
Thank you for your time.

Posts Followed



Following

    No Content

Followers

My Posts

My Comments

You commented on Kyle De Sousa's post 9 months

 @Edward Nickerson:
That fixed me too! I tried the import but not with the window dec. Brilliant!
import $ from 'jquery';

import jQuery from 'jquery'; // STEP ONE**********

import whatInput from 'what-input';

window.$ = $;

window.jQuery = jQuery; // STEP TWO**********

import Foundation from 'foundation-sites';

$(document).foundation();

You commented on Roy Six's post 9 months

Thank you very much for this. I thought I had sticky footers all figured with the new XY Grid out until I added enough content to exceed a vh100. Then the content just ran right through the footer without moving it. I thought I was so slick untill... It was very  YAYboo...  :(
I would love an XY Grid conversion of this. I use Panini so excuse the handlebars. I tried attaching your CSS to the native foundation grid classes but couldn't get the footer to stick AND my content to push the footer down. 
Mine works but I suspect there is a better way. Thanks Again for taking the time to share. You helped me out big time!  
 
Codepen (Live Example)
 
.v-jack {
display: flex;
flex-direction: column;
height: 100vh;
}

.v-jack-bar,
.v-jack-nav,
.v-jack-footer {
flex-shrink: 0;
}

.v-jack-main {
flex: 1 0 auto; /* Use 1 0 auto instead of just 1 for backwards compatibility with other browsers */
}

/* All the below is optional CSS to help visualize and stylize */

body {
font-family: "Montserrat", Arial;
text-align: center;
}

.v-jack-nav,
.v-jack-footer {
background: #444;
color: #fcfcfa;
}

.v-jack-bar {
margin: 24px;
font-size: 20px;
}

.v-jack-nav {
padding: 8px;
}

.v-jack-main {
margin: 12px;
}

.v-jack-footer {
padding: 16px;
}

.slider {
width: 700px;
margin-top: 20px;
}

slider-result {

background: #ca1f40;
}
 
<div class="grid-y v-jack">
<div class="cell v-jack-bar">
{{> top-bar}}
</div>
<div class="cell v-jack-nav">
{{> nav}}
</div>
<div class="cell v-jack-main">
{{> body}}
<!-- Slider to adjust main's height -->
<p class="help-text" style="margin-top: 1em;">
Current Rectangle Height = <span id="slider-adjust">20px</span>
</p>
<div class="slider float-center" data-slider data-initial-start="1" data-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden">
</div>

&lt;div id="slider-result"&gt;&lt;/div&gt;

</div>
<div class="cell v-jack-footer">
{{> footer}}
</div>
</div>
 
 

You commented on charlyRoot's post 10 months

I knew I had way too much going on. You have 3 divs and have 8. That works for me. I think I was hung up on a semantic solution and pretty much wasted a few hours. 
Thank you for your time.

Posts Followed

Following

  • No Content

Followers