Module: Sinatra::CSS

Defined in:
lib/sinatra/css.rb

Overview

Sinatra::CSS

A Sinatra Extension that makes working with CSS easy.

Installation

#  Add RubyGems.org (former Gemcutter) to your RubyGems sources 
$  gem sources -a http://rubygems.org

$  (sudo)? gem install sinatra-css

Dependencies

This Gem depends upon the following:

Runtime:

Optionals:

Development & Tests:

  • sinatra-tests (>= 0.1.6)

  • rspec (>= 1.3.0 )

  • rack-test (>= 0.5.3)

  • rspec_hpricot_matchers (>= 0.1.0)

Getting Started

To start using Sinatra::CSS, just require and register the extension in your App…

require 'sinatra/css'

class YourApp < Sinatra::Base
  register(Sinatra::CSS)

  <snip...>

end

You then get access to 6 useful helper methods:

css()

This method serves two purposes:

a) Return a stylesheet <link> tag with the path given.

css('/css/style.css') # => 

  <link rel="stylesheet" href="/css/style.css" media="screen" type="text/css" charset="utf-8">

css('style.css', :media => :print) # => 

  <link rel="stylesheet" href="/style.css" media="print" type="text/css" charset="utf-8">

b) When passed a block, a <style> tag will be created with the yielded block as its contents.

css do
  "body {
    color: blue;
    }"
end
# => 

  <style type="text/css" media="screen">
    body { color: blue; }
  </style>

css_custom() & css_custom_add()

These two methods works together, like this:

First you add the css_custom() method to your layout(s) (../views/layout.erb):

<html>
  <head>
    <snip...>

    <%= css_custom %>

  </head>

Then in your views, you can use the css_custom_add() method to add custom CSS to the page, like this:

# in ../views/template.erb
<%= css_custom_add( "body{color: red;}" ) => 

# in ../views/shared/sidebar.erb
<%= css_custom_add( "#sidebar { background-color: black; }" ) =>

Which outputs the following in the <head> element of your page.

<html>
  <head>
    <snip...>

    <style type="text/css" media="screen">
      body { color: red; }
      #sidebar { background-color: black; }
      /* ...and more custom CSS */
    </style>

This functionality makes it very easy to add CSS overides or page specific CSS to any page, even from within multiple views.

css_custom_files() & css_custom_add_file()

These two methods also works together in a similar fashion, like this:

First of, add the css_custom_files() method to your layout(s) (../views/layout.erb):

<html>
  <head>
    <snip...>

    <%= css_custom_files %>

  </head>

Then in your views, you can use the css_custom_add_file() method to add a custom CSS file to the page, like this:

<%= css_custom_add_file('home')  #=> 

  <link href="/home.css" rel="stylesheet" media="screen" type="text/css" charset="utf-8" />

The method even accepts an Array consisting of [ filename, media ] like this:

<%= css_custom_add_file( ['/css/print', :print] )  #=> 

  <link href="/css/print.css" rel="stylesheet" media="print" type="text/css" charset="utf-8" />

You can also use the method to embed the styles of a .css file into any part of a page, like this:

# NB! path is starting from APP_ROOT/public/

css_custom_add_file('home.css',:insert_into_html) #=>

  <style type="text/css" media="screen">
    /* the contents of ../public/home.css */
  </style>

You can even give a file system path to embed the styles of a globaly shared .css file outside of your applications path. Providing an easy way to resuse common snippets of code.

# NB! make sure the path and .css file works together as a real path.

# the :path value should always be a directory without the trailing slash.

css_custom_add_file('home.css',:insert_into_html, '/path/2/some/directory') 

  <style type="text/css" media="screen">
    /* the contents of /path/2/some/directory/home.css */ 
  </style>

css_insert_file()

This is a simple convenicence method that takes a path to a CSS file and inserts its content straight into the current view, without any enclosing HTML tags.

The method depends upon the settings of the :css_shared_source_files_dir configuration variable defined inside your application.

By default this is set to 'ENV['HOME']/.alt/css'.

An example of how to use this functionality:

# in your app's routes configurations

get('/css/screen.css') do
  content_type 'text/css'
  erb('css/screen'.to_sym, :layout => false)
end

# in views/css/screen.erb

<%= css_insert_file('blueprint/grid') %>

  # => insert the contents of ENV['HOME']/.alt/css/blueprint/grid.css

You can also load and insert local files, ie files in your app’s public/css/ directory by adding the :local flag to the call.

<%= css_insert_file('colors', :local) %>

# => insert the contents of /path/2/your/app/public/css/colors.css

TODOs

  • Keep it up to date with any changes in Sinatra.

  • Add bundle functionality from Sinatra::Bundles gem.

  • Improve the specs a bit and add missing tests.

  • Any other improvements I or You can think of.

Copyright © 2010 kematzy. See LICENSE for details.

Defined Under Namespace

Modules: Helpers

Constant Summary collapse

VERSION = 
'0.1.5'

Class Method Summary collapse

Instance Method Summary collapse

Class Method Details

.registered(app) ⇒ Object

Registers these Extensions:

  • Sinatra::Tags

  • Sinatra::Basics::Assets

Default Settings:

  • :css_shared_source_files_dir => set the path to the Shared directory with compliled CSS templates. Default is: 'ENV['HOME']/.alt/css'



498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
 
# File 'lib/sinatra/css.rb', line 498

def self.registered(app)
  app.register(Sinatra::Tags)
  app.register(Sinatra::Assets)
  
  app.helpers Sinatra::CSS::Helpers
  
  # set the path to the Shared directory with compliled CSS templates
  app.set :css_shared_source_files_dir, File.join(File.expand_path(ENV['HOME']) ,'.alt', 'css')
  
  
  ## add the extension specific options to those inspectable by :settings_inspect method
  #  provided by the Sinatra::Settings extension
  if app.respond_to?(:sinatra_settings_for_inspection)
    %w( css_shared_source_files_dir ).each do |m|
      app.sinatra_settings_for_inspection << m
    end
  end
  
end

.version ⇒ Object 



269
 
# File 'lib/sinatra/css.rb', line 269

def self.version; "Sinatra::CSS v#{VERSION}"; end

Instance Method Details

#get_all_css_requests(path = '/css', options = {}) ⇒ Object

get_all_css_requests(‘/stylesheets’) => expects a app/views/css dir with the .rcss files

Examples

get_all_css_requests()                => catches 'site.com/css/screen.css
get_all_css_requests('/stylesheets')  => catches 'site.com/stylesheets/screen.css



463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
 
# File 'lib/sinatra/css.rb', line 463

def get_all_css_requests(path='/css', options = {}) 
  path, options = '/css', path if path.is_a?(Hash)
  
  get("#{path}/*.css", {}) do 
    
    begin
      options = { :cache => false, :layout => false }.merge(options)
      
      content_type 'text/css', :charset => 'utf-8'
      if self.settings.environment == :production
        rcss("css/#{params[:splat].first}".to_sym, options ).gsub(/\n\r?$/,"")
      else
        rcss("css/#{params[:splat].first}".to_sym, options )
      end
    rescue Errno::ENOENT
      content_type 'text/html'  # reset the content_type
      pass
    end
  end
end