Styles ‘n Scripts Extension

The Styles ‘n Scripts extension was an extension requested by John Long as a means of separating javascripts & stylesheets from other site content stored in pages.

CONTENTS

In this README you’ll find:

1. Usage
2. Why Change Things?
3. Installation
4. To Do

USAGE

Using this extension is rather painless. If you can use the rest of Radiant, using these additions should feel obvious. There are a couple of things to take note of, however.

* The CSS and JS tabs are where you create, edit, and delete stylesheets and
  javascripts.  But you need Administrator or Developer permissions to see
  these tabs.

* If you want to reference or otherwise use your script or stylesheet in one
  of your pages, there are <r:stylesheet> and <r:javascript> tags.  These tags
  can be used to inject your CSS or JS code into the page or just render a
  link to the file itself. (Click the 'available tags' link when editing your
  Page to learn more about these two tags and their options).

* If you really want to get fancy with your CSS and JS files, you can also use
  the corresponding <r:stylesheet> or <r:javascript> to reference other files
  of the same type.  So now you can create a single CSS or JS file that is
  made up of sub-files to cut down on server requests and speed up page load
  time -- viola, now Radiant offers asset packaging just like Rails! (And the
  caching mechanism is smart enough to keep track of your file's dependencies)

* There are 5 settings that can be changed via Rake "config" task (see
  Rake radiant:extensions:sns:config --help for usage):
    - stylesheet_directory
    - javascript_directory
    - stylesheet_mime_type
    - javascript_mime_type
    - cache_timeout

That’s it. Everything else is either too obvious to bother with here or automagical and/or too top secret to disclose ;-).

WHY CHANGE THINGS?

As John sees it, the pages tab is for storing your main content. (Think of the tree view as the list of available destinations for your users. Sure, they need stylesheets and javascripts, but those are supporting files – much like images – that augment your pages).

There are a number of interesting benefits gained by this approach:

* CSS and JS files now get designer-level permissions -- not user-level.

* This properly separates the concerns of Pages and Text Assets. (I mean, do 
  javascripts really need a layout or stylesheets a breadcrumb?).  Easier to 
  understand for the user and easier to develop for.

* Allows extensions to better interact with pages.  For example, a search
  extension can now safely parse all the pages without search terms like:
  "background" returning all your stylesheets.

* Declutter the pages tree view so that it only shows what your clients care
  about -- the things they'd aim their browser at (see John's point above).

* This opens the door for validation, minification and obfuscation of scripts
  and stylesheets (I'm thinking that these features belong in their own
  extension(s) but they're *much* easier to build now that CSS and JS distinct
  objects).

INSTALLATION

  1. Copy this extension into your existing Radiant project (place it at:

    [your project location]/vendor/extensions/sns
    
  2. Incorporate the database migrations into your existing database using:

    rake db:migrate:extensions
    

    Or, if you prefer to be more specific to this extension:

    rake radiant:extensions:styles_n_scripts:migrate
    
  3. Copy the needed images into Radiant’s /public/images directory using:

    rake radiant:extensions:styles_n_scripts:update
    
  4. (Optional) Configure your stylesheet and javascript directories. By default The Styles ‘n Scripts serves your stylesheets and javascripts out of the /css and /js folders respectively. You can change these locations via the “config” rake task:

    rake radiant:extensions:styles_n_scripts:config
    
  5. (Optional) Configure your stylesheet and javascript content (MIME) types. Again, you use the Rake “config” task.

  6. (Optional) Set a different location for the cache directory. This is set in The styles_n_scripts_extension.rb file using TEXT_ASSET_CACHE_DIR

TO-DO

Add a mechanism to eliminate (or at least reduce) the possibility of circular references with <r:stylesheet> or <r:javascript> tags.

Do we want to allow multiple file uploads?