Front-end development with Sass & Sasson

← Use your arrows to navigate →

Back to home page

 CSS 

Separate formatting from content

Calling the CSS

1) HTML element style attribute

  • ex. <div style="color: red; font-size: 18pt;">Some Text</div>
  • discouraged

2) style element

  • inside head element in HTML
  • ex. <style type="text/css"> ...rules... </style>
  • discouraged

3) link tag

  • inside head element in HTML
  • references an external .css file containing rules
  • ex. <link rel="stylesheet" type="text/css" href="filename.css">
  • recommended

Selecting elements in an html document

Can specify formatting for

  • all elements of the same type li, a, article
  • all elements with a given class .button, .title
  • the element with a given id #header, #footer
  • elements with certain relationships #header h1

W3C documents

  • CSS1 Recommendation (1996)
  • CSS2 Recommendation (1998)
  • CSS3 - defined by many documents at various stages of approval; many are Working Drafts
  • CSS3

    Defined by a long list of modularized W3C specifications

    • at various stages of specification
    • at various stages of browser implementation

    Current browsers

    • do not support all of the CSS3 features
    • treat others as experimental
    • IE support is very limited
    • Firefox, Chrome, Safari and Opera support is better

    CSS3 Experimental?

    Rather than support new CSS property names (and some property values), browsers support alternate names that begin with

    • -ms- for IE
    • -moz- for Firefox
    • -o- for Opera
    • -webkit- for Safari, iPhone, iOS, Chrome, Android

    When features are no longer considered experimental, unprefixed names will be supported

    Example

    • for now instead of transition,
      use -webkit-transition, -moz-transition etc.

    http://caniuse.com/

    http://css3please.com/

    Media Queries

    Recommendation 19 June 2012

    • Latest Version: http://www.w3.org/TR/css3-mediaqueries/
    • “media-dependent style sheets tailored for different media types ... extend the functionality of media types by allowing more precise labeling of style sheets”
    • “A media query consists of a media type and zero or more expressions
      that check for the conditions of particular media features.”

    Bronco

    Fonts Module Level 3

    W3C Working Draft 4 October 2011

    Google Web Fonts

    Text Level 3

    W3C Working Draft 19 January 2012

    • Latest version: http://www.w3.org/TR/css3-text/
    • “defines properties for text manipulation and specifies their processing model. It covers line breaking, justification and alignment, white space handling, text decoration and text transformation.”

    Text-shadow - CSS3.Info

    Backgrounds and Borders Module Level 3

    W3C Candidate Recommendation 24 July 2012

    • Latest version: http://www.w3.org/TR/css3-background/
    • “includes and extends the functionality of CSS level 2 ...
      The main extensions are borders consisting of images, boxes with multiple backgrounds,
      boxes with rounded corners and boxes with shadows.”

    CSS drop-shadows – Nicolas Gallagher

    Image Values and Replaced Content Module Level 3

    W3C Candidate Recommendation 17 April 2012

    • Latest Version: http://www.w3.org/TR/css3-images/
    • “...introduces additional ways of representing 2D images, for example as a list of URIs denoting fallbacks, or as a gradient.
      ... defines several properties for manipulating raster images and for sizing or positioning replaced elements such as images.”
    • Gradients !

    CSS3 Patterns Gallery

    Transitions and Animations

    Transitions

    W3C Working Draft 3 April 2012

    Animations

    W3C Working Draft 3 April 2012

    • Latest Version: http://www.w3.org/TR/css3-animations/
    • “a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.

    Layout

    Flexible Box Layout Module

    W3C Working Draft, 12 June 2012

    • Latest Version: http://www.w3.org/TR/css3-flexbox/
    • “In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated..."

    Grid Layout

    W3C Working Draft, 22 March 2012

    • Latest Version: http://www.w3.org/TR/css3-grid-layout/
    • “...the Grid can be used to achieve many different layouts. It excels at dividing up space for major regions of an application, or defining the relationship in terms of size, position, and layer between parts of a control built from HTML primitives."

     Sass 

    Sass is a Cascading Style Sheets (CSS) metalanguage.
    It is a scripting language that is interpreted into CSS.
    Created by Hampton Catlin, Nathan Weizenbaum, Chris Eppstein and others.
    Sass - Syntactically Awesome Stylesheets

    Syntax - sass/scss

    Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” , and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well.
    The second, older syntax is known as the indented syntax (or just “Sass”). Instead of brackets and semicolons, it uses the indentation of lines to specify blocks

    // SCSS
    $blue: #3bbfce;
    
    .content-navigation {
      border-color: $blue;
      color:
        darken($blue, 9%);
    }
    
    // SASS
    $blue: #3bbfce
    
    .content-navigation
      border-color: $blue
      color: darken($blue, 9%)
    

    Nesting

    Sass avoids repetition by nesting selectors within one another. The same thing works with properties.

    // SCSS
    table.hl {
      margin: 2em 0;
      td.ln {
        text-align: right;
      }
    }
    
    li {
      font: {
        family: serif;
        weight: bold;
        size: 1.2em;
      }
    }
    
    /* CSS */
    
    table.hl {
      margin: 2em 0;
    }
    table.hl td.ln {
      text-align: right;
    }
    
    li {
      font-family: serif;
      font-weight: bold;
      font-size: 1.2em;
    }
    

    Variables

    Use the same color all over the place?
    Need to do some math with height and width and text size?
    Sass supports variables as well as basic math operations and many useful functions.

    // SCSS
    $blue: #3bbfce;
    $margin: 16px;
    
    .content-navigation {
      border-color: $blue;
      color:
        darken($blue, 9%);
    }
    
    .border {
      padding: $margin / 2;
      margin: $margin / 2;
      border-color: $blue;
    }
    
    /* CSS */
    .content-navigation {
      border-color: #3bbfce;
      color: #2b9eab;
    }
    
    .border {
      padding: 8px;
      margin: 8px;
      border-color: #3bbfce;
    }
    

    Parent References

    What about pseudoclasses, like :hover? There isn’t a space between them and their parent selector, but it’s still possible to nest them. You just need to use the Sass special character &. In a selector, & will be replaced verbatim with the parent selector.

    // SCSS
    a {
      color: #ce4dd6;
      &:hover { color: #ffb3ff; }
      &:visited { color: #c458cb; }
    }
    
    /* CSS */
    a { color: #ce4dd6; }
    a:hover { color: #ffb3ff; }
    a:visited { color: #c458cb; }
    

    Selector Inheritance (@extend)

    Sass can tell one selector to inherit all the styles of another without duplicating the CSS properties.

    // SCSS
    .error {
      border: 1px #f00;
      background: #fdd;
    }
    .error.intrusion {
      font-size: 1.3em;
      font-weight: bold;
    }
    
    .badError {
      @extend .error;
      border-width: 3px;
    }
    
    /* CSS */
    .error, .badError {
      border: 1px #f00;
      background: #fdd;
    }
    
    .error.intrusion,
    .badError.intrusion {
      font-size: 1.3em;
      font-weight: bold;
    }
    
    .badError {
      border-width: 3px;
    }

    Mixins

    Even more useful than variables, mixins allow you to re-use whole chunks of CSS, properties or selectors. You can even give them arguments.

    // SCSS
    @mixin table-base {
      th {
        text-align: center;
        font-weight: bold;
      }
      td, th {padding: 2px}
    }
    
    @mixin left($dist) {
      float: left;
      margin-left: $dist;
    }
    
    #data {
      @include left(10px);
      @include table-base;
    }
    
    /* CSS */
    #data {
      float: left;
      margin-left: 10px;
    }
    #data th {
      text-align: center;
      font-weight: bold;
    }
    #data td, #data th {
      padding: 2px;
    }
    

    Arguments

    The real power of mixins comes when you pass them arguments. Arguments are declared as a parenthesized, comma-separated list of variables.

    // SCSS
    @mixin rounded($side, $radius: 10px) {
      border-#{$side}-radius: $radius;
      -moz-border-radius-#{$side}: $radius;
      -webkit-border-#{$side}-radius: $radius;
    }
    #navbar li { @include rounded(top); }
    #footer { @include rounded(top, 5px); }
    #sidebar { @include rounded(left, 8px); }
    
    /* CSS */
    #navbar li {
      border-top-radius: 10px;
      -moz-border-radius-top: 10px;
      -webkit-border-top-radius: 10px; }
    #footer {
      border-top-radius: 5px;
      -moz-border-radius-top: 5px;
      -webkit-border-top-radius: 5px; }
    #sidebar {
      border-left-radius: 8px;
      -moz-border-radius-left: 8px;
      -webkit-border-left-radius: 8px; }
    

    Operations & Functions

    The standard math operations (+, -, *, /, and %) are supported for numbers, even those with units. For colors, there are all sorts of useful functions for changing the lightness, hue, saturation, and more.

    // SCSS
    #navbar {
      $navbar-width: 800px;
      $items: 5;
      $navbar-color: #ce4dd6;
    
      width: $navbar-width;
      border-bottom: 2px solid $navbar-color;
    
      li {
        float: left;
        width: $navbar-width/$items - 10px;
    
        background-color:
          lighten($navbar-color, 20%);
      }
    }
    
    /* CSS */
    #navbar {
      width: 800px;
      border-bottom: 2px solid #ce4dd6; }
      #navbar li {
        float: left;
        width: 150px;
        background-color: #e5a0e9; }
    

    What is Compass ?

    Compass is a collection of ready-made sass mixins and functions that can make sass a real framework to build on.
    Some of it's features :

    • Experience cleaner markup without presentational classes.
    • It’s chock full of the web’s best reusable patterns.
    • It makes creating sprites a breeze.
    • Compass mixins make CSS3 easy.
    • Create beautiful typographic rhythms.
    • Download and create extensions with ease.

     Sasson 

    Sasson is an advanced tool-kit
    for the advanced drupal themer.

    Sass compiler - built in !

    Sasson uses PHamlP to compile sass to CSS so there are no prior requirements, just install it and start writing sass.
    on 'Development mode', sass files will be recompiled on every page load and FireSass support is enabled.

    Mobile friendly

    Sasson gives you a responsive layout, which is completely configurable from your theme settings.

    HTML5

    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.
    html5shiv makes oldIEs play nicely.

    Flexible 960gs

    Grids are great, but with sass they are even better :

    // This is just like using 
    #sidebar-first {
      @include grid(4);
      @include alpha;
    }
    

    Our version of 960gs is fluid, so it will fit on smaller screens just as well.

    Drush support

    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"
    drush en mytheme
    drush vset theme_default mytheme
    

    You can have full control on the theme name and machine name with :

    drush sns "Full Name" machine_name

    Advanced style-sheets calls

    In your .info file you can set any option available to drupal_add_css() :

    Media - this is the minimum, it defines a stylesheet and associate a media query to it
    styles[styles/filename.scss][options][media] = screen and (min-width:400px)
    Weight - to re-order your stylesheets
    styles[styles/filename.scss][options][weight] = 1
    Browsers - conditional stylesheets, this will load it for IE7 or older
    styles[styles/filename.scss][options][browsers][IE] = lte IE 7
    styles[styles/filename.scss][options][browsers][!IE] = FALSE
    Recompile - to force the file to be recompiled on every page load
    styles[styles/filename.scss][options][recompile] = true

    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.

    Draggable overlay image

    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.

    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.

    File watcher

    See changes happen in real time. Sasson will automagically refresh your browser whenever you modify your stylesheets, or any other file, from a list of watched files.

     Mobile Drupal 

    There are many ways to adapt...

    Native apps

    Coded with a specific programming language (ObjectiveC for iOS, Java for Android). These mobile applications are fast, reliable, and powerful but are tied to a mobile platform. That means you must duplicate them using the appropriate programming language in order to target another mobile platform.
    Drupal ? not really, possibly a custom client that integrates with a Drupal based DB.

    Hybrid apps

    A hybrid app is a native, downloadable app, that runs all or some of its user interface in an embedded browser component.
    That means that the app is built with HTML, CSS and JavaScript, and then separately packaged for all platforms.
    Drupal ? possible. using frameworks like Sencha, PhoneGap and others you can creat a client that will talk to a Drupal data-base exposed by the Services module.

    Mobile site

    These are dedicated sites that were tailored to be viewed on mobile devices.
    The mobile site will look bad on a desktop, so at least two UI variations are needed here.
    Drupal ? Yes. With tools like Mobile Tools and Mobile Theme you can redirect mobile devices to a different domain and serve them the proper experience.
    Dedicated mobile themes :

    Responsive site

    One site to rule them all.
    Responsive sites are designed in a way that ensures they will look good on all platform, all browsers and all screen sizes.
    Drupal ? hell yeah, a good responsive theme should provide you with at least:

    • Media queries (and the "viewport" meta tag).
    • Fluid layout (or several fixed widths).
    • Content first layout.
    • Responsive menus.

    Which should I choose ?

    Device Access
    Development
    Costs
    App store
    discoverability
    Native App
    Full
    Expensive
    Available
    Good
    Hybrid App
    Full
    Reasonable
    Available
    Good
    Mobile Site
    Partial
    Reasonable
    Not Available
    Better
    Responsive
    Site
    Partial
    Reasonable
    Not Available
    Better

    Mobile first

    Mobile has traditionally been considered an afterthought, if at all. However the landscape has shifted and it is now vitally important.
    Luke Wroblewski, a strong proponent of the approach, identifies three key reasons:

    • Mobile is exploding
    • Mobile forces you to focus
    • Mobile extends your capabilities

    Focussing on the mobile platform forces the developer to prioritize the important things.

    Progressive enhancement

    One of the big conceptual advancements in web development in the last seven years has been a move away from “graceful degradation” towards progressive enhancement.
    Progressive enhancement describes a process of starting with the basics and then building up functionality for richer clients.
    Instead of designing for a rich client and taking away bits and pieces for simpler devices, we start with semantic HTML and the progressively add CSS, Javascript and other goodies which improve the content.

    Back