Known Participant

Answered

DW and Foundation for Sites

3 replies
612 views
Translate

I am using Foundation for Sites. Is there a work flow anyone is using? Right now I use DW for anything that I do that isn't Foundation related which is getting less and less. I use terminal to spin up a Foundation/Handlebars site and Visual Studio to edit. I was trying tonight to use the Live reload in DW and it doesn't work for this. What am I doing wrong?

dreamweaver 2017.0.1

This topic is closed to new replies. Start a new post to keep the conversation going.

BenPleysierCorrect answer

Community Expert

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 for the development of Foundation projects.

I do not know much about Handlebars, I use my own PHP template engine which is very simple and robust.

To have Real-time preview work in Dreamweaver, you need to setup a site

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

john stephanitesAuthor

Known Participant

Hey Ben the way I am working with it, and I maybe wrong, Is I connect to the Localhost and the src files in the project are edited and everytime you save they are recompiled and sent to the distribution files which in turn then generate your new view. So localhost is watching that file. Is there a way to accomplish that? Have the styles and new partials and layout pages routed to the default.html page and that is the file that is being watched by live reload. I tried changing the URL in the browser but t hat doesn't work. I am new to this way of doing things so I may not be explaining it perfectly. Using Gulp or Compass or Handlebars is all pretty much the same which I see DW has supported now so I asked the question hoping someone had a workflow for HandleBars. In short it is the way most are getting their frameworks out through the CLI.

Translate

BenPleysier

Community Expert

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>

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

BenPleysier

Correct answer

Community Expert

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 for the development of Foundation projects.

I do not know much about Handlebars, I use my own PHP template engine which is very simple and robust.

To have Real-time preview work in Dreamweaver, you need to setup a site

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.