Apply themes to connect/express apps using the Stylus port of Zurb Foundation themes
Apply customized themes to connect/express apps, based on the Stylus port of Zurb Foundation theme
fashionista comes with
Foundation v4 loaded. To decorating your express app with Foundation. In your express app, add the following code:
var express = require'express';var app = express;var fashionista = require'fashionista';fashionistadecorateapp;
And in your html code (note:
fashionista requires either jQuery or Zepto's
$ to work):
your content ...
Of course, you don't want to stop here.
fashionista allows you to load more than one theme at a time. Here's how:
var express = require'express';var app = express;var fashionista = require'fashionista';fashionistarequire'myTheme' require'yourTheme'decorateapp;
When you have one or more themes loaded, the default
foundation theme will be appended at the end of the list (if you manually included
foundation in the list, the duplicated copy will not be appended). In any case (including when there is only
foundation theme is loaded), the first in the list will be applied to your app. But you can easily switch the theme using what's
your content ...Apply myThemeApply yourThemeApply next theme
In the above code, clicking each button will apply the named theme respectively.
As we see, integrating
fashionista on html side is simply inserting the following line anywhere after your jQuery or Zepto:
In fact, all themes managed by
fashionista (and any assets being consumed by these themes) will all be loaded under the root
/fashionista. For example, the
myTheme in the previous example is mounted at
/fashionista/myTheme/myTheme.css. If, for any reason, you dislike
fashionista to be part of your path, you can change it like so:
// in your express.js scriptvar express = require'express';var app = express;var fashionista = require'fashionista';fashionistathemes: require'myTheme' require'yourTheme'path: '/themes'decorateapp;
myTheme will be mounted at
/themes/myTheme/myTheme.css after your integrate
fashionista in html like so:
If you like to make your code look less clunky, the following code is equivalent to the above:
// in your express.js scriptvar express = require'express';var app = express;var Fashionista = require'fashionista';var fashionista =themes: require'myTheme' require'yourTheme'path: '/themes';fashionistadecorateapp;
While the following line kinda does everything for you in one shot, there are times when you want to have a little more control over your application work flow (e.g. when to load the themes, etc)
<!-- noted the url difference -->
fashionista only serve the Stylus port of Foundation for now. With that in mind, your theme module should already be exporting a
plugin function much like this one. All variables being exported in the stylus port of foundation.js is required for any custom theme that is intended to work with
It would be much easier if you use generator-foundation to generate your custome theme module project.
- https://github.com/blai/foundation-theme-patience - a very simple custom foundation theme
Copyright (c) 2013 Brian Lai Licensed under the MIT license.
v0.3.3UMD browser script, allows custom work flow. updated readme
v0.1.1also load foundation scripts automatically