initial commit

README.txt

@@ -0,0 +1,134 @@
+BUILD A THEME WITH ZEN
+----------------------
+
+The base Zen theme is designed to be easily extended by its sub-themes. You
+shouldn't modify any of the CSS or PHP files in the zen/ folder; but instead you
+should create a sub-theme of zen which is located in a folder outside of the
+root zen/ folder. The examples below assume zen and your sub-theme will be
+installed in sites/all/themes/, but any valid theme directory is acceptable
+(read the sites/default/default.settings.php for more info.)
+
+  Why? To learn why you shouldn't modify any of the files in the zen/ folder,
+  see http://drupal.org/node/245802
+
+
+*** IMPORTANT NOTE ***
+*
+* In Drupal 7, the theme system caches which template files and which theme
+* functions should be called. This means that if you add a new theme,
+* preprocess or process function to your template.php file or add a new template
+* (.tpl.php) file to your sub-theme, you will need to rebuild the "theme
+* registry." See http://drupal.org/node/173880#theme-registry
+*
+* Drupal 7 also stores a cache of the data in .info files. If you modify any
+* lines in your sub-theme's .info file, you MUST refresh Drupal 7's cache by
+* simply visiting the Appearance page at admin/appearance.
+*
+
+
+ 1. Setup the location for your new sub-theme.
+
+    Copy the STARTERKIT folder out of the zen/ folder and rename it to be your
+    new sub-theme. IMPORTANT: The name of your sub-theme must start with an
+    alphabetic character and can only contain lowercase letters, numbers and
+    underscores.
+
+    For example, copy the sites/all/themes/zen/STARTERKIT folder and rename it
+    as sites/all/themes/foo.
+
+      Why? Each theme should reside in its own folder. To make it easier to
+      upgrade Zen, sub-themes should reside in a folder separate from the base
+      theme.
+
+ 2. Setup the basic information for your sub-theme.
+
+    In your new sub-theme folder, rename the STARTERKIT.info.txt file to include
+    the name of your new sub-theme and remove the ".txt" extension. Then edit
+    the .info file by editing the name and description field.
+
+    For example, rename the foo/STARTERKIT.info file to foo/foo.info. Edit the
+    foo.info file and change "name = Zen Sub-theme Starter Kit" to "name = Foo"
+    and "description = Read..." to "description = A Zen sub-theme".
+
+      Why? The .info file describes the basic things about your theme: its
+      name, description, features, template regions, CSS files, and JavaScript
+      files. See the Drupal 7 Theme Guide for more info:
+      http://drupal.org/node/171205
+
+    Then, visit your site's Appearance page at admin/appearance to refresh
+    Drupal 7's cache of .info file data.
+
+ 3. Choose your preferred page layout method or grid system.
+
+    By default your new sub-theme is using a responsive layout. If you want a
+    fixed layout for your theme, delete the unneeded responsive-sidebars and
+    responsive-sidebars-rtl css/sass files and edit your sub-theme's .info file
+    and replace the reference to responsive-sidebars.css with fixed-width.css.
+
+    For example, edit foo/foo.info and change this line:
+      stylesheets[all][]   = css/layouts/responsive-sidebars.css
+    to:
+      stylesheets[all][]   = css/layouts/fixed-width.css
+
+      Why? The "stylesheets" lines in your .info file describe the media type
+      and path to the CSS file you want to include. The format for these lines
+      is:  stylesheets[MEDIA][] = path/to/file.css
+
+    Alternatively, if you are more familiar with a different CSS layout method,
+    such as GridSetApp or 960.gs, etc., you can replace the
+    "css/layouts/responsive-sidebars.css" line in your .info file with a line
+    pointing at your choice of layout CSS file.
+
+    Then, visit your site's Appearance page at admin/appearance to refresh
+    Drupal 7's cache of .info file data.
+
+ 4. Edit your sub-theme to use the proper function names.
+
+    Edit the template.php and theme-settings.php files in your sub-theme's
+    folder; replace ALL occurrences of "STARTERKIT" with the name of your
+    sub-theme.
+
+    For example, edit foo/template.php and foo/theme-settings.php and replace
+    every occurrence of "STARTERKIT" with "foo".
+
+    It is recommended to use a text editing application with search and
+    "replace all" functionality.
+
+ 5. Set your website's default theme.
+
+    Log in as an administrator on your Drupal site, go to the Appearance page at
+    admin/appearance and click the "Enable and set default" link next to your
+    new sub-theme.
+
+
+Optional steps:
+
+ 6. Modify the markup in Zen core's template files.
+
+    If you decide you want to modify any of the .tpl.php template files in the
+    zen folder, copy them to your sub-theme's folder before making any changes.
+    And then rebuild the theme registry.
+
+    For example, copy zen/templates/page.tpl.php to foo/templates/page.tpl.php.
+
+ 7. Modify the markup in Drupal's search form.
+
+    Copy the search-block-form.tpl.php template file from the modules/search/
+    folder and place it in your sub-theme's template folder. And then rebuild
+    the theme registry.
+
+    You can find a full list of Drupal templates that you can override in the
+    templates/README.txt file or http://drupal.org/node/190815
+
+      Why? In Drupal 7 theming, if you want to modify a template included by a
+      module, you should copy the template file from the module's directory to
+      your sub-theme's template directory and then rebuild the theme registry.
+      See the Drupal 7 Theme Guide for more info: http://drupal.org/node/173880
+
+ 8. Further extend your sub-theme.
+
+    Discover further ways to extend your sub-theme by reading Zen's
+    documentation online at:
+      http://drupal.org/documentation/theme/zen
+    and Drupal 7's Theme Guide online at:
+      http://drupal.org/theme-guide

