CONTENTS OF THIS FILE
---------------------
 * Introduction
 * Features
 * Installation
 * Useful Information
 * Known Issues
 * Authors
 * Sponsors


INTRODUCTION
-----------------------

Sasson is a powerful base theme intended for advanced drupal theming, aiming
at bringing the fun back to theming.
It is a collection of many open source goodies combined together in a modular
structure, everything is optional and we keep it so that what you don't use
won't leave any trace in your output code.

Clean and simple code, lightweight structure, latest technologies, 100% open-
source and the best DX (developer experience) we could think of is what we
hope you will find in this new drupal base theme.

Read all about it here - http://www.linnovate.net/blog/sasson-smart-drupal-theming


FEATURES
---------------

 * It includes a Sass compiler & Compass framework (via a modified PHamlP,
 optional) - no extra requirements, simply enable and start writing sass/scss.
 * It's mobile friendly - with responsive, content-first layout, out of the box.
 optional mobile-first responsive layout, media queries break-points are
 configurable.
 * It converts the core template files to HTML5 markup - <header>, <footer>,
 <article> for nodes, <section> for blocks, <aside> for sidebars, <nav> for
 menus etc.(thanks Boron - http://drupal.org/project/boron)
 * It auto-generates image sprites and matching style sheets.
 * It includes a perfectly semantic grid system (based on 960gs http://960.gs/
 via Compass - http://compass-style.org).
 * It includes an HTML5-friendly CSS Reset (normalize), cross-browser styling
 compatibility improvements and other tweaks & best practices from
 HTML5Boilerplate v3.0.1 (http://html5boilerplate.com).
 * File watcher - See changes happen in real time. Sasson will auto-
 magically update your browser whenever you modify your style sheets (or any
 other file), [NEW] now without refreshing the browser.
 * It *doesn't* give you a pile of CSS rules you will have to override.


MORE FEATURES
---------------

 * Adaptive grid - on your theme settings you may choose width, # of columns,
 gutter width, we (well, SASS) do the math.
 * Ready made sub-theme. just copy, rename, and start theming
 * Google web-fonts support (http://www.google.com/webfonts)
 * FireSASS support (https://addons.mozilla.org/en-US/firefox/addon/firesass-
 for-firebug)
 * HTML5 support in oldIEs via HTML5Shiv v3 (http://code.google.
 com/p/html5shiv/)
 * HTML5 doctype and meta content-type
 * Blocks marked up with section elements
 * Search form uses the new input type="search" attribute
 * WAI-ARIA accessibility roles added to primary elements
 * Many extra body and node classes for easy theming
 * Responsive menus (thanks to https://github.com/joggink/jquerymobiledropdown)
 * Optional blueprint grid system integration, no more vendor prefixes, simple
 IE fixes, and many more - all thanks to compass (http://compass-style.
 org/blog/2011/04/24/v011-release/)
 * Grid background "image", for easy element aligning, made with CSS3 and SASS
 to fit every grid you can imagine.
 * Draggable overlay image you can lay over your HTML for easy visual
 comparison. you may also set different overlay opacity values.
 * Bi-directionality support for RTL and LTR (Right-To-Left and Left-To-Right)
 - Sasson can actually auto-flip your scss, you only have to @flip it.


INSTALLATION
----------------------

 * Bad way - Extract the theme in your sites/all/themes/ directory, enable it
 and start hacking

 * Good way -

      * Extract the theme in your sites/all/themes/ directory
      * Move SUBTHEME into its own folder in your themes directory
      * Optional but recommended - Rename at least your folder and .info file
      * Enable your sub-theme and start hacking

 * Even better - you can use drush to create and enable your sub-theme(s) -

      # drush sns "My theme"


USEFUL INFORMATION
----------------------------------

 * Out of the box Sasson will give you a 960 pixel grid system, you may change
 grid properties in your theme settings

 * Sasson gives you a responsive layout - that means your site adapts itself
 to the browser it is displayed on. you may set the layout breakpoints or
 disable this behavior via theme settings

 * The default responsive layout takes a desktop-first approach, you can go
 mobile-first with a click in your theme settings.

 * Sasson can auto-generate image sprites and matching style sheets out of a
 directory of images. under your sub-theme's image directory you'll find 3
 directories (horz, vert, and smart), all you need to do is put images inside
 those directory and call them from your Sass file:

      @import "sprites/DIRNAME";

      .selector {
         @include sprite-DIRNAME-FILENAME;
      }

 The @include sprite-DIRNAME-FILENAME; mixing can get two arguments, the first,
 if true (defaults to false), will hide the text in the selector using the h5bp
 image replacement technique. The second argument (defaults to true) provides
 the dimensions for the original image.
 Every directory will become a separate sprite image, you can create as many
 directories (or sprite images) as you want. keep in mind that 'horz' in the
 directory name will generate a horizontal sprite, 'vert' will generate a
 vertical sprite and anything else will generate a smart sprite (calculates
 the smallest sprite image to hold all of the images).

 * Sasson lets you use Compass URL helper functions (http://compass-style.org/
 reference/compass/helpers/urls/), by default, the functions will point to your
 theme's /images, /fonts and /styles directories but you may override that in
 your theme settings.

 * While you develop, you should keep the development mode turned on (see theme
 settings page), this will output a more readable css, and will give you
 FireSASS support (https://addons.mozilla.org/en-US/firefox/addon/firesass-for-
 firebug/).

 * When in development mode, style sheets and image sprites will be recompiled
 every time they update and when you clear your caches.
 TIP: you can also use alt+c to recompile style sheets, image sprites and clear
 CSS and JS caches (this requires admin-menu to work).

 * When not developing, turn development mode off, this will keep your CSS
 output light as a feather, in fact, the output of our semantic version of
 960gs is much slimmer then the original css grid system.

 * Sasson allows you to write CSS3 properties (like 'border-radius', 'box-
 shadow' etc.) in the standard form, vendor specific prefixes will be added
 for you. see hook_prefixes_alter() if you want to add more.

 * Sasson passes variables from the theme settings form and into the sass
 compiler, you can do this in your sub-theme as well, see hook_sasson_alter().

 * Sasson will force latest IE rendering engine (even in intranet) & Chrome
 Frame, you may disable that via theme settings

 * Sasson will set mobile viewport initial scale to 100%. with a responsive
 layout, this will give your mobile users the best experience, no need to zoom
 on every page load, you may disable that via theme settings

 * sass/scss files are compiled to css files with the same name, when manually
 creating multiple sub-themes, you should avoid having two sass/scss files
 with the same name because they will override each other, if using drush sns
 to create sub-theme we take care of that for you.

 * When loading style-sheets in your .info file Sasson allows you to specify
 settings like media queries, browsers, weight and any option available to
 drupal_add_css(), for example :

		styles[styles/sasson.scss][options][weight] = 1
		styles[styles/sasson.scss][options][media] = screen and (max-width:400px)
		styles[styles/sasson.scss][options][browsers][IE] = lte IE 7
		styles[styles/sasson.scss][options][browsers][!IE] = FALSE

 This will load sasson.scss with an extra weight for screen only (not print)
 on browsers wider then 400px and on IE7 or older only, you get the point.

 * Sasson can apply classes to the <html> tag to allow easier styling for
 Internet Exporer, enable this feature under "HTML5 IE support" :

   - html.ie9 #selector { ... } /* IE9 only rules */
   - htm.lte-ie8 #selector { ... } /* IE8 and below rules */

 * Bi-directionality - Many sites need to have both LTR (left-to-right e.g.
 English) and RTL (right-to-left e.g. Hebrew, Arabic) support for different
 sections of the site. Drupal allows you to add '-rtl' to your CSS filenames
 for style sheets that will be loaded for RTL pages only. Sasson allows you to
 use '-ltr' too (e.g. mytheme-ltr.scss) for files that will load on LTR pages
 only.

 * New feature: Auto Directionality Flipping - You can simply put '@flip
 {file: "filename.scss"};' in your 'filename-rtl.scss' or 'filename-ltr.scss'
 file and Sasson will replace this line with a flipped (RTLed or LTRed)
 version of 'filename.scss'. if needed you may insert fixes to the auto-
 generated code right after this line. (check out sasson-rtl.scss and its CSS
 output to see it in action) - http://www.linnovate.net/blog/drupal-theme-rtls-itself


KNOWN ISSUES
------------------------

* Our Sass compiler works really well (and constantly improving) but the
compass version included is quite old, if you need the latest compass features
we suggest using Sasson with the native Ruby compiler (http://compass-style.
org/install/).


AUTHORS
--------------

* Tsachi Shlidor (tsi) - http://drupal.org/user/322980 & http://rtl-themes.co.il
* Raz konforti (konforti) - http://drupal.org/user/99548
* And many others...


SPONSORS
----------------

This project is made possible by :

* Linnovate (http://linnovate.net)
