Sasson

New - Sasson can auto-generate image sprites and matching stylesheets out of a directory of images.

Download Now

Read (and write) Documentation

Sasson is a powerful tool-kit intended for advanced drupal theming, aiming at bringing the fun back to theming.
It is a set of advanced tools 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.

What it does ?

• SASS - It includes a Sass compiler & Compass framework (via a modified PHamlP, optional) - no extra requirements, simply enable and start writing sass/scss.
• Responsive - It's mobile friendly - with responsive, content-first layout, out of the box. optional mobile-first responsive layout, media queries break-points are configurable.
• HTML5 - 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)
• Fluid grid - It includes a perfectly semantic grid system - no more non-semantic grid classes (based on 960gs via Compass).
• CSS Reset/Normalize - It includes both normalize.css and reset.css for you to choose between, including an HTML5-friendly CSS Reset, cross-browser styling compatibility improvements and other tweaks & best practices from HTML5Boilerplate v3.0.2
• File watcher - See changes happen in real time. Sasson will automagically refresh your browser whenever you modify your stylesheets (or any other file). [NEW] - now without a page refresh.
• Lightweight - 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. even better - use one line of drush to do that.
• FireSASS support.
• HTML5 support in oldIEs (IE 6-8) via HTML5shiv.
• HTML5 doctype and meta content-type.
• 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 jqueryMobileDropdown).
• Optional blueprint grid system integration, no more vendor prefixes, simple IE fixes, and many more - all thanks to compass
• Google web-fonts support, right from your theme settings.
• Draggable overlay image you can lay over your HTML for easy visual comparison with your design.
• Grid background "image", for easy element aligning, made with CSS3 and SASS to fit every grid you can imagine.
• 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, read more about it here.

INSTALLATION

• Bad way - Extract the theme in your sites/all/themes/ directory, enable it and start hacking
• Good way -
  1. Extract the theme in your sites/all/themes/ directory
  2. Copy SUBTHEME into its own folder in your themes directory
  3. Rename at least your folder and .info file
  4. Enable your sub-theme and start hacking
• Even better - you can use drush to create your sub-theme(s) -
  • Use drush sns "My theme" - see this comment for more info

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, Sasson v3.x will have built-in integration with the Ruby compiler.

SUB-THEMES

• Full On - is a full-width sub-theme for Sasson and a great example of how you can override stuff from Sasson.
• Plato - is a beautiful sub-theme for Sasson and the theme for the OpenideaL project.

SASSON v3.x

Sasson v3.x is now available for download !

• Compass compiler - The new release compiles Sass using the original Compass compiler, that means you should have Compass installed, Sasson will automatically detect and use it.
• Assetic included - Since Drupal 8 has it, we figured we can start enjoying it now. we (only) use it to compile Sass with Compass, but a lot more is possible.
• New grid layout system - meet Gridy Salsa, a new simple and powerful layout system inspired by susy and Zen Grids.

Upgrade from v2.x to v3.x - not supported ATM, it should be possible (read this) but we won't test it before 3.x is ready for production use. if you have a running site using v2.x - you're good, stick with it. we'll try to backport all important updates from v3.x to v2.x.

WANNA HELP?

Help will be most welcome:

• Testing the new v3.x
• Documentation - there's a page on the documentation section but there is still a lot of place for improvements, especially for the upcoming v3.x.
• Any open issue in the Issue queue.

Sasson was started as 965 but have since evolved into new areas.
most of the ideas here came from many super talented developers, credits is left where credit is due.
Thanks perelman nir for the name and raz konforti for making it work so amazingly good.
The bugs are mine.

Downloads