Pages

Saturday, September 10, 2016

Zend framework 3 Foundation 6

The Zend Framework 3 skeleton application comes with default 'bootstrap". So how should I change the theme using "Foundation 6".

At first download "Foundation 6"  into the "<project folder>/public" folder. "Foundation 6" installation can be done in several ways, Here I choose the npm installation because it will be easier to install "Grunt" & other related modules to install other related modules for 

  • Compile scss.
  • Minify css.
  • Concatenate javascript.
  • Minify Javascript.

The best way to manage locally installed npm packages is to create a package.json file.
To create the "package.json" follow instructions here. Only thing that you have to make sure is the main file name is "Gruntfile.js". Now you are ready to install "Foundation 6". The following command will install the "Foundation 6".

$ npm install foundation-sites --save

It will install "Foundation 6" into the "<project folder>/public/node_modules/foundation-sites" folder. 

Now you just need to edit just only a single file. 
Open the "<project folder>module/Application/view/layout/layout.phtml". 

Chang the following line
        <?= $this->headLink(['rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/favicon.ico'])
                        ->prependStylesheet($this->basePath('css/style.css'))
                        ->prependStylesheet($this->basePath('css/bootstrap-theme.min.css'))
                        ->prependStylesheet($this->basePath('css/bootstrap.min.css'))
        ?>
 into 
        <?= $this->headLink(['rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/favicon.ico'])
                        ->prependStylesheet($this->basePath('css/style.css'))
                        ->prependStylesheet($this->basePath('node_modules/foundation-sites/dist/foundation.min.css'))
        ?>

And

        <?= $this->headScript()
            ->prependFile($this->basePath('js/bootstrap.min.js'))
            ->prependFile($this->basePath('js/jquery-2.2.4.min.js'))

        ?>

Into
        <?= $this->headScript()
            ->prependFile($this->basePath('js/jquery-2.2.4.min.js'))
            ->prependFile($this->basePath('node_modules/foundation-sites/dist/foundation.min.js'))

        ?>

Finally, add the following code before the end of the </body> tag.

<script> $(document).foundation(); </script>

2 comments:

  1. Your blog is a good source of information for the php developers
    , as discussed above "foundation 6" installation can be done uin several ways.To get started there are some prerequisites.

    You’ll need to have NodeJS installed and also the npm tool that should be installed with NodeJS. You also need Git, Gulp, and Bower, all of which our foundation-cli will use.

    ReplyDelete
  2. Thanks for sharing useful article..

    ReplyDelete