Wilson Mar bio photo

Wilson Mar

Hello!

Calendar YouTube Github

LinkedIn

Foundation website generation on MacOS

Install a complete development environment for generating a website using the flexible UI Foundation Framework top UI pros use

US (English)   Norsk (Norwegian)   Español (Spanish)   Français (French)   Deutsch (German)   Italiano   Português   Estonian   اَلْعَرَبِيَّةُ (Egypt Arabic)   Napali   中文 (简体) Chinese (Simplified)   日本語 Japanese   한국어 Korean

Overview

This is a hands-on step-by-step tutorial on the quickest way for “newbies” to install Foundation Framework on a MacOS machine, using my Bash script or manually.

About Foundation Framework

As its website address shows, the Foundation Framework’s home page at https://foundation.zurb.com is from Zurb, a web design services firm based in the Silicon Valley since 1998.

Look at Zurb’s showcase of websites, web apps, and emails. Some run on a WordPress backend. Zurb’s publicly named customers include Slack, Asana, Amazon, Disney, eBay, National Geographic, etc.

Zurb’s on-going work for big brand clients with money is the sustainable business model for continuous improvement. That’s why Foundation can legitimately call itself “the most advanced responsive front-end framework in the world.”

Competitors

NOTE: According to BuiltWith, among the top million websites a steady 20.7% use Bootstrap vs. 1.8% (but growing) use the Foundation Framework. 112k starred Bootstrap on Github vs. 25.8k stars for Foundation on Github. Indeed reports more job postings for Bootstrap. Support for Foundation in JHipster was requested in Jan 2016 and closed because it uses Twitter’s Bootstrap instead.

Some feel Foundation is more intuitive to change and more “customizable” than Bootstrap.

The lack of a cross-platform mobile + web app development approach is what may limit its potential in the future against:

  • React + React Native

  • PWA (Progressive Web App)

  • NativeScript

Social

Sign-up for Zurb’s monthly newsletter and Design Trends PDF on responsive design.

Follow @ZURBfoundation

https://foundation.zurb.com/forum

(No Slack, LinkedIn, Facebook, Instagram, etc. ?)

Foundation Suite

