Hello, World.

This is a long-term project to build something as cool as big.dk or famo.us. I don’t know much, but I’ll teach you what I learn as we go along. After years of masochistic Wordpress abuse I’ve decided to try new frameworks/methods. This is styled with Sass stylesheets, written using the Liquid templating language initially developed by Shopify, and operated with the Foundation.js framework. Sass and Liquid components are compiled using the coolest piece of software called Mixture.

I realize I’m toeing the line of over-optimization / diminishing returns, but so far it doesn’t feel like i’m learning any new frameworks as was the case with every heart-wrenching custom Wordpress. It’s more along the lines of, imagine if your current tools could all of a sudden do what you’ve wanted them to for years!

Why do these things matter?

Sass is programmable css, and now I can never go back to cmd+f’ing through 100 pages of nauseating structure. It’s just CSS with all the abilities you wish it had, save the need to compile with a rails app. Lucky I found a solution for that. Moreover, I’m using an ‘atomic’ stylesheet, split into categorized parts based on dependencies, extra parametric as everything should be.
Liquid is surprisingly awesome - also possible to design modular, extra DRY websites with respect to dependencies, without PHP’s painful syntax. Liquid utilizes modern technology to do a lot of “why not” timesavers, e.g. type the name of a file, and if it’s the only file of that name, anywhere in the folder system, your liquid compiler will fill in the rest for you. awesome because that’s computationally very simple, and all of a sudden I have stopped negotiating out loud with my computer.
I don’t know much about Foundation.js, but many of the cool things I’m going to build here need something akin to an MVC (Model-View-Controller) system. I’ve looked everywhere and found Foundation.js attached to more beautifully designed / clever / simple websites than any other framework. Case in point, slaveryfootprint.org
If you value streamlined, future-proof modularity as well as efficient customizability, I can’t recommend mixture highly enough. It handles all the stupid, not-creative parts of web design, all the barriers to using cool languages like the above. It has automated and simplified literally everything, and I feel like this website is truly my own creation. For instance, this article is written in Markdown - Mixture compiled it to HTML and placed it in the main page according to a very short Liquid tag.

Caveats: Mixture.io is still in development and there are a couple hiccups. If you experienced a slash before your document roots when doing Convert to html to “export your project to static HTML” and all your links are broken, that’s because of this one line relativePaths in your settings file. As far as I can tell, the program utilizes great communication to keep the user aware of what it’s doing and how it works, and the documentation has done its job most of the time. Still 5 stars.

Google is your UX best friend:

Fun fact: when using a touch interface, Google maps lets you zoom with one hand. Just double-tap and hold on the second tap, and vertical movement dictates zoom. Lying in bed? Holding a coffee while navigating public transit to work? Hopefully that awkward one-handed two-finger phone swipe will be something to tell our grandkids about.

Let’s talk about how perfectly finicky the Chrome UX team is about their interface elements. Take, for instance, the little url status bar that appears in the lower left corner when you hover a link.

Appears on hover, disappears after. Seems like that should be enough functionality right?

Well, let’s look for edge cases.

If there’s a link underneath it, you shouldn’t have to scroll to get to the link, especially because sometimes you may not be able to. Chrome’s overscroll bounce would allow this in many cases, except those in which the user doesn’t have a contiguous scroll wheel or is navigating by keyboard or touch (more specifically, a touch interface in which multitouch isn’t supported or configured to allow multitouch for overscroll + link.) It was worth it to engineer something special - it drops down below the window if it’s blocking a link you want. Ok, problem solved, right?

Oh wait, there’s a few buttons on DevTools you might want to look at while hovering over a bottom left-hand link. These buttons are important because they display the state of the DevTools panel which is innately visually confusing. Keeping the url status bar inside the chrome frame makes it feel discrete, a separate object than the DevTools frame. In terms of visual design constraints, pay attention to the way rounding is handled:

(Rounding is empirically quite valuable to ux; take a look at any nearby Apple products.)

One last beautiful touch that affects all of these decisions:

If you hover long enough, Chrome understands that you’re interested enough to see the whole url.

That’s an awful lot of work for a stupid box, right? And who even cares? Well, the devil is in the details.

Foundation Documentation
Everything you need to know about using the framework.

Foundation on Github
Latest code, issue reports, feature requests and more.

@foundationzurb
Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).