149 lines
6.4 KiB
Ruby
149 lines
6.4 KiB
Ruby
|
#!/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!
|