Sasson means "Joy".
This drupal theme is all about bringing the joy back into drupal theming by making your work effective and smart, and your results professional and faster, faster for you to develop and faster for the end-user to browse.
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.

We'll quickly go over most of the main features of Sasson and see how to use them.

Sass compiler - built in !

Sass makes CSS fun again. Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.

Explaining what you can do with sass is way out of the scope of this blog post but let me just say it's awesome, to see how awesome it is you can check out its homepage.
Sasson gets its power mostly from the use of sass, it allows us to do math and use mixins, this way we can do amazing stuff:

• Create any grid you can imagine, without those nasty classes cluttering the markup, it is responsive and to top it all, it is configurable from your theme settings, but we'll get to it later.
• Never use css vendor-prefixes again, just write border-radius, box-shadow, transition etc. vendor specific prefixes will be added for you. see hook_prefixes_alter() if you want to add more.
• Pass variables from the theme settings form or any other php script and into the sass compiler, you can do this in your sub-theme as well, see hook_sasson_alter().
• Use variables, nesting, mixins, selector inheritance, if-else statements and much more.

Sasson uses PHamlP to compile sass to CSS so there are no prior requirements, just install it and start writing sass.

Compass is one of the things that makes sass so much more powerful then other CSS preprocessors, it is also included so you can enjoy this huge library of mixins and functions as well to make your CSS even smarter.
In your theme settings, under 'SASS / SCSS settings' you can turn on/off Sasson's 'Development mode' when this is on, sass files will be recompiled on every page load and FireSass support is enabled.
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.

tip: sass/scss files are compiled to CSS files with the same name, that means that if you want to override a parent-theme's sass/scss file from your sub-theme, you can simply create a sass/scss file with the same name and it will override the original one, but remember this - 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.

Mobile friendly - adapt to the browser
Everybody talks about how desktops are out and mobile devices are in, big time. designing a layout that will adapt to all these different screens is now more important then ever, Sasson gives you a responsive layout, which is completely configurable from your theme settings, under 'Responsive Layout Settings' you can choose the breakpoints in which your page will switch from one layout to another.

Many developers believe we should design for mobile devices first and progressively enhance the UI according to the device being used (e.g. serve small background image for mobile and bigger if the device/browser is bigger), on the other hand, many designers prefer to design for desktops and only do some adjustments if a mobile design is being used.
Sasson even lets you choose between a mobile-first or desktop-first approach, again, right from your theme settings.

On very small devices, you would like your horizontal menus to become a drop-down <select></select> element, on your theme settings, under 'Responsive Layout Settings' -> 'Responsive Menus' you may set the breakpoint where this should happen.

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, if you don't want a responsive layout you may disable that via theme settings.

HTML5 - use the latest technology
Drupal 8 will serve HTML5, but until then we will need to do that ourself, Sasson overrides all of drupal's core templates and many theme functions to give you the most modern and clean markup available - <header></header>, <footer></footer>, <article></article> for nodes, <section></section> for blocks, <aside></aside> for sidebars, <nav></nav> for menus etc.

Worried about oldIEs (IE 6-8) that don't support HTML5 elements ? worry no more, because we use html5shiv to make them behave, we also add classes to the tag to enable easier style fixes for Internet Exporer :
html.ie9 #selector { ... } /* IE9 only rules */html.lte-ie8 #selector { ... } /* IE8 and below rules */
Finally, we couldn't serve HTML 5 without bringing all the goods from HTML5 Boilerplate:

HTML5 Boilerplate is the professional badass's base HTML/CSS/JS template for a fast, robust and future-proof site.

960px grid system - as wide as you want it
As mentioned before, we use a grid system.
I love grids, they make your work so much faster, it's like discovering photoshop's 'guides' (those draggable lines) for the first time, you could align stuff without them, but they make it so much easier.
There are two problems with the standard grid system -
* It uses 'grid-x' classes which simply don't belong in my markup, as we all know by now we should separate display from content.
* It is very limited - you must choose a static grid width and only few grid systems allow you to set a fluid (percent based) grid.
Sasson solves both of this issues - using sass, we don't need those nasty classes, we can simply use
// This is just like using <div id="sidebar-first" class="grid-4 alpha">#sidebar-first {  @include grid(4);  @include alpha;}Sasson's theme settings let you set all of your grid attributes - grid width, number of columns, gutter width, and number of columns taken by the sidebars. the theme will then use sass to generate all the CSS needed for your grid. because the grid's CSS is calculated on-the-fly you can set it to be exactly the way you want it - wider, narrower, it can even be fluid. with the awesome <a href="http://drupal.org/project/delta" target="_blank">Delta</a> module you can even set different grid settings for different parts of your site.<a name="subtheme"></a><strong>Cool feature</strong>: If you enable 'Show grid background layer' on your theme settings, Sasson will generate a grid background tailored for the grid you have created (made with CSS3 and calculated by sass) so you can actually see your grid and easily check your layout.<img alt="Sasson - using sass for smart drupal theming" src="http://www.linnovate.net/files/subson.png" style="float:right;"><h3>Sub-theming</h3>Sasson gives you some very powerful tools for fast and easy development of sub-themes and other tools that try and improve some of the things we believe Drupal's theme system can do better.First, creating a sub-theme is as easy as writing <code>drush sns "My theme". this series of commands will download Sasson, create a sub-theme and enable it :
drush dl sassondrush cc alldrush sns "My theme" -y
The -y automatically answers "yes" when prompted to enable the newly created theme and set it as the default theme.
You can have full control on the theme name and machine name with :
drush sns "Full Name" machine_name -y
If you don't use drush you can simply copy-paste the sub-theme provided within Sasson, rename at least your folder and .info file, enable it and your sub-theme is ready.

drupal_add_css() is really powerful, you can set media queries and browser conditions (as in "load this file for IE7 only") but you don't get all that when simply calling a stylesheet from your .info file, we thought it would be really awesome if we could use all these options when calling stylesheets in our .info file too, so here's one of my favorite features - 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] = 1styles[styles/sasson.scss][options][media] = screen and (min-width:400px)styles[styles/sasson.scss][options][browsers][IE] = lte IE 7styles[styles/sasson.scss][options][browsers][!IE] = FALSE
This will load sasson.scss (1) with an extra weight (2) for screen only (not print) on browsers wider then 400px (3) and on IE7 or older only, how cool is that ?

Google Web Fonts

Google Web Fonts makes web fonts quick and easy to use for everyone, including professional designers and developers.

Sasson makes Google Web Fonts even easier to use, just paste the name of the font into Sasson's theme settings and you're done.
You can apply the font to selected elements using simple css selectors, and set the fallback fonts you would like your site to use just in case...
To keep this light and simple we have only created a vary basic and minimal implementation of Google Web Fonts API, if you need more - there is a module for that.

Draggable overlay image
This is a small but very handy feature, simply insert the URL to an image (e.g. the jpeg your designer put in your dropbox) and it will become a draggable overlay image you can lay over your site for easy visual comparison between the design and your html/css. you may also set different overlay opacity values.

Sasson is pretty young and still evolving (though it's fully operational!), if you have any issues with it, or if you just want to brag about making something beautiful with it, please tell us.

Download Sasson