Rapid web development

Unit 7, Week 8

Compass, Zurb Foundation

Homework Clean up

Survey

Login to https://mycampus.artinstitutes.edu/portal/server.pt?, click the thingy.

And/or:

Jerbs


Everyone on http://groups.drupal.org/portland is looking for drupal devs

Two Drupal freelance jobs available:
  1. A non profit historical society
  2. A startup chemical testing lab

See me if interested

Homework review


Did you produce more or less CSS than you would have by hand?

What SCSS tricks did you discover on your own?

How OO was your SCSS?

Add it to your toolchain:

http://codepen.io/pen/,
http://sassmeister.com


HTML/SASS/Compass/JS editing right in the browser.

Compass - Mixins

Box shadow insanity greatly improved.

Update curriculum repo

Pull my changes to your local wdim351-curriculum repo

cd /directory/to/wdim351-curriculum
git status
git add -A .
git commit -m "committing local changes"
# run the following only if you have not set your upstream to my repo
git remote add upstream "git@github.com:aipdx-wdim351/wdim351-curriculum.git"
git pull upstream master

Compass - Sprites

The mother of all reasons to use Compass.

  1. Fill a folder with sprite/icon png files
  2. Declare a "sprite mixin" to Compass
  3. Refer to individual sprites by name through your style

Generates a full, combined sprite sheet. Writes CSS that refers to the exact position (background x-y) of the sprite. Includes height/width of sprite as wel..


Pull upstream wdim351-curriculum to follow along. Sprites courtesy of http://simpleicons.org/.

Compass - Sprites

config.rb:
relative_assets = config

Lots of "syntactic sugar". Based on folder name inside "images" folder:

<project>
 - images
 - - oursprites
 - - - sprite1.png
 - - - sprite2.png
 - - - sprite3.png

Activated by:

@import "oursprites/*.png";

compass - Sprites

Usage:
// SCSS
a[href*="facebook"]{
  @include oursprites-sprite("facebook-64");
  background-color: #3B5998;
}
// CSS
a[href*="facebook"] {
  background-position: 0 -768px;
  height: 64px;
  width: 64px;
  background-color: #3B5998;
}
a[href*="facebook"]:hover, a[href*="facebook"].facebook-64_hover, a[href*="facebook"].facebook-64-hover {
  background-position: 0 -320px;
}

Hover?!

Compass - sprites

"Query" your images to get width/height:

// SCSS
.sprite-dimensions{
  width: oursprites-sprite-width("facebook-64");
  height: oursprites-sprite-height("facebook-64");
  background: grey;
}

"New" hide text function:

// SCSS
@include hide-text();
// CSS
text-indent: -119988px;
overflow: hidden;
text-align: left;

Tools Needed from here on:

  1. git
  2. node.js
    1. [sudo] npm install -g bower grunt-cli
  3. ruby
    1. gem install foundation

Zurb Foundation

Compass gives us standardized ways to build individual CSS design patterns. Foundation uses Sass/Bower to give us standardized ways to build entire sites.


Install Foundation
[sudo] gem install foundation

Start a new Foundation project:

foundation new foundation-inclass

Foundation Goodies

Foundation File structure

You can see all Foundation sass files at:
<project>/bower_components/foundation/scss/foundation


BOWER?

Package management. Every project is a collection of other projects. Don't bloat your code by including all those other projects wholesale. Instead, include a file that simply points at other projects to be included when starting.

Files we modify

We get TWO SASS files: app.scss and _settings.scss.

  1. _settings.scss: 
    1. let's us set dozens of color, width, font, preferences settings for Foundation
  2. app.css: 
    1. imports our settings, let's us choose what goodies from Foundation to leave out.

compass watch *or* grunt  within config.rb directory

The grid


Responsive baked in. Do it the "Foundation Way" and don't stress about it.

Columns add up to twelve.
<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>

Elements

  1. Buttons
  2. Forms
  3. Navigation
  4. Tabs
  5. Elements

Check your vars in _settings.scss!

Javascripts

Self explanatory, lots of goodies:

Homework

Redo your clickable wireframes in Foundation. Features your wireframes will have:
  1. Responsive grid
  2. Dummy text using real typography (ie typography classes)
  3. At least three of the Foundation components (buttons, forms, tabs, etc)
  4. One of the javascripts
AND
ONE early stage design comp'd to the grid your wireframes are built to
Split up the work in your group. Use your strengths.

Designers:

Inspiration:
  1. http://foundation.zurb.com/learn/website-examples.html

Tools:

  1. Stencils: http://www.zurb.com/playground/foundation-stencil-sets

wdim351_week07

By Christopher Bloom

Made with Slides.com

wdim351_week07

  • 2,881

More from Christopher Bloom