Menu icon Foundation
Footer with Apps

How do we create a footer with Foundation apps like the one on the Zurb Foundation site? I mean I could create one with CSS but the grid-block and flexbox seem to be countering any attempts in making one. I tried a few things such as the medium-up-3 to make the first 3 blocks share the same row, but then I want a new row with a fixed footer...how could I do this in apps!

This is my code thus far...

HTML

---
name: accueil
url: /
---
<div class="grid-frame">
    <div class="grid-block small-up-1 medium-up-3">
		<div class="grid-block img1">
			<div class="grid-content text-center">
				<div zf-action-sheet id="infoBtn">
					<div zf-as-button="" title="Plus d'info"></div>
					<div zf-as-content="" position="top">
						<p>Choisir produit</p>
						<ul>
							<li><a href="#">Vinyl</a></li>
							<li><a href="#">Tapis</a></li>
							<li><a href="#">Plancher de bois</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-block img2">
		<div class="grid-content text-center">
			<div zf-action-sheet id="infoBtn">
				<div zf-as-button="" title="Plus d'info"></div>
					<div zf-as-content="" position="top">
						<p>Choisir produit</p>
						<ul>
							<li><a href="#">Vinyl</a></li>
							<li><a href="#">Tapis</a></li>
							<li><a href="#">Plancher de bois</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-block img3">
			<div class="grid-content text-center">
				<div zf-action-sheet id="infoBtn">
					<div zf-as-button="" title="Plus d'info"></div>
						<div zf-as-content="" position="top">
							<p>Choisir produit</p>
							<ul>
								<li><a href="#">Vinyl</a></li>
								<li><a href="#">Tapis</a></li>
								<li><a href="#">Plancher de bois</a></li>
							</ul>
						</div>
				</div>
			</div>
		</div>
		<div id="footer">
			Test
		</div>	
	</div>
    
CSS
@import "settings";
@import "foundation";

$position: 85%;
$mainColor: rgb(213, 235, 238);//pantone pastel neon coated 9460
$menuHeight: 2.5em;

.menu-group, .menu-bar {
    background: $mainColor;
}

.img1 {
	background: url('/assets/img/1.jpg') no-repeat center center;
	background-size: cover;
	
	#infoBtn {
		top: $position;
		.button, button {
			background: $mainColor;
			color: black;
		}
	}
}

.img2 {
	background: url('/assets/img/2.jpg') no-repeat center center;
	background-size: cover;

	#infoBtn {
		top: $position;
		.button, button {
			background: $mainColor;
			color: black;
		}
	}
}

.img3 {
	background: url('/assets/img/4.jpg') no-repeat center center;
	background-size: cover;

	#infoBtn {
		top: $position;
		.button, button {
			background: $mainColor;
			color: black;
		}
	}
}

#footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: $mainColor;
	height: $menuHeight;
}

footerapps

How do we create a footer with Foundation apps like the one on the Zurb Foundation site? I mean I could create one with CSS but the grid-block and flexbox seem to be countering any attempts in making one. I tried a few things such as the medium-up-3 to make the first 3 blocks share the same row, but then I want a new row with a fixed footer...how could I do this in apps!

This is my code thus far...

HTML

---
name: accueil
url: /
---
<div class="grid-frame">
    <div class="grid-block small-up-1 medium-up-3">
		<div class="grid-block img1">
			<div class="grid-content text-center">
				<div zf-action-sheet id="infoBtn">
					<div zf-as-button="" title="Plus d'info"></div>
					<div zf-as-content="" position="top">
						<p>Choisir produit</p>
						<ul>
							<li><a href="#">Vinyl</a></li>
							<li><a href="#">Tapis</a></li>
							<li><a href="#">Plancher de bois</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-block img2">
		<div class="grid-content text-center">
			<div zf-action-sheet id="infoBtn">
				<div zf-as-button="" title="Plus d'info"></div>
					<div zf-as-content="" position="top">
						<p>Choisir produit</p>
						<ul>
							<li><a href="#">Vinyl</a></li>
							<li><a href="#">Tapis</a></li>
							<li><a href="#">Plancher de bois</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-block img3">
			<div class="grid-content text-center">
				<div zf-action-sheet id="infoBtn">
					<div zf-as-button="" title="Plus d'info"></div>
						<div zf-as-content="" position="top">
							<p>Choisir produit</p>
							<ul>
								<li><a href="#">Vinyl</a></li>
								<li><a href="#">Tapis</a></li>
								<li><a href="#">Plancher de bois</a></li>
							</ul>
						</div>
				</div>
			</div>
		</div>
		<div id="footer">
			Test
		</div>	
	</div>
    
CSS
@import "settings";
@import "foundation";

$position: 85%;
$mainColor: rgb(213, 235, 238);//pantone pastel neon coated 9460
$menuHeight: 2.5em;

.menu-group, .menu-bar {
    background: $mainColor;
}

.img1 {
	background: url('/assets/img/1.jpg') no-repeat center center;
	background-size: cover;
	
	#infoBtn {
		top: $position;
		.button, button {
			background: $mainColor;
			color: black;
		}
	}
}

.img2 {
	background: url('/assets/img/2.jpg') no-repeat center center;
	background-size: cover;

	#infoBtn {
		top: $position;
		.button, button {
			background: $mainColor;
			color: black;
		}
	}
}

.img3 {
	background: url('/assets/img/4.jpg') no-repeat center center;
	background-size: cover;

	#infoBtn {
		top: $position;
		.button, button {
			background: $mainColor;
			color: black;
		}
	}
}

#footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	background: $mainColor;
	height: $menuHeight;
}
Aaron Challis over 4 years ago

Hey buddy

You don't need to do anything special for this, in my app I just use something similar to this:

    <div class="grid-frame vertical">
      <div class="grid-content shrink" style="padding: 0;">
        <div class="primary title-bar">
          Title Bar
        </div>
      </div>

      <div ui-view class="grid-content">
      </div>

      <div class="grid content shrink">
        Footer Sticks to the Bottom
      </div>
    </div>

The 'shrink' class at the last grid content forces it to act like a kind of 'sticky' footer without any fuss. :)

Hope that helps.