CCI Day Info

Firstly, what are your class needs? How much time are your students going to want to present? A half hour? An hour? The whole two hours? Do you want to give your students a sign up sheet in order to choose a time block, or assign the students blocks yourself? These are the next few details to be finalized in order to create a schedule, as it varies class by class.

CCI Day Info

The next piece of information could go two ways. What is needed is a general title describing what (a) either the class is presenting or (b) what individual students/groups are presenting. This will allow for a general map of topics to be created.

Final Presentations

Can be what you present at CCI Day

  • Poster/Powerpoint slides of your project
  • Show benefits of your site over the PDF
  • If possible, try to involve each member of the team

Some Examples of what you could do

  • Show design studio sketches
  • Demo the site on a phone size, over projector
  • Use RWD bookmarklet.

Browse to compass-style.org

Click Reference

"examples" are your friends.

We'll be using Sassmeister

http://sassmeister.com

Click HTML (may need to refresh page after enabling)

Start by Importing Compass

Your first two lines of a sass file should be:

@charset "UTF-8";
@import "compass";

Define all link colors in one line

@include link-colors($normal, $hover, $active, $visited, $focus);

Div with box-sizing border-box

@include box-sizing(border-box);

Custom font (2 font types, ttf, woff)

@include font-face("Name", font-files("name.ttf", "name.woff"));

Buuuuuut....

Compass fonts aren't bulletproof

For "Bullet-Proof" we use Nicole Sullivan's technique

Icon Fonts

You can also use Zurb's Icon fonts

Foundation Icon Fonts 3

Fontello is a viable alternative, it also lets you pick and choose fonts and add your own images as fonts

Foundation Icons

Create a button with a Star icon to the left of it

<button><i class="fi-star"></i> Star</button>

Sass & Color

Interactive demo Sass color functions

Make a div have 50% opacity

@include opacity(50);

Only need this for providing Old IE opacity, if not just use "opacity: .5;"

RGBa Color

Opacity affects HEX colors and whatever they contain

rgba(255, 255, 255, 0.5);

Give a div #bada55 background color with 70% opacity

