Sasson - smart drupal theming


Israel Office



Europe office


Sasson - smart drupal theming
submitted by: Tsachi Shlidor
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. Sasson - using sass for smart drupal theming

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. Sasson - using sass for smart drupal theming

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