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
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 Icons
Create a button with a Star icon to the left of it
<button><i class="fi-star"></i> Star</button>
Sass & Color
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
Desktop-ize this Layout
Desktop-ize this Layout
Desktop-ize this Layout
Create this layout
Link
If Statements
If | Else Statements
Compress that Code
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
jQuery Filtering
Filter a table of data by its text content
Using a drop down
Using a type input
Make Your Own Modal
Make a modal slide down from the top of the page
Send variable back to the main page
Make your own Sticky Sidebar
Affix a sidebar to the top of the page after it's been scrolled past
With JS
With CSS
Make Your own Tabs
Make Your Own Accordion
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.