background: rgba(186, 218, 85, 0.7);???
background: rgba(#bada55, 0.7);

Desktop-ize this Layout

http://cdpn.io/KukcH

Desktop-ize this Layout

http://cdpn.io/IjEHF

Desktop-ize this Layout

http://cdpn.io/kujiz

Desktop-ize this Layout

http://cdpn.io/gqjKr

Create this layout

Link

http://cdpn.io/gqjKr

If Statements

http://cdpn.io/rLAih

If | Else Statements

http://cdpn.io/imcwd

Compress that Code

http://skalman.github.io/UglifyJS-online/

Make an Image Sprite so quick, yo.

https://github.com/esteinborn/compass-sprites

http://bit.ly/inf-sprite-icons - Download this icon pack

Download this, open in Prepros

Place icons into /images/my-icons/*.png

Load FastClick

FastClick.attach(document.body);

Load Fast Click only after load

if (Element.prototype.addEventListener) {
  window.addEventListener('load', function() {
    FastClick.attach(document.body);
  }, false);
}

Embed this YouTube Video

https://www.youtube.com/watch?v=2GWPOPSXGYI

jQuery Filtering

http://cdpn.io/synix

Filter a table of data by its text content

Using a drop down

Using a type input

Make Your Own Modal

http://cdpn.io/HDuev

Make a modal slide down from the top of the page

Send variable back to the main page

Make your own Sticky Sidebar

http://cdpn.io/hcqdg

Affix a sidebar to the top of the page after it's been scrolled past

With JS

With CSS

Make Your own Tabs

http://cdpn.io/fceGr

Make Your Own Accordion

http://cdpn.io/AcyLr

Jekyll

  • A static site generator
  • Create a template
  • Create a page, apply that template
  • Create reusable bits to pull into pages/templates

Jekyll Structure

├── _config.yml

_config.yml

This stores all the configuration for Jekyll.

GH Pages is limited to a certain set of attributes in the file

_config.yml

Default

name: Site Name
markdown: redcarpet
pygments: false
# change baseurl to:
# '': for root level domains ie: mycustomdomain.com
# '/projectname': for subdomains ie: user.github.io/projectname
baseurl: '/projectname'
permalink: :title.html

Jekyll Structure

Layouts Folder

├── _layouts
  ├── default.html
  └── post.html

Jekyll Templates

Base Setup _layouts folder -> default.html

<!doctype html>
<html lang="en">
<body>
  {{ content }}
</body>
</html>

{{ content }}

It's where the magic happens

It's your page content

└── index.html

How to use a template

---
layout: default
title: Page Title
---
<div class="foreground page">
  <h2>Page Content</h2>
</div>

When Built:

<!doctype html>
<html lang="en">
<body>
  <div class="foreground page">
    <h2>Page Content</h2>
  </div>
</body>
</html>

Incemplates

_layouts/secondary.html

---
layout: default
title: Page Title
---
<div class="secondary">
  {{ content }}
</div>

Let's talk links

You want to link your header image to your site root

<a href="/">My Site Root</a>

nope...

Let's talk links

You'll need to use a template link code

<a href="{{ site.baseurl }}">My Site Root</a>

Regular linking works fine if

index.html & aboutus.html

<a href="index.html">My Site Root</a>>
<a href="aboutus.html">About Us</a>>

Two templates but same nav & footer?

Use _includes !!

├── _includes
  ├── navigation.html
  └── footer.html

<!doctype html>
<html lang="en">
<body class="one">
    {% include navigation.html %}
    {{ content }}
    {% include footer.html %}
</body>
</html>
<!doctype html>
<html lang="en">
<body class="two">
    {% include navigation.html %}
    {{ content }}
    {% include footer.html %}
</body>
</html>

One last thing...

---
layout: default
title: Page Title
---

that's not all you can use

Custom Template attributes

---
layout: default
title: Page Title
vendorScripts: ['script1.js', 'script2.js']
customScripts: ['easy-tap.js']
customStyles: ['easy-tap.css']
---

Iterate over them

{% for styles in page.customStyles %}
  <link rel="stylesheet" href="css/{{ styles }}.css">
{% endfor %}
{% for scripts in page.vendorScripts %}
  <script src="js/{{ styles }}">
{% endfor %}

All Together Now

├── _config.yml
├── _includes
|   ├── footer.html
|   └── navigation.html
├── _layouts
|   ├── default.html
|   └── secondary.html
├── aboutus.html
└── index.html

Pushing it to GitHub

Github will build the pages for you automatically

Your gh-pages branch will not show you your output code.

Look through your site find the following

  1. What can be used as an _include?
  2. What can be used as a _layout?
  3. What will your page contents be?
  4. How many layouts will you need?

In your Teams

  1. Create one master template
  2. Create any sub templates you may want
  3. Convert as much reusable content to includes

Activity Question

Topics

  1. Analytcs - http://mashable.com/2011/05/23/how-to-use-google-analytics/
  2. Image optim/ 8 bit alpha png
  3. Image Sprite http://github.com/esteinborn/compass-sprites/
  4. Asset Concat
  5. Asset Minification
  6. NPM
  7. Grunt - http://css-tricks.com/video-screencasts/130-first-moments-grunt/ - http://24ways.org/2013/grunt-is-not-weird-and-hard/
  8. Linting - http://www.jshint.com/about/
  9. HTTP request optimization
  10. Before vs After
  11. JS Perf
  12. optimization - http://www.hongkiat.com/blog/ultimate-guide-to-web-optimization-tips-best-practices/
  13. mockup to html
    14. attr() hasclass() ajax() custom event types http://gist.github.com/esteinborn/9398782 sending data to click and .on methods - Vanilla JS - Data JSON, YAML - SASS Functions - CSS Animations API's gmaps CMSs? Local storage Cookies geolocation matchmedia
  14. html 5 video/audio http://www.videojs.com/ http://youtube.com http://vimeo.com
    15. print stylesheets - http://designshack.net/articles/css/6-thinks-i-learned-about-print-stylesheets-from-html5-boilerplate/

Next Time on...

INF 362!

Thing that comes next

For Next Class

Unit 5 Preview

For Next Unit

Topic