Foundation is actually a family of responsive front-end frameworks that make it easy to design beautiful responsive experiences that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable.

  • Foundation for Sites (websites) consists of Node.js packages. The framework provides a XY Grid and coded UI components. It provides fine-grained control of font typography and forms. The ZURB Stack (ZURB template) uses Gulp to compresses JavaScripts, watches for file changes to rerun.

    • Gulp task runner (instead of Grunt)
    • Panini generates flat files using the Handlebars templating engine (see https://github.com/zurb/panini). It uses a layout like Jekyll, Middleman, or Assemble. JSON or YML files are used instead of a database like WordPress needs.
    • SCSS
    • Zepto, a lighter substitute for jQuery
    • Foundation’s own XY Grid, a customized CSS Grid so it works on older browsers
    • Browsersync
    • Bower to download front-end UI modules dependencies to custom Node.Js code
    • Motion UI

  • Foundation for web apps refers to the Apps Controller Using AngularJS.

  • Foundation for Emails refers to the tool that creates HTML used to display beautifully formatted email bodies.

Get Yourself on GitHub

The following steps require switching between GitHub and Terminal, by pressing command+Tab until the icon for the app you want is highlighted.

The following instructions assumes this is the first time you’re running this.

  1. On an internet browser on GitHub.com, create an account if you don’t already have one.

    Throughout this tutorial, you will be replacing your own account name with the stand-in example of:

    hotwilson

    SSH Key into GitHub

  2. Switch to a Terminal to create a public and private key. To use default parameters:

    ssh-keygen

    The response:

    Generating public/private rsa key pair.
Enter file in which to save the key (/Users/hotwilson/.ssh/id_rsa):

  3. Press Enter repeatedly to accept defaults until you see:

    Your public key has been saved in /Users/hotwilson/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:lsjVHl3cuL/xRvbFzyWtSaFxVI59oDNyAuxicJeWqOs hotwilson@Wilsons-MacBook-Pro.local
The key's randomart image is:
+---[RSA 2048]----+
|       o.o   .o+.|
|    . o *o . o+=.|
|     + +. = *...+|
|    ..oo.o =.o+ .|
|     oo.S .  + = |
|    .  .    . o.O|
|   .         . BO|
|    E         o.*|
|               . |
+----[SHA256]-----+

    PROTIP: The account name shown above would be substituted with your own account name. But it doesn’t matter because it’s the certificates generated that are used for authentication.

  4. Get the public key in the .ssh folder into your Mac’s clipboard:

    cat ~/.ssh/id_rsa.pub | pbcopy

  5. Press command+Tab to switch back to the internet browser showing GitHub.
  6. Click the icon for your account at the upper-right of the screen to select Settings.
  7. Click on SSH and GPG keys.
  8. Click on New SSH key green button.

  9. Click inside the field labeled Key so its border turns blue.

    PROTIP: You can leave the Label field blank. Others put a date there.

    PROTIP: Enterprise versions of GitHub use single-sign-on capabilities that leverage corporate authentication mechanisms where you don’t have to do this.

  10. Click on Add SSH key green button.

    You can now upload from your laptop to any repo for your GitHub account.

    Create container path

  11. In a Terminal window:

  12. Create a folder to house your development projects:

    mkdir ~/gits && cd gits

    PROTIP: Instead of gits, some use dev or Sites or Projects to house related software development work, separate from other folders such as “Desktop” and “Document” under your MacOS user account folder.

  13. Create a folder representing your GitHub account to house new websites to be created (substituting “hotwilson” with your GitHub user name):

    mkdir hotwilson

  14. Set permissions for your MacOS user to write to the new folder (subsituting your own user instead of “wilsonmar” and GitHub account name instead of “hotwilson”):

    sudo chown -R wilsonmar hotwilson
    sudo chmod -R +rwx hotwilson

  15. Type in your password when prompted.

  16. Navigate into the containing folder where a new directory is automatically built:

    cd ~/gits/hotwilson

    Get batch utility from GitHub

  17. Get the Bash script that automates the instructions described below:

    wget https://github.com/wilsonmar/git-utilities/blob/master/foundation-website-init.sh

    The response ends with a line like this:

    2017-09-28 03:26:42 (441 KB/s) - ‘foundation-website-init.sh’ saved [46178]

    Alternately, download the whole repo:

    git clone https://github.com/wilsonmar/git-utilities --depth=1 && git checkout HEAD foundation-website-init.sh

  18. Open for edit the file using the nano text editing program that comes with MacOS:

    nano foundation-website-init.sh

    Alternately, you can use subl, atom, vscode, or IDE already installed.

  19. Edit the file to specify your account and website name:

      GITHUB_USER="hotwilson"
  REPONAME='website1'

  20. Save the changes.

  21. Run the script that performs what is described below:

    ./foundation-website-init.sh

Processing

The following steps are performed either manually or by the Bash script downloaded above.

  1. Navigate into the containing folder for Foundation to build a new directory, such as:

    cd ~/gits/hotwilson

    Starting over?

    If you already created a folder using the script or manually…

  2. If you have a Terminal window running the localhost website, click on that Terminal screen and press control+C.

  3. Remove (delete) the generated folder (replacing “website1” with your site’s name):

    rm -rf website1

    By deleting the whole folder, makes the automation script “idempotent”. In other words, running it would end up the same.

    Get website local

  4. Create a folder containing your repo in GitHub (subsituting “hotwilson/website1” with your own account and repo name):

    git clone https://github.com/hotwilson/website1

    The response for just .git folder and README.md in the repo:

    Cloning into 'website1'...
remote: Counting objects: 3, done.
remote: Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), done.

    gitignore website folder

    Make sure that folders are not uploaded

  5. Create or open for edit the .gitignore file using the nano text editing program that comes with MacOS:

    nano .gitignore

    Alternately, you can use subl, atom, vscode, or IDE already installed.

  6. Edit the file to specify your account and website name:

    website1

  7. Save the changes.

    Foundation Installation

  8. Install Node and NPM if it’s not already installed.

  9. Install the latest version of Foundation on any directory:

    npm install -g foundation-cli

    The response at time of writing:

    /usr/local/bin/foundation -> /usr/local/lib/node_modules/foundation-cli/bin/foundation.js
       + foundation-cli@2.2.3
added 376 packages in 37.966s
 
╭─────────────────────────────────────╮
│                                     │
│   Update available 5.3.0 → 5.4.2    │
│     Run npm i -g npm to update      │
│                                     │
╰─────────────────────────────────────╯

  10. Update to the latest:

    npm i -g npm

    The response repeats the update message, which you can now ignore:

    /usr/local/bin/npm -> /usr/local/lib/node_modules/npm/bin/npm-cli.js
/usr/local/bin/npx -> /usr/local/lib/node_modules/npm/bin/npx-cli.js
       + npm@5.4.2
added 21 packages, removed 22 packages and updated 19 packages in 16.456s
 
