A static site framework puts in practice atomic web design principles to produce a living styleguide that guides back-end implementations in a framework agnostic approach. As such, it serves as a point of convergence between front-end development, back-end development, and content strategy. At Kalamuna, we've been working on an open source project called kalastatic to rise to this challenge. The framework can co-exist with Drupal themes, Wordpress, or realize stand-alone sites. PROJECT GOALS 1. Designers and front-end developers should soar in their expressivity by focusing on their craft instead of struggling with poorly documented CMS APIs and configurations. 2. Provide tangible assets for clients and agencies to drive design thinking as early as possible in the project lifecycle. 3. Provide a litmus test against style regressions during development. 4. Lower the technological barrier to crafting small sites for agency-style projects and make it fast. more: https://github.com/kalamuna/kalastatic

1. KALASTATIC:
Design+Content-first
approaches to static
prototyping

2. 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.

3. What is Kalastatic?
A static site framework for quickly and
effectively prototyping responsive sites,
developing styleguides,
and designing in-browser.

4. What is Kalastatic?
Its primary purpose is to close the gap
between design, content strategy and
frontend development early in the game.

5. Project Goals
■ Designers and front-end developers should soar in their
expressivity by focusing on their craft instead of struggling with
CMS APIs and configurations.
■ Provide tangible assets for clients and agencies to drive design
thinking as early as possible in the project lifecycle.
■ Help Content Strategy, Visual Design, Architects, and Developers
converge early and often
■ Provide a litmus test against style regressions during development.

6. Features
DEVELOPMENT
■ Easy installation, with minimal dependencies
■ Automated download of Bootstrap and other dependencies
■ Built in webserver
■ Livereload - saving files reloads the browser
■ Remote device access - load your local on a mobile device!

7. Features
DESIGN
■ Produces documented component library
■ Easy creation of extendable template variations
with inheritance
■ Output production ready styles

8. Features
CONVENIENCE UTILITIES
■ cache busting
■ deep linking (url fragments)
■ character limit filters
■ splits CSS files for IE 9 compatibility

9. STYLEGUIDE + PROTOTYPE

10. Styleguide
github.com/kalamuna/kss-boostrap

11. Components

12. QUICK TOUR

13. http://test-kalastatic.at.kalamuna.com

14. TECHNOLOGIES

15. Node.js
NPM
The node package manager, we use it for running tasks whenever
it saves us from adding additional grunt dependencies.
Grunt
Grunt runs the local (node) development server, watch tasks +
livereload, as well as deployment.

16. Bower
We use Bower to manage our frontend libraries:
■ bootstrap
■ jquery
■ holderjs
■ and anything else we might need…

17. Sass
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.
(Not to mention saves us seconds hundreds of
times a day).

18. Metalsmith
www.metalsmith.io
Metalsmith is an extremely simple, pluggable static site
generator built in Node by the folks at Segment.
It takes source files in one directory, manipulates them
via chainable plugins and outputs the results.
It supports a healthy community, and the ecosystem of
plugins is growing at a steady clip.

19. {
"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

20. Metalsmith - collections
www.metalsmith.io
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.

21. ---
pattern: collections/news/*.md
sortBy: order
---
All news articles.
Metalsmith

22. swig + custom swig 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.

23. <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>
swig example

24. KSS
http://warpspire.com/kss/
■ Knyle Style Sheets is a CSS documentation specification
that enables automated generation of ‘living’ style guides.
■ It is not a preprocessor, CSS framework, naming
convention, or specificity guideline.
■ It works with any flavour of CSS—CSS, SCSS, LESS.
■ We use kss-node, by Drupal’s own johnalbin.
KSS allows us to document our components style and
markup, and easily identify/avoid front-end regressions.

25. KSS
http://warpspire.com/kss/

26. KSS
http://warpspire.com/kss/

27. WORKFLOWS

28. github + zenflow

29. github flow
++

30. TESTING

31. ■ Continuous Integration with Travis
■ Automated Build Test
■ Linting (HTML and CSS)
■ Accessibility Report
Tests

32. CODE TOUR

33. Open Source
github.com/kalamuna/kalastatic

34. CONTENT PROVIDERS
Content from Drupal 8, Prismic, etc
Let’s talk Prismic

35. ---
template: news.html
title: News
pageSlug: news
prismic:
news:
query: '[[:d = at(document.tags,["test"])]]'
---
This is news from [Prismic](https://kalastatic.prismic.io)!
“view” of stories of type news tagged test
/src/news.md

36. <article class="teaser">
<div class="wrapper">
<a href="/article/{{id}}/{{slug}}">{{data.explicittitle.html|safe}}</a>
{{data.shortlede.html|safe}}
</div>
</article>
article “teaser”
/templates/partials/news-teaser.html

37. {% 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 %}
article “node”
/templates/news-article.html

38. Prismic – a head wearing masks
masks are like content types,
but defined in json!
■ edit article
■ view content

39. THE FUTURE:
from blueprint to framework/product

40. Decouple all the things
github.com/kalamuna/kalastatic-cli
■ drush-like updating of core
■ support multiple template engines with patterns
■ multiple frameworks, like google material design lite:
http://mdl-blog-kalastatic.at.kalamuna.com !!!
index.html.jade
contact.html.swig
styles.css.scss

41. Examples in the wild

42. www.kalamuna.com

43. Pinnacle Engines

44. Maison BK

45. Metropolitan Transportation Commission

47. Thank You!
www.kalamuna.com
mallis@kalamuna.com
rob@kalamuna.com
thiago@kalamuna.com
josh@kalamuna.com