Webinar - Building themes with Sass

General
1

embedyoutube=yNIQOfOwDGM

Today Thursday April 24th 2014 @ 3PM CET

Join Vaadin Designers Jouni Koivuviita and Marlon Richert for a Webinar on how to leverage Syntactically Awesome Style Sheets, or Sass, for building themes for Vaadin applications. You’ll learn what Sass is, both in general as well as specifically in Vaadin’s case.

2

Hi,

I would like to see how you would style a Button without importing reindeer.scss (if possible).
Coz I did import reindeer.scss into my button.scss & then tried to style my Button to my liking.
But appearantly, the compiled styles.css has some images/properties from reindeer.scss & seems to have overridden my changes.

Thanks & regards,
Asela (all the way from Sri Lanka)

3

HI,
Are you going to publish this Webinar somewhere on Youtube later ? I don`t have opportunity to see it online (at that time), but I want to see it later.

4

[…]
publish this Webinar later[…]
? +1 for that! I can’t attend due to intranet restrictions… Germany :frowning:

5

Hi,

yep, the live webinar will be available on-line later on - just stay tuned to this thread :wink:

6

Hi Asela,

I’m not following your question 100%. So do you want to use the complete Reindeer theme, but have a different looking button than the default one? Or are you building a completely new theme from scratch and want to use the Reindeer button style as a starting point, and modify it slightly?

7

Hi Jouni,

I would appreciate if you could show us how to create a new theme & use Reindeer button as a starting point, and modify it not slightly, but completely. (square edges instead of round edges, totally different colors for fonts & background… etc and most importantly, how the style applies when the button is pressed down, focus is gained & disabled)

Thanks & regards,
Asela.

8

Hi Jouni, Marlon,

I’m focused on front-end, and what I’ve been struggling with is how to populate common elements (like an accordion for instance) on a dummy document. Since, unlike a button, when you run the server, nothing shows up but a blank. How/what to do with those elements?

Thanks!

9

Hi all

I think Asela has an interesting question here. I tried to modify the reindeer button and got ok to about 70-80% of what I wanted but in the end when I tried to like change some colours and font sizes etc I just kept breaking the form of the button no matter what I tried. As Jouni said at the end of the webinar - not quite trivial.

Looking forward to Jouni’s and Marlon’s tips as “promised” at the end of the webinar.

Cheers
Keimo

10

So as Marlon and I mentioned during the webinar, you can take the Reindeer theme and remove the button styles from the compilation entirely.

So create a new Sass theme, and but this in your styles.scss file. It’s a full copy of the original reindeer.scss file, but the line which includes the button styles is commented out:

@import "../base/base.scss";

// common between others for now for backwards compatibility
@import "accordion/accordion.scss";
@import "a-sprite-definitions/a-sprite-definitions.scss";
@import "button/button.scss";
@import "button/nativebutton.scss";
@import "colorpicker/colorpicker.scss";

@import "common/common.scss";

@import "datefield/datefield.scss";
@import "inlinedatefield/inlinedatefield.scss";
@import "formlayout/formlayout.scss";
@import "label/label.scss";
@import "layouts/layouts.scss";
@import "link/link.scss";
@import "menubar/menubar.scss";
@import "notification/notification.scss";
@import "panel/panel.scss";
@import "popupview/popupview.scss";
@import "progressindicator/progressindicator.scss";
@import "select/select.scss";
@import "slider/slider.scss";
@import "splitpanel/splitpanel.scss";
@import "table/table.scss";
@import "tabsheet/tabsheet.scss";
@import "textfield/textfield.scss";
@import "tree/tree.scss";
@import "window/window.scss";

.v-generated-body {
    background: #f5f5f5;
}

$font-size: 12px;
$line-height: normal;

@mixin reindeer {
    @include base;
    // TODO @each

    @include reindeer-accordion;
    // TODO @include a-sprite-definitions;

    [b]
// @include reindeer-button;
[/b]

    @include reindeer-nativebutton;
    @include reindeer-colorpicker;
    @include reindeer-common;
    @include reindeer-datefield;
    @include reindeer-inlinedatefield;
    @include reindeer-formlayout;
    @include reindeer-label;
    @include reindeer-layouts;
    @include reindeer-link;
    @include reindeer-menubar;
    @include reindeer-notification;
    @include reindeer-panel;
    @include reindeer-popupview;
    @include reindeer-progressindicator(v-progressbar);
    /* For legacy ProgressIndicator component */
    @include reindeer-progressindicator(v-progressindicator);
    
    @include reindeer-select;
    @include reindeer-slider;
    @include reindeer-splitpanel;
    @include reindeer-table;
    @include reindeer-tabsheet;
    @include reindeer-textfield;
    @include reindeer-tree;
    @include reindeer-window;
}

Now you’re free to write your own button styles on top of the Base theme button styles. Here’s a template of selectors to get you started:

.v-button {
  // Normal button styles here


  &:hover {
    // Hover styles here
  }

  &:focus {
    // Focus styles here
  }

  &:active,
  &.v-pressed {
    // Active ("down/pressed") styles here
    // The additional 'v-pressed' class is for IE8
  }


  &.v-disabled {
    // The disabled styles

    &:hover {
      // Hover styles when the button is disabled
    }

    &:focus {
      // Focus styles when the button is disabled (this should not be necessary, since the button has tabIndex="-1")
    }

    &:active,
    &.v-pressed {
      // Active styles when the button is disabled
    }
  }

}

I hope you get started with that!

11

Also, the TodoMVC example app and themes can be found from GitHub:
TodoMVC