╭─────────────────────────────────────╮
│                                     │
│   Update available 5.3.0 → 5.4.2    │
│     Run npm i -g npm to update      │
│                                     │
╰─────────────────────────────────────╯

  11. Verify the version of Foundation CLI installed:

    foundation -version

    New Foundation site

    To create a new site folder on the path above using a CLI command:

  12. You can run this command without parameters so you are prompted to supply then manually:

    foundation new

    Alternately, specify pararmeters and feed in the variable automatically when prompted:

    foundation new --framework sites --template zurb <${WEBSITE_NAME}

    “sites” and “zurb” are keywords recognize by Foundation. https://foundation.zurb.com/sites/docs/starter-projects.html

    Template “zurb” is pulled from: https://github.com/zurb/foundation-zurb-template and described in this video.

    Alternately, specify basic.

  13. If you are prompted, manually type it in, then press Enter. For example:

    ? What's the project called? (no spaces) website1

  14. If the framework and template parameters were not specified, you would need to manually click the keyboard cursor to select:

    ? Which template would you like to use? ZURB Template: includes Handlebars templates and Sass/JS compilers
 
         .
        /|     ,
   , /|/  \/| /|       Thanks for using ZURB Foundation for Sites!
  /|/       |/ |       -------------------------------------------
 |___|            |___|   Let's set up a new project.
 \___|  ^^   ^^   |___/   It shouldn't take more than a minute.
  | -[O]--[O]- |
  |    ___,    |
  |    ...     |
   \__________/
 
Downloading the project template...
Done downloading!

  15. Wait for the website base to be generated, culminating in:

    You're all set!
 
 ✓ New project folder created.
 ✓ Node modules installed.
 ✓ Bower components installed.
 
Now run foundation watch while inside the folder created.

    What are the files?

  16. Open in an text editor that shows the folders of the name specified:

    atom website1

    Among the 861.6 MB created:

    • .babelrc defines Babel for ES6 JavaScript
    • .bowerrc defines Bower modules
    • .DS_Store is created by MacOS to be ignored
    • .gitignore is for GitHub
    • config.yml
    • gulpfile.babel.js is used by the Gulp task running when npm start is run
    • package.json is for NPM to know what dependencies to download
    • readme.md is for people to read.

    Download dependencies

  17. Install dependencies to the node_modules folder based on specifications in the package.json:

    npm install

    The response at time of writing:

    npm notice created a lockfile as package-lock.json. You should commit this file.
up to date in 11.122s

    PROTIP: From here on you can work in a cave with no internet. But only edit what’s under the src folder to make it your own. Since folder dist is generated, its contents should not be edited.

  18. Start a web server (after it runs Gulp task runner):

    npm start 

    [Browsersync] Access URLs:
 ----------------------------------
    Local: http://localhost:8000
 External: http://10.0.0.4:8000
 ----------------------------------
       UI: http://localhost:3001
 UI External: http://10.0.0.4:3001
 ----------------------------------
[Browsersync] Serving files from: dist

    Watch

    PROTIP: The Browsersync UI at port 3001 is for configuring detection of file changes for auto-refresh of the browser.

  19. Open another Terminal to the folder (in a different color) and cd to your working folder.

    The script automatically establish a watch on the pwd to watch for changes to files and invoke Gulp as part of npm start, so there is no need to:

    foundation watch

    Open localhost

  20. Open the default internet browser to “Welcome” page generated:

    open http://localhost:8000

    Internally the default index.html is displayed.

  21. For documentation about formatting HTML and CSS (with videos), see https://foundation.zurb.com/sites/docs

    UI Themes

  22. In a browser, sign-up to receive UI templates by providing your email at https://foundation.zurb.com/templates.html

  23. In your email client, open the email with subject “Download Your Foundation 6 Templates” and click “Download Templates” - the all-f6-templates.zip to your Downloads folder.

  24. In Finder, double-click on the zip file to expand it.

  25. Open the demo page for each

    Within these html files are placeholder assets:

    • CSS stylesheetes are from … cloudfront.net/cdn/sites/foundation.min.css
    • images are obtained from http://placehold.it/750x350
    • links go nowhere

    PROTIP: Create a GitHub repo containing your customized starter set.

    Replace index.html

  26. To use a particular demo template, open a Terminal window to the demo file:

    cd ~/Downloads/all-f6-templates

  27. Copy the file into your website1 folder such that it substitute the index.html. For example:

    cp blog.html ~/gits/hotwilson/website1/src/pages

  28. Navigate to the website source folder:

    cd ~/gits/hotwilson/website1

  29. Move (backup) the existing index.html to another name:

    mv index.html generated.index.html

  30. Rename the template:

    mv blog.html index.html

  31. The watch should referesh the browser automatically showing the new page.

  32. You can still see the original generated page:

    http://localhost:8001/generated.index.html

    TODO: Fuller sample

    For a fuller sample site with images, we overlay files from GitHub which contains the same structure as Foundation’s sample site.

  33. You can still see the original generated page:

    git clone https://github.com/hotwilson/bthosting.com

    This site was forked from Brad Traversy’s sample website on GitHub, which he explains in a video.

    Foundation folder structure

  34. Open the website directory with a text editor that displays folders:

    atom bthosting.com

    The repo’s files and empty folders:

    dist # generated by Gulp

    etc # empty

    node_modules. # filled by npm install referencing package.json.

    • src/assets/img
    • src/assets/js/app.js
    • src/assets/js/lib/foundation-explicit-pieces.js #
    • src/assets/scss/_settings.scss # CSS source for the custom app to be compiled
    • src/assets/scss/_custom.scss # added for app.
    • src/assets/scss/app.scss # defines variables for CSS
    • src/assets/scss/components/.gitkeep # Git can’t stand empty folders
    • src/data # empty
    • src/partials/.gitkeep #
    • src/layouts/default.html # the base where other html are inserted.

      etc #empty



    The repo adds the font-awesome SVG icons:

    • src/fonts/font-awesome

  35. Repeat install of Node.js dependencies to the node_modules folder based on specifications in the package.json:

    npm install

    npm start

    Other UI templates

    Consider using other templates:

    Foundation Framer

    v6 Themes created using $99 Foundation Framer for code-free CSS and Google web fonts. From CoffeeCup.com, which also sells a Web Form Builder and other tools for UX pros.

    $99.95 RapidWeaver created a Foundation theme which adds Font Awesome icons and Animate.css to work with Joe Workman’s Stacks plugin that add CMS, SEO, e-commerce, and other functionality.

    Testing

    https://github.com/zurb/foundation-sites notes that Foundation has three kinds of tests: JavaScript, Sass, and visual regression.

    https://github.com/zurb/foundation-sites/wiki/Testing-Guide

    These commands will run the various tests:

    npm run test:sass
npm run test:javascript:phantomjs
npm run test:visual

Up to GitHub

### .gitignore file

Entries in the .gitignore file keeps the node_modules and dist folders from being uploaded to GitHub.

  1. Edit the .gitignore file:

    .DS_Store
node_modules
npm-debug.log
bower_components
dist
\*.swp

  2. Add the .gitignore file:

  3. Get the site up to GitHub:

    git init && git add . && git commit -m”Initial”

    PROTIP: Upload to GitHub as well to avoid going through the above again.

Build for Production

  1. Create compressed, production-ready assets, run

    npm run build

    The response:

    > foundation-zurb-template@1.0.0 build /Users/hotwilson/gits/hotwilson/foundation/website1
> gulp build --production
 
[12:38:46] Requiring external module babel-register
[12:38:52] Using gulpfile ~/gits/hotwilson/foundation/website1/gulpfile.babel.js
[12:38:52] Starting 'build'...
[12:38:52] Starting 'clean'...
[12:38:52] Finished 'clean' after 5.3 ms
[12:38:52] Starting 'pages'...
[12:38:52] Starting 'sass'...
[12:38:52] Starting 'javascript'...
[12:38:52] Starting 'images'...
[12:38:52] Starting 'copy'...
[12:38:53] gulp-imagemin: Minified 0 images
[12:38:53] Finished 'images' after 1.49 s
[12:38:53] Finished 'pages' after 1.59 s
[12:38:53] Finished 'copy' after 1.59 s
[12:38:56] Finished 'sass' after 4.19 s
[12:38:59] Version: webpack 2.7.0
 Asset    Size  Chunks                    Chunk Names
app.js  678 kB       0  [emitted]  [big]  app
[12:38:59] Finished 'javascript' after 7.71 s
[12:38:59] Starting 'styleGuide'...
[12:38:59] Finished 'styleGuide' after 32 ms
[12:38:59] Finished 'build' after 7.75 s

    Upload

    VIDEO: Deploying Your Site to GitHub

  2. Send your changes to GitHub:

    git add . && git commit -m”update” && git push

Learning resources

So if you aspire to be a world-class pro, get on the long path to earn a certification class/test for $500.

Skills development include their $99 design sketching class.

Videos on Zurb’s YouTube channel

Zurb’s $299 Foundation intro class

Brad raversy’s (traversymedia.com) Foundation Framework Crash Course

Flexbox for XY Grid

https://zurb.com/university/lessons/learn-the-flexbox-based-powerhouse-xy-grid

Tuts+ has a course

Building Websites with Foundation 6 (for sites) [1:42] 23 May 2017 by Gary Simon (garysimon.com) shows use of Node v6.10.0.

Foundation website generation on MacOS was published on .