@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 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). 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 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(), 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

    • - 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. 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).

Admin Theme Settings

Grid settings
Not in v.3b+.
Width, columns, gutter. Sidebar first width, sidebar second width.
To modify these settings in v.3b+, either preset the values in the INFO file before enabling the theme or...

Responsive Layout Settings
Enable responsive, set desktop or mobile-first, enable responsive menus.

SASS / SCSS settings
Not in v.3b+.

CSS resets
Set Normalize, Reset, or none. Set Formalize. Selectively disable theme CSS files.

Javascript
New in v.3.
Move scripts to footer. Enable JQ Latest. Disable theme JS files.

HTML5 IE support
Set IE Latest, Shiv, and other IE options.

Fonts
Enable a single web font.

Development
File watcher, Grid background, Design overlay, Mail debugger.

General
Basic Drupal theme toggles, logo, favicon, breadcrumb separator, RSS icon.

Comments

deminua’s picture

deminua commented

Подскажите что делать, поставил Sasson тему на Drupal 7, необходимо использовать спрайты, прописал в SUBTHEME.scss:

@import "sprites/smart";

а мне пишет:

SassException: Unable to find import file: sprites/smart в функции SassFile::getFile() (строка 98 в файле /home/***/data/www/***/sites/all/themes/sasson/phamlp/sass/SassFile.php).

Что делать не знаю, подскажите...