sIFR Plugin

This is the sIFR 3 (Scalable Inman Flash Replacement) plugin for inserting rich accessible typography in you web pages.

Note that sIFR 3 is still in beta.

Check http://dev.novemberborn.net/sifr3/beta/demo/ to see what is possible using sIFR 3.

Installation

To install the sIFR plugin type this command in your project's root folder: 

grails install-plugin /path/to/grails-Sifr-0.1.zip
Now start your application using run-app. The first time you do this static resources from the plugin are copied to /webapp/plugins/Sifr-0.1 in your project's root folder. These resources are:
  • sIFR-print.css
  • sIFR-screen.css
  • sifr-config.js
  • sifr-debug.js
  • sifr.js
As a sIFR user these files should ring a bell as they are responsible for creating those lovely typografy.

Getting Started

To replace the normal h1, h2, h3 etc. with text from the Flash movies, the mentioned resources above need to be linked in the <head> of your pages. This can be done by adding the <g:sifrHead> tag in the main.gsp of your project: 

<html>
 <head>
  <title><g:layoutTitle default="Grails" /></title>
  <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'main.css')}"></link>
  <g:sifrHead />
  <g:layoutHead />
  <g:javascript library="application" />    
 </head>
 ..
By default the sIFR-debug.js is not included, but if you need it just use: 
  <g:sifrHead debug="true" />
Now start your app with run-app. All static resources (css and js files) will be copied from the plugin to you web-app. &nbsp;

Important: Just one thing needs to be done now to make it work. Open /web-app/plugins/Sifr-0.1/js/sifr-config.js and replace WEB_APP with the name of your project. If someone knows how I can do this dynamically please let me know.

If you&nbsp;open your application within a browser you will notice the effect immediately. All <h1> elements are replaced with a nice looking Rockwell font!

Note that&nbsp;when you&nbsp;open your application&nbsp;you will&nbsp;notice that the <h1> on the 'Welcome to Grails' page is not replaced. This is because this page is not decorated by the main layout where we added the <g:sifrHead />. Go to a scaffolded page and see that the <h1> elements are replaced here.

Next Steps

After installing the plugin and enabling sIFR using <g:sifrHead /> only <h1> elements will be replaced by the default included Rockwell font.

Presumably you will have your own Flash files with your custom fonts you want to use:

  1. +Add your custom Flash file(s) (*.swf) to your project's /web-app/plugins/Sifr-0.1/swf folder+
  2. +Activate and replace needed&nbsp;CSS selectors with&nbsp;your custom font(s) in /web-app/plugins/Sifr-0.1/js/sifr-config.js+ - By default the Rockwell font is activated and the <h1> element is replaced. Activate your custom fonts and replace the elements you want. Additionaly you also set some othe sIFR configuration in this file.
  3. +Add the sIFR-active CSS to&nbsp;/web-app/plugins/Sifr-0.1/css/sIFR-screen.css+ - By default only CSS is defined for the <h1> element. Add additional CSS here.

Important Note&nbsp;

This plugin is based on sIFR 3 revision 225 (Feb 20,&nbsp;2007).&nbsp;This development build is used as it's much more&nbsp;stable then&nbsp;the beta 1 release (Dec 17, 2006).&nbsp;If you want to&nbsp;use a more recent version&nbsp;you always download it from http://dev.novemberborn.net/sifr3/nightlies/ replace the static resources mentioned in the Installation paragraph. Remember to backup changes in sIFR-screen.css and sifr-config.js.

Download

Plugin author: Marcel Overdijk (marceloverdijk at gmail.com)

External Resources


&nbsp;

No Comments Yet

Post a Comment