Sasson - smart drupal theming

drupal-planet
drupal
Contribution
Sasson
drupalgive
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 <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.

Sasson - making drupal love html5

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>, <footer>, <article> for nodes, <section> for blocks, <aside> for sidebars, <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.

Sasson - the perfect grid

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 Delta module you can even set different grid settings for different parts of your site.

Cool feature: 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.

Sasson - using sass for smart drupal theming

Sub-theming

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 drush sns "My theme". this series of commands will download Sasson, create a sub-theme and enable it :

drush dl sasson
drush cc all
drush 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] = 1
styles[styles/sasson.scss][options][media] = screen and (min-width:400px)
styles[styles/sasson.scss][options][browsers][IE] = lte IE 7
styles[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

Comments

Actually performance is great, apart from the fact that one of our main goal is to keep the theme lightweight and efficient as we can, using sass has some additional benefits over standard css.
If you never used sass before, let me just say that eventually everything is compiled to normal css and optionally aggregated by drupal so nothing special here.
The nice thing (performance-wise) about using sass is that not everything must be compiled into css and sent to the end-user, the compiler is smart enough to have pieces of sass/scss (called partials) that are ready to be called and turn into css but if not called they won't appear in your css output.
We can demonstrate that using our 960 grid system - with the standard version of 960gs you must include all of the grid options in your css even if you usually don't use them, that means you have stuff like :

.push_1, .pull_1,
.push_2, .pull_2,
.push_3, .pull_3,
.push_4, .pull_4,
.push_5, .pull_5,
.push_6, .pull_6,
.push_7, .pull_7,
.push_8, .pull_8,
.push_9, .pull_9,
.push_10, .pull_10,
.push_11, .pull_11,
.push_12, .pull_12,
.push_13, .pull_13,
.push_14, .pull_14,
.push_15, .pull_15 {
position: relative;
}

This will be included in your css no matter if you use only one of them or none at all.
With sass the code is included only if you use it (only if you @include it) and so if I call :

.one-sidebar.sidebar-first #main {
@include fluid-grid($ninesixty-columns - $sidebar-first);
@include fluid-push($sidebar-first);
}

It becomes:

.one-sidebar.sidebar-first #main {
display: inline;
float: left;
margin-left: 1.0417%;
margin-right: 1.0417%;
width: 72.9167%;
left: 25%;
position: relative;
}

but otherwise nothing will be added to my css output.
That is why I wrote - "in fact, the output of our semantic version of 960gs is much slimmer then the original CSS grid system."

צחי, אם הייתי רגיל להגיד באנגלית ישר כח, תחזקנה ידיך. הייתי עושה את זה
אוסף כזה של מטעמי צד לקוח מחוזקים בדראש. עושה חשק
נוריד ונלמד.

i like
We can demonstrate that using our 960 grid system - with the standard version of 960gs you must include all of the grid options in your css even if you usually don't use them, that means you have stuff like :

Hi,

I'm using Sasson for a site I'm building, and while I am not using some of the features, I love how easy it was for me to create a sub-theme and configure it. Here's where I'm running into a problem: I have defined my sidebar as four columns, and now I want to put two two-column blocks side-by-side inside the sidebar.

With 960 I could do this in the HTML:

<

div id="block-one" class="grid-2 alpha">

You provide an example above that indicates that I can replace that with a SASS instruction like this:

#block-one {
@include grid(2);
@include alpha;
}

But where would I put this? I tried putting it in my sub-theme's .scss file and the file stopped loading. I tried putting it in my sub-theme's _mixins.css file and nothing happened. And the old 960 html markup doesn't work either. At this point I am effectively unable to use the 960 grid system for anything besides the template elements (header, sidebars, etc.), which I was able to define in the theme settings.

Add new comment