config.rb

@@ -0,0 +1,56 @@
+#
+# This file is only needed for Compass/Sass integration. If you are not using
+# Compass, you may safely ignore or delete this file.
+#
+# If you'd like to learn more about Sass and Compass, see the sass/README.txt
+# file for more information.
+#
+
+
+# Change this to :production when ready to deploy the CSS to the live server.
+environment = :development
+#environment = :production
+
+# In development, we can turn on the FireSass-compatible debug_info.
+firesass = false
+#firesass = true
+
+
+# Location of the theme's resources.
+css_dir         = "css"
+sass_dir        = "sass"
+extensions_dir  = "sass-extensions"
+images_dir      = "images"
+javascripts_dir = "js"
+
+
+# Require any additional compass plugins installed on your system.
+#require 'ninesixty'
+#require 'zen-grids'
+
+# Assuming this theme is in sites/*/themes/THEMENAME, you can add the partials
+# included with a module by uncommenting and modifying one of the lines below:
+#add_import_path "../../../default/modules/FOO"
+#add_import_path "../../../all/modules/FOO"
+#add_import_path "../../../../modules/FOO"
+
+
+##
+## You probably don't need to edit anything below this.
+##
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+output_style = (environment == :development) ? :expanded : :compressed
+
+# To enable relative paths to assets via compass helper functions. Since Drupal
+# themes can be installed in multiple locations, we don't need to worry about
+# the absolute path to the theme from the server root.
+relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+# Pass options to sass. For development, we turn on the FireSass-compatible
+# debug_info if the firesass config variable above is true.
+sass_options = (environment == :development && firesass == true) ? {:debug_info => true} : {}

css/README.txt

@@ -0,0 +1,152 @@
+ZEN'S STYLESHEETS
+-----------------
+
+Don't panic!
+
+There are 22 CSS files in this sub-theme, but its not as bad as it first seems:
+- The drupal7-reference.css is just a reference file and isn't used directly by
+  your sub-theme. See below.
+- There are 7 CSS files whose names end in "-rtl.css". Those are CSS files
+  needed to style content written in Right-to-Left languages, such as Arabic and
+  Hebrew. If your website doesn't use such languages, you can safely delete all
+  of those CSS files.
+- There are 2 example layout stylesheets in the layouts/ folder, but only one of
+  them is used at any time.
+- If you aren't using this sub-theme while doing wireframes of your site's
+  functionality, you can remove wireframes.css from your sub-theme's .info file
+  and delete the file as well.
+- One is just a print stylesheet!
+
+That leaves just 11 CSS files. (Okay, still quite a few, but better than 22.)
+
+Why not just one stylesheet?
+
+- For performance reasons you should always have all of your CSS in a single
+  file to minimize the number of HTTP requests the user's browser needs to do.
+  Fortunately, Drupal has a "Aggregate and compress CSS" feature that will
+  automatically combine all the CSS files from its modules and themes into one
+  file. You can turn on that feature under "Bandwidth Optimization" on the page:
+    Administration > Configuration > Development > Performance
+  So Drupal allows us (if we want) to use more than one stylesheet file, but
+  still serves all the styles in one file to our users.
+- When developing a site using a single stylesheet, it can become unwieldy to
+  scroll and find the place you need to edit. As a deadline becomes imminent,
+  developers often start stuffing new styles at the bottom of the stylesheet,
+  completely destroying any stylesheet organization.
+- Instead of one monolithic stylesheet, Zen sub-themes' CSS files are organized
+  into several smaller stylesheets. Once you learn the organization (described
+  below) it becomes easier to find the right place to add new styles.
+- Stylesheets are added in the order specified in your sub-theme's .info file.
+  The default order of the stylesheets is designed to allow CSS authors to use
+  the lowest specificity possible to achieve the required styling, with more
+  general stylesheets being added first and more specific stylesheets added
+  later.
+- In addtion to following the normal CSS cascade, stylesheets are also organized
+  relative to common Drupal template files. The most commonly used Drupal
+  template files also have a corresponding stylesheet.
+
+
+ORDER AND PURPOSE OF DEFAULT STYLESHEETS
+----------------------------------------
+
+First off, if you find you don't like this organization of stylesheets, you are
+free to change it; simply edit the stylesheet declarations in your sub-theme's
+.info file. This structure was crafted based on several years of experience
+theming Drupal websites.
+
+- normalize.css:
+  This is the place where you should set the default styling for all HTML
+  elements and standardize the styling across browsers. If you prefer a specific
+  HTML reset method, feel free to use it instead of normalize.
+
+- layouts/responsive-sidebars.css:
+  Zen's default layout is based on the Zen Grids layout method. Despite the
+  name, it is an independent project from the Zen theme. Zen Grids is an
+  intuitive, flexible grid system that leverages the natural source order of
+  your content to make it easier to create fluid responsive designs. You can
+  learn more about Zen Grids at http://zengrids.com
+
+  The responsive-sidebars.css file is used by default, but these files are
+  designed to be easily replaced. If you are more familiar with a different CSS
+  layout method, such as GridSetApp, 960.gs, etc., you can replace the default
+  layout with your choice of layout CSS file.
+
+- layouts/fixed-width.css:
+  This layout is based on the Zen Grids layout method, but uses a fixed pixel
+  width. It is not included by default in your theme's .info file, but is
+  provided as an option.
+
+- tabs.css:
+  While most of the CSS rulesets in your sub-theme are guidelines without any
+  actual properties, the tabs stylesheet contains actual styling for Drupal
+  tabs, a common Drupal element that is often neglected by site desiners. Zen
+  provides some basic styling which you are free to use or to rip out and
+  replace.
+
+- pages.css:
+  Page styling for the markup in the page.tpl.php template.
+
+- blocks.css:
+  Block styling for the markup in the block.tpl.php template.
+
+- navigation.css:
+  The styling for your site's menus can get quite bulky and its easier to see
+  all the styles if they are grouped together rather then across the
+  header/footer sections of pages.css and in blocks.css.
+
+- views-styles.css:
+  Views styling for the markup in various views templates. You'll notice this
+  stylesheet isn't called "views.css" as that would override (remove) the Views
+  module's stylesheet.
+
+- nodes.css:
+  Node styling for the markkup in the node.tpl.php template.
+
+- comments.css:
+  Comment styling for the markup in the comment-wrapper.tpl.php and
+  comments.tpl.php templates.
+
+- forms.css:
+  Form styling for the markup in various Drupal forms.
+
+- fields.css:
+  Field styling for the markup produced by theme_field().
+
+- print.css:
+  The print styles for all markup.
+
+In these stylesheets, we have included all of the classes and IDs from this
+theme's tpl.php files. We have also included many of the useful Drupal core
+selectors to make it easier for theme developers to discover them.
+
+
+STYLES FOR INTERNET EXPLORER
+----------------------------
+
+Zen allows IE-specific styles using a method first described by Paul Irish at:
+http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
+
+If you look at Zen's templates/html.tpl.php file, you will see the HTML tag that
+will be used by your site. Using Microsoft's conditional comment syntax,
+different HTML tags will be used for different versions of Internet Explorer.
+
+For example, IE6 will see the HTML tag that has these classes: lt-ie7 lt-ie8
+lt-ie9. If you need to write an IE6-specific rule, you can simply prefix the
+selector with ".lt-ie7 " (should be read as "less than IE 7"). To write a rule
+that applies to both IE6 and IE7, use ".lt-ie8 ":
+  .someRule { /* Styles for all browsers */ }
+  .lt-ie8 .someRule { /* Styles for IE6 and IE7 only. */ }
+
+Many CSS authors prefer using IE "conditional stylesheets", which are
+stylesheets added via conditional comments. If you would prefer that method, you
+should check out the Conditional Stylesheets module:
+http://drupal.org/project/conditional_styles
+
+
+DRUPAL CORE'S STYLESHEETS
+-------------------------
+
+Many of Zen's styles are overriding Drupal's core stylesheets, so if you remove
+a declaration from them, the styles may still not be what you want since
+Drupal's core stylesheets are still styling the element. See the
+drupal7-reference.css file for a complete list of all Drupal 7.x core styles.