#zurb

Zurb: Froglike, many eyes, midgame creature Reasons provided: “He is green and has a lot of eyes and there is a statue of him. I love him so so much” Creatures extincted: Arclart

Pip: Midgame creature, basically a bird Reasons given: “MY ROUND BIRDS I LIKE THEM SO BAD. i always ally them in creature stage if i see them idk why its like just a thing i do. i love them :]” Creatures extincted: Squinz

Bryan Zmijewski

It all started when ZURB’s founder, Bryan Zmijewski, didn’t feel like his work for charities and nonprofits created enough of an impact. He had the idea to time-box this work into a full twenty-four hours, concentrating everyone’s undivided attention on a project and seeing what was possible. Focused time and attention on a project has inspired some amazing outcomes.

Although they only work on the actual content the day of, ZURB does a lot of planning in advance. First, they must choose a nonprofit from a number of applications. Once they do that, they figure out the organization’s goals, how they can achieve them, and what measurements to use in assessing if they can achieve those goals. The day of the event is packed with caffeine and dedication. Two teams are assembled: one working on print, the other on digital. Both groups work tirelessly and whatever time is left over is used to create additional content.

The ZURBwired team emphasizes inspiring members of the community to get involved. For them, it really comes down to the people. They have realized from previous events that it doesn’t take much time or many resources to make an impact—just focus. The impact is wide-reaching, with many of the nonprofits using the resulting work for years after the event. It even influences the way they think and proceed with other goals and projects. Daniel notes, “When we see how the work is used positively in the community, it changes the impact of the work for us.”

This year’s ZURBwired 24-hour event on August 25th will benefit Life Services Alternatives.

A few of the past ZURBwired events:

Downtown Streets Team

Sacred Heart

Rebuilding Together Peninsula

Family Giving Tree

Rebekah Children’s Service

RAFT

Pie Ranch

ZURB’s website also lists upcoming design-focused events and meet-ups.

ZURB twitter: zurb facebook: zurb

Written by Akadina Yadegar Photography by Daniel Garcia

Amazium has 12 columns also and states that it supports rapid prototyping, resizes itself neatly, has "pre-made" buttons (great for nav) and seems to respect typography and legibility right out of the gate. The best thing about Amazium, pertaining to my hybrid app, is that I can focus on my code for the content, while it is "resizing [your] content using 4 media queries (1200px, 960px, 768px & < 767px)." (Credit)

Foundation is very clean and has a business style approach, with many of their clients from a medium to large size business background. This specific site didn't have docs immediately available on the main page (acting like a walk-thru), but does make it easier to explain how it supports prototyping, uses Intercom platform to chat with website visitors (almost like instant messaging, so you can receive a reply most efficiently and quickly), and allows you to edit what framework components the coder will need.

todo

The JavaScript is now written in ES2015, which means if you consume the js/ folder of the Foundation package as part of a build process, it will need to be transpiled using Babel. There are many ways to use Babel, including plugins for every build system imaginable.

Note that this doesn't change anything about how you write JavaScript. You can use the new ES features if you want, or you can keep writing code how you always have.

Sass

Color Palette

We created a new wrapper around the color variables like $primary-color, $secondary-color, and so on, called $foundation-palette. Adding new colors to this palette allows you to change what CSS classes buttons, callouts, labels, etc. use to change colors.

Flexbox Mode

Users of the flex grid will likely want to switch their project over to flexbox mode, which converts a handful of float- and table-based components to use display: flex instead.

To upgrade to flexbox mode:

In your settings file, add a variable $global-flexbox and set it to true.

In your main Sass file, add @include foundation-flex-classes; below all other Foundation components.

If you're using the current flex grid alignment or source ordering mixins, replace them with the new generic flexbox mixins:

If you're using vertical alignment classes on flex columns, replace those classes with the new generic flexbox classes:

Replace flex-grid-order() with flex-order().

Replace flex-grid-row-align() with flex-align().

Replace flex-grid-column-align() with flex-align-self().