fashionista
Advanced tools
Readme
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');
fashionista().decorate(app);
And in your html code (note: fashionista requires either jQuery or Zepto's $ to work):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/fashionista"></script>
</head>
<body>
<h1>your content ... </h1>
</body>
</html>
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');
fashionista([require('myTheme'), require('yourTheme')]).decorate(app);
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 fashionista's client support using javascript:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/fashionista"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.myTheme').click(function() {
fashionista.use('myTheme');
});
$('.yourTheme').click(function() {
fashionista.use('yourTheme');
});
$('.nextTheme').click(function() {
fashionista.next(); // this will switch to the next theme using Round-robin style
});
});
</script>
</head>
<body>
<h1>your content ... </h1>
<button class='myTheme'>Apply myTheme</button>
<button class='yourTheme'>Apply yourTheme</button>
<button class='nextTheme'>Apply next theme</button>
</body>
</html>
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:
<script type="text/javascript" src="/fashionista"></script>
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 script
var express = require('express');
var app = express();
var fashionista = require('fashionista');
fashionista({
themes: [require('myTheme'), require('yourTheme')],
path: '/themes'
}).decorate(app);
Now your myTheme will be mounted at /themes/myTheme/myTheme.css after your integrate fashionista in html like so:
<script type="text/javascript" src="/themes"></script>
If you like to make your code look less clunky, the following code is equivalent to the above:
// in your express.js script
var express = require('express');
var app = express();
var Fashionista = require('fashionista');
var fashionista = new Fashionista({
themes: [require('myTheme'), require('yourTheme')],
path: '/themes'
});
fashionista.decorate(app);
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)
<script type="text/javascript" src="/fashionista"></script>
<script type="text/javascript" src="/js/hpui-jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/fashionista/fashionista.js"></script><!-- noted the url difference -->
<script type="text/javascript">
var fashionista;
$.getJSON('/fashionista/themes', function(data) {
fashionista = new Fashionista(data.themes, {names: data.names});
fashionista.next();
});
$('.myTheme').click(function() {
fashionista.use('myTheme');
});
$('.nextTheme').click(function() {
fashionista.next();
});
</script>
fashionista-compatible customized Foundation themefashionista 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 fashionista.
It would be much easier if you use generator-foundation to generate your custome theme module project.
Copyright (c) 2013 Brian Lai Licensed under the MIT license.
v0.3.3 UMD browser script, allows custom work flow. updated readmev0.1.1 also load foundation scripts automaticallyFAQs
Apply themes to connect/express apps using the Stylus port of Zurb Foundation themes
The npm package fashionista receives a total of 21 weekly downloads. As such, fashionista popularity was classified as not popular.
We found that fashionista demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.