Prototyping
Design + Content-first approaches to prototyping
Hello
About Us
Kalamuna makes the Internet for for mission-driven organizations driven to tinker, critique, and change the way things are. We specialize in design, strategy, user experience, and development.
Team Kalamuna
(mostly) Oakland
Let’s Start
Why prototype?
Product prototyping: we don’t question it…
manufacturing is expensive.
Can you imagine a world without prototyping?
Sometimes weird is perfect. �Don’t apple the shit out of everything.
Advantages of prototyping websites
Prototyping for the Web
Some prototypes are irresponsivle
Integrated Testing Strategy
Usability testing is a technique used in user-centered interaction design to evaluate a product’s ease of use by testing it with real users.
Watching users try to accomplish tasks on a website is the most effective and efficient way to uncover usability problems.
Paper prototypes… it doesn’t take a million dollars
Characteristics of a Solid Web Prototyping Solution
Characteristics
Styleguides can also be about words
Pattern Libraries /
Component Architectures
Molecule
Organism
Some Drupal-y Components
Layouts & Pages
Advantages of a Component Library
Content Prototyping
Use tools
Content Prototyping Context
Welcome to Kalastatic
a static framework for prototyping�responsive sites, styleguides, �and designing in-browser.
why did we do this?
With Kalastatic we close the gap early between �visual design, �content strategy and �frontend development.
Kalamuna Killed the Themer
Strategy, Design and Code – Together!
Content Prototyping
Markdown
Prismic
Why it Matters?
Playing nice with Drupal
Drupal 7/8 integration
REDESIGN a site with its existing content!
Playing nice with Wordpress
Pinnacle Engines: static site resources shared to Wordpress
TECHNOLOGIES
Technologies
Dependency Management
We use npm for running tasks whenever it saves us from adding additional grunt dependencies.�
Development Tools
Using Grunt allows us to run a local development environment with live reloading, as well as deployment.
Technologies
Front-End Dependencies
Bower downloads all of our frontend libraries:
Technologies
Front-end Framework
Technologies
CSS Pre-Processor
We use node-sass which is a wrapper for LibSass.
LibSass is written in C/C++ and as a result is much faster than RubySass.
This speeds up our workflows and removes any Ruby dependencies from our stack.
Technologies
JavaScript Pre-Processor
Compiling JavaScript for the browser is hard, so we use Browserify.
Browserify lets us require(‘modules’) in the browser, and bundles up all the dependencies.
This speeds up our workflows and even speeds up browser JavaScript performance.
Technologies
Templating
Extremely simple, pluggable, static site generator.�
Takes source files, manipulates them via chainable plugins, and outputs results.
Examples in the wild
Maison BK: bootstrap prototype + e-commerce
Metropolitan Transportation Commission
www.kalamuna.com�
derek@kalamuna.com
mallis@kalamuna.com
rob@kalamuna.com�thiago@kalamuna.com�josh@kalamuna.com
Thank You!
DEMO
This section contains supplemental slides that speak more to the technologies that power kalastatic
Features
Features
Features
CONVENIENCE UTILITIES
HOW is this different than patternlab?
CODE TOUR
Simple Workflow
Easily deploys to Pantheon and/or Github Pages!
{
—
»
»
»
Metalsmith
Metalsmith
{
"plugins": {
"metalsmith-collections-convention": {},
"metalsmith-metadata": {
"config": "config.yaml",
"navigation": "navigation.yaml"
},
"metalsmith-markdown": {},
"metalsmith-include": {},
"metalsmith-permalinks": {
"pattern": ":url",
"relative": false
},
"metalsmith-swig-helpers": {
Metalsmith - collections
A key Metalsmith plugin is metalsmith-collections
Collections are bundles of content that can be iterated through, they can be passed off to partials for rendering and allow for design patterns such as indexes, slideshows, and can allow individual bits of content to be used in multiple contexts.
Not unlike of like custom queries, and views.
Metalsmith
---
pattern: collections/news/*.md
sortBy: order
---
All news articles.
Custom template filters
Swig has straightforward html-yness.
We chose it due to it’s relative similarities to twig, aligning us towards a D8 future.
It also supports partials, and template inheritance out of the box.
We rolled up some custom swig filters to get a bit of extra functionality like email obfuscation, excerpts, and slug matching.
templating example
<section class="page-content">
<h1>{{title}}</h1>
<div class="contents">
{{contents|safe}}
</div>
</section>
<section id="news" class="news teasers">
{% for news in collections.news %}
{% include "./partials/news-teaser.html" with news only %}
{% endfor %}
</section>
PRISMIC
Prismic – a head wearing masks
masks are like content types, but defined in json!
“view” of stories of type news tagged test
---
template: news.html
title: News
pageSlug: news
prismic:
news:
query: '[[:d = at(document.tags,["test"])]]'
---
This is news from [Prismic](https://kalastatic.prismic.io)!
/src/news.md
article “teaser”
<article class="teaser">
<div class="wrapper">
<a href="/article/{{id}}/{{slug}}">{{data.explicittitle.html|safe}}</a>
{{data.shortlede.html|safe}}
</div>
</article>
/templates/partials/news-teaser.html
article “node”
{% extends 'html.html' %}
{% block contents %}
{% for article in prismic.news.results %}
<main role="main">
<article>
{{article.data.title.html|safe}}
<figure class="article-img">
{{article.data.illustration.html|safe}}
</figure>
</div>
{{article.data.content.html|safe}}
</article>
</main>
{% endfor %}
{% endblock %}
/templates/news-article.html
KSS
KSS
�KSS allows us to document our components style and markup, and easily identify/avoid front-end regressions.
KSS Styleguide
KSS
KSS
Contribute
Open Source
github + zenflow