1 Correct answer
I did use Foundation to create sites a few years ago, in fact my own website was built using version 4 of the framework.
As with the likes of Bootstrap, the framework consists of CSS and JS files and the markup (HTML) is left to the user, albeit with the assistance of the many examples. The best way to use the framework is to use the SCSS files which can be compiled within the current version of Dreamweaver. Together with the superior markup facilities, this makes Dreamweaver an exceptional tool
...
3
Replies
I like to keep things simple. If I were to use Foundation my directory structure would be
where I grab the source files from GitHub. Overriding styles will go into the mystyles directory. Any changes made in the SCSS files will be automatically compiled by Dreamweaver. I have also included JS source files, I compile these using PrePros.
I use my own little template system, page.php being the backbone. The source code is very simple as per
<?php
class Page {
private $title, $stylesheets=array(), $javascripts=array(), $body;
function Page() {
$this->addCSS('css/foundation.css'); // these files can be placed in the template
$this->addJavascript('js/foundation.js'); // that way this script will be universal
}
function setTitle($title) {
$this->title = $title;
}
function setDescription($description) {
$this->description = $description;
}
function addCSS($path) {
$this->stylesheets[] = $path;
}
function addJavascript($path) {
$this->javascripts[] = $path;
}
function startHead() {
ob_start();
}
function endHead() {
$this->head = ob_get_clean();
}
function startMain() {
ob_start();
}
function endMain() {
$this->main = ob_get_clean();
}
function startScripts() {
ob_start();
}
function endScripts() {
$this->scripts = ob_get_clean();
}
function render($path) {
ob_start();
include($path);
return ob_get_clean();
}
}
I would then create the template which looks like
<?php
date_default_timezone_set( 'Australia/Melbourne' );
$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="<?php echo $this->description; ?>">
<meta name="author" content="">
<title><?php echo $this->title; ?></title>
<meta property="og:url" content="<?php echo $url; ?>">
<meta property="og:type" content="website">
<meta property="og:title" content="<?php echo $this->title; ?>">
<meta property="og:description" content="<?php echo $this->description; ?>">
<meta property="og:image" content="">
<link href="favicon.ico" rel="icon">
<?php
foreach ($this->stylesheets as $stylesheet) {
// this is neccessary only if the style sheet(s) are in page.php
echo '<link href="' . $stylesheet . '" rel="stylesheet" />' . "\n";
}
echo $this->head; // if there are document specific scripts/styles
?>
</head>
<body>
<nav> <!-- Navigation code goes here --> </--></nav>
<main>
<?php echo $this->main; ?>
</main>
<footer> <!-- Footer code goes here --> </footer>
<?php
foreach ($this->javascripts as $javascript) {
// this is neccessary only if the script(s) are in page.php
echo '<script src="' . $javascript . '" defer="defer"></script>' . "\n";
}
echo $this->scripts; // if there are document specific scripts
?>
</body>
</html>
Creating the pages becomes a cinch (is this a proper word? I use it often to mean easy). The index page would look like
<?php
require_once( 'templates/inc/page.php' );
$page = new Page;
$page->setTitle( 'Home Page' );
$page->setDescription( 'This is a demonstartion of a simple PHP OOP template system' );
$page->startHead();
?>
<?php
$page->endHead();
$page->startMain();
?>
<!-- Content goes here -->
<?php
$page->endMain();
$page->startScripts();
?>
<?php
$page->endScripts();
echo $page->render( 'templates/mytemplate.php' );
The final page (source code in browser) would look like, with apologies for the spelling error.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="This is a demonstartion of a simple PHP OOP template system">
<meta name="author" content="">
<title>Home Page</title>
<meta property="og:url" content="http://localhost/zoot/index.php">
<meta property="og:type" content="website">
<meta property="og:title" content="Home Page">
<meta property="og:description" content="This is a demonstartion of a simple PHP OOP template system">
<meta property="og:image" content="">
<link href="favicon.ico" rel="icon">
<link href="css/foundation.css" rel="stylesheet" />
</head>
<body>
<nav> <!-- Navigation code goes here --> </--></nav>
<main>
<!-- Content goes here -->
</main>
<footer> <!-- Footer code goes here --> </footer>
<script src="js/foundation.js" defer="defer"></script>
</body>
</html>
AdChoices