What is foundation?

Modular CSS

Two approaches to modular css, class base and mixin based

Using Foundation

How it can be used, how we're using it, settings

Why Foundation

Standard, established, tested tool base with an active community

Why Create Themekit?

Why we set up themekit (generally)

What is themekit doing for us?

Drupal specific 'rules' for componentized frontend structure

Themekit's goal

Support componentized workflow with a standard structure

What themekit is trying to do

Not tell you how to build a site, but providing structure for doing so

How themekit uses Foundation

Some technical bits

How these work together, our implementation, setup

Our framework

Mimic foundation's setup for a customized, per project mixin library (brief description, don't go into code/details)

Themekit patterns

Themekit strongly suggest (requires) some frontend and Drupal based design patterns


Drupal class targeting conventions

Theming based on specific drupal wrappers content types/paragraphs

Structural organization of partials

Project framework

Build system

(assets, npm, bower, themekit_assets)

Drupal workflow for adding assets

  • Libraries (problem/solution yaml files and env based assets)
  • Themekit assets module - dev/prod versions of files

npm - asset pipeline

npm - package manager / npm install really quick maybe

node is the base of our asset pipeline

gulp - taskrunner

What's it doing for us (minifying/concat)

How to read a gulpfile (what tasks are available, what are they doing)

bower - package manager

how this factors into our workflow

bower v npm & the future


Sass documentation

Build from commented sass (show comx)

The Future

What we're working on and things we would like to do


What is it? Why do we want to use it?

How does it integrate into what we already have?

NPM based workflow

or maybe yarn...


Write for tomorrow, compile for today. Modules, new JS apis, etc.

JS Frameworks

Easily integrate other frameworks like React, Angular, etc.


Aggressive structure provides:

Maintainable projects

Extendibile projects

Clean, organized, structured projects

Made with