photomix/resources/DummyHTML/css/joshuaclayton-blueprint-css-05312a805eca539ab85e435cfd94bdedfd12ab2e/lib/compress.rb
2009-06-09 21:38:32 +02:00

149 lines
No EOL
6.4 KiB
Ruby
Executable file

#!/usr/bin/env ruby
require File.join(File.dirname(__FILE__), "blueprint", "blueprint")
# **Basic
#
# Calling this file by itself will pull files from blueprint/src and concatenate them into three files; ie.css, print.css, and screen.css.
#
# ruby compress.rb
#
# However, argument variables can be set to change how this works.
#
# Calling
#
# ruby compress.rb -h
#
# will reveal basic arguments you can pass to the compress.rb file.
#
# **Custom Settings
#
# To use custom settings, the file need to be stored in settings.yml within this directory. An example YAML file has been included.
#
# Another ability is to use YAML (spec is at http://www.yaml.org/spec/1.1/) for project settings in a predefined structure and
# store all pertinent information there. The YAML file has multiple keys (usually a named project) with a set of data that defines
# that project. A sample structure can be found in settings.example.yml.
#
# The basic structure is this:
#
# Root nodes are project names. You use these when calling compress.rb as such:
#
# ruby compress.rb -p PROJECTNAME
#
# A sample YAML with only roots and output paths would look like this:
#
# project1:
# path: /path/to/my/project/stylesheets
# project2:
# path: /path/to/different/stylesheets
# project3:
# path: /path/to/another/projects/styles
#
# You can then call
#
# ruby compress.rb -p project1
#
# or
#
# ruby compress.rb -p project3
#
# This would compress and export Blueprints CSS to the respective directory, checking for my-(ie|print|screen).css and
# appending it if present
#
# A more advanced structure would look like this:
#
# project1:
# path: /path/to/my/project/stylesheets
# namespace: custom-namespace-1-
# custom_css:
# ie.css:
# - custom-ie.css
# print.css:
# - docs.css
# - my-print-styles.css
# screen.css:
# - subfolder-of-stylesheets/sub_css.css
# custom_layout:
# column_count: 12
# column_width: 70
# gutter_width: 10
# project2:
# path: /path/to/different/stylesheets
# namespace: different-namespace-
# custom_css:
# screen.css:
# - custom_screen.css
# semantic_classes:
# "#footer, #header": column span-24 last
# "#content": column span-18 border
# "#extra-content": last span-6 column
# "div#navigation": last span-24 column
# "div.section, div.entry, .feeds": span-6 column
# plugins:
# - fancy-type
# - buttons
# - validations
# project3:
# path: /path/to/another/projects/styles
#
# In a structure like this, a lot more assignment is occurring. Custom namespaces are being set for two projects, while
# the third (project3) is just a simple path setting.
#
# Also, custom CSS is being used that is appended at the end of its respective file. So, in project1, print.css will have docs.css
# and my-print-styles.css instead of the default my-print.css. Note that these files are relative to the path that you defined above;
# you can use subdirectories from the default path if you would like.
#
# Another thing to note here is the custom_layout; if not defined, your generated CSS will default to the 24 column, 950px wide grid that
# has been standard with Blueprint for quite some time. However, you can specify a custom grid setup if you would like. The three options
# are column_count (the number of columns you want your grid to have), column width (the width in pixels that you want your columns to be), and
# gutter_width (the width in pixels you want your gutters - space between columns - to be). To use the Blueprint default, do not define this
# in your settings file.
#
# Semantic classes are still in the works within Blueprint, but a simple implementation has been created.
#
# Defining semantic_classes, with nodes underneath, will generate a class for each node which has rules of each class assigned to it. For example,
# in project2 above, for '#footer, #header', elements with id's of footer and header will be assigned all the rules from the
# classes 'span-24, column, and last', while divs with classes either entry or section, as well as any element with class of feed, is
# assigned all the rules from 'span-6 and column'. Although it is a crude way do accomplish this, it keeps the generated CSS separate from the core BP CSS.
#
# Also supported is plugins. The compressor looks within BLUEPRINT_DIR/blueprint/plugins to match against what's passed. If the plugin name
# matches, it will append PLUGIN/(screen|print|ie).css to the corresponding CSS file. It will append the plugin CSS to all three CSS files if
# there is a CSS file present named as the plugin (e.g. the fancy-type plugin with a fancy-type.css file found within the plugin directory)
#
# In Ruby, the structure would look like this:
#
# {
# 'project1' => {
# 'path' => '/path/to/my/project/stylesheets',
# 'namespace' => 'custom-namespace-1-',
# 'custom_css' => {
# 'ie.css' => ['custom-ie.css'],
# 'print.css' => ['docs.css', 'my-print-styles.css'],
# 'screen.css' => ['subfolder-of-stylesheets/sub_css.css']
# },
# 'custom_layout' => {
# 'column_count' => 12,
# 'column_width' => 70,
# 'gutter_width' => 10
# }
# },
# 'project2' => {
# 'path' => '/path/to/different/stylesheets',
# 'namespace' => 'different-namespace-',
# 'custom_css' => {
# 'screen.css' => ['custom_screen.css']
# },
# 'semantic_classes' => {
# '#footer, #header' => 'column span-24 last',
# '#content' => 'column span-18 border',
# '#extra-content' => 'last span-6 column',
# 'div#navigation' => 'last span-24 column',
# 'div.section, div.entry, .feeds' => 'span-6 column'
# },
# 'plugins' => ['fancy-type', 'buttons', 'validations']
# },
# 'project3' => {
# 'path' => '/path/to/another/projects/styles'
# }
# }
Blueprint::Compressor.new.generate!