Last updated August 21, 2012. Created by tsi on August 17, 2012.
Edited by manu manu. Log in to edit this page.
@TODO - break this down into separate pages.
@ToDo - While most of this is still valid, we need to update this to v3.x.
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 behaviour via theme settings.
- The default responsive layout takes a desktop-first approach, you can go mobile-first with a click in your theme settings.
- New - Sasson can auto-generate image sprites and matching stylesheets 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;
}
Every directory will become a seperate 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). read more about Sasson's sprite generator here. - Sasson lets you use Compass URL helper functions, 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 under "SASS/SCSS settings"), this will output more readable css, and will give you FireSASS support.
- 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 as they will override each other, if using
drush snsto 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(), this example will load sasson.scss with an extra weight for screen only (not print) on browsers wider then 400px and on IE7 or older only :
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 - Sasson applies classes to the
<html>tag to enable easier styling for Internet Exporer - 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. by default 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, you can also prevent pieces of you styles from being flipped. (check out sasson-rtl.scss and its CSS output to see it in action).
- html.ie9 #selector { ... } /* IE9 only rules */
- htm.lte-ie8 #selector { ... } /* IE8 and below rules */