Get started with Foundation 6

class: center, middle

# Get started with **Foundation 6**

.small[[@CASCADE BOS meetup](http://www.meetup.com/cascadebos/events/225729822/) | Tue., Jan. 26, 2016]

Daigo Fujiwara, .small[Web Developer, HBR, Founder Baseball Hack Day]

@DaigoFuji

---
class: center, middle, white

# CSS Frontend Frameworks **SUCK**.

---
class: center, middle, inverse

# Why?

---
class: middle, white

* Code bloat
* Unnecessary and unused CSS
* Prescribed or Opinionated
* Design for all is impossible

---
class: center, middle, big-img, white 
![img](img/framework.png)

[http://usablica.github.io/front-end-frameworks/compare.html](http://usablica.github.io/front-end-frameworks/compare.html)

---
class: center, middle, inverse

# What's **good** about it?

---
class: middle, white

* Start a quick prototype, or simple site
* Something to build upon
* Crowed-tested cross browser functionality
* Community to ask questions
* Open-sourced, crowd-contributed modern web technology freely available

---
class: center, middle, white

# Hackathon?

---
class: center, middle, white, big-img

![img](img/BBHD-2015-red.png)

**Baseball Hack Day** Fun, friendly, free, one-day, on-site hacking/coding competition for baseball fans, happening in Boston March 19, 2016.

---
class: center, middle, white, big-img

---
class: center, middle, white

### jekyll-foundation-6-starter

[github.com/daigofuji/jekyll-foundation-6-starter](https://github.com/daigofuji/jekyll-foundation-6-starter)

![img](img/my-git-repo.png)

---
class: center, middle, white

## Start [github page](https://pages.github.com/) website powered by [Jekyll](http://jekyllrb.com/docs/quickstart/) using [Foundation/SCSS](http://foundation.zurb.com/sites/docs/installation.html#command-line-tool.html) <br>**in under 5 minutes!**

---
class: center, middle, inverse

# Tools

---
class: center, middle, white

![img](img/github.png)

---
class: center, middle, white

![img](img/terminal.png)

---
class: center, middle, inverse

# Ingredients

---
class: center, middle, white, big-img

![img](img/githubpages.png)
https://pages.github.com/

---
class: center, middle, white, big-img

## [**GitHub Pages**](https://pages.github.com/)

GitHub Pages are public webpages hosted and published through our site.

You can create and publish GitHub Pages online using the Automatic Page Generator. If you prefer to work locally, you can use the GitHub Desktop or the command line.

.small[From https://help.github.com/articles/what-are-github-pages/]

---
class: center, middle, white, big-img

![img](img/jekyll.png)
https://jekyllrb.com/

---
class: center, middle, white, big-img

## [**Jekyll**](https://jekyllrb.com/)

Jekyll is a simple, blog-aware, static site generator. It takes a template directory containing raw text files in various formats, runs it through a converter (like Markdown) and our Liquid renderer, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server.

.small[From http://jekyllrb.com/docs/home/]

Github's doc on [how to use Jekyll on Github Pages](https://help.github.com/articles/using-jekyll-with-pages) is also helpful.

---
class: center, middle, white, big-img

![img](img/foundation.png)
## Zurb Foundation
http://foundation.zurb.com/

---
class: center, middle, white

http://foundation.zurb.com/sites/docs/sass.html

---
class: center, middle, white, big-img
![img](img/foundation6.jpg)

---
class: middle, white, big-img

**What's new in Foundation 6**

.small[- 50% Code Reduction - Half the Size of Foundation 5 
- A11y Friendly - The Base for Fully Accessible Sites 
- Fewer Style Overrides - The Styles You Need. None That You Don't 
- Customizable Sass Grid - Any Combination of Columns You Need 
- Motion UI - Easily Create Animations and Transitions 
- Flexible Navigation patterns - Customizable and Modular Navigation 
- Modular JavaScript Utilities - Create Your Own JS Plugins 
- Tons of new Building Blocks and Templates - A Growing Library of Resources 
- Optional Flexbox Grid - A Slick New Grid]

---
class: center, middle, inverse

# Instructions

---
class: center, middle

## **For User & Organization Pages**
See [github documentation](https://help.github.com/articles/user-organization-and-project-pages/)

You get one site per GitHub account and organization.

https://help.github.com/articles/user-organization-and-project-pages/

---
class: middle, white

1. Fork or copy this repo to your user or project
2. From the `settings` rename the repo to `username.github.io` naming scheme. (For this you need to use `master` branch)

---
class: center, middle, white

##Fire up a browser and go to http://username.github.io

.small[i.e. http://daigofuji.github.io/]

---
class: center middle

## **For Project Pages**
See [github documentation](https://help.github.com/articles/user-organization-and-project-pages/#project-pages)

You get unlimited project sites!

https://help.github.com/articles/user-organization-and-project-pages/#project-pages

---
class: middle, white

1. Create a `gh-pages` branch

`git checkout -b gh-pages`

2. [Download the contents of this repo](https://github.com/daigofuji/jekyll-foundation-6-starter/archive/master.zip)
3. Replace the entire branch contents with unzipped stuff
4. Add, Commit then Publish the branch to github

`git push --set-upstream origin gh-pages`

---
class: center, middle, white

##Fire up a browser and go to http://username.github.io/repository

.small[i.e. http://daigofuji.github.io/jekyll-foundation-6-starter/]

---
class: center, middle, inverse

# Customize

---
class: middle, white

### To edit contents:
1. edit `_config.yml`
2. edit html/md files (`_layouts/default.html` is the base)
3. edit sass and run `gulp` (Try [editing `scss/_stettings.scss`](http://foundation.zurb.com/sites/docs/sass.html))
4. edit `_include/nav.html`

---
class: center, middle, inverse

# Development tools

---
class: center, middle, white, big-img
![img](img/nodejs.png)
https://nodejs.org/en/

---
class: middle, white, big-img

Easiest way to install [node.js](https://nodejs.org/en/) is to use [Homebrew](http://brew.sh/)

`ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`

then

`brew install node`

---
class: center, middle, white, big-img

![img](img/gulp.png)

Install npm and gulp globally by running

`sudo npm install npm gulp -g`

---
class: center, middle, white

Run gulp to compile css from sass by simply run `gulp` from your terminal within your repo.

It will launch watch by default. <code>control-c</code> to stop.

If you only want the css compiled once, run `gulp sass`

---
class: center, middle, white

To run Jekyll locally to test your website while developing*:

`bundle exec jekyll serve --watch`

Your website should be viewable by going to [localhost:4000](http://localhost:4000/)

.small[\* You need ruby. `brew install ruby` and `sudo gem install bundler` then `sudo bundle install`. [Mac OS X 10.11 nokogiri trouble](http://stackoverflow.com/questions/23668684/failed-to-build-gem-native-extension-when-i-run-bundle-install)]

---
class: center, middle, white

##Templates!
![img](img/templates.png)

http://foundation.zurb.com/templates.html

---
class: center, middle, white

## Kitchen Sink
![img](img/kitchen-sink.png)

http://foundation.zurb.com/sites/docs/kitchen-sink.html

---
class: center, middle, white

##Building blocks!
![img](img/building-blocks.png)

http://zurb.com/building-blocks

---
class: middle, center, white, big-img
<img src="img/solved.gif" alt="" width="500">

**Thank you!** <br>https://github.com/daigofuji/jekyll-foundation-6-starter