Theming and Sass

12,478 views

Published on

In introduction to using CSS3, Sass, and Compass to theme mobile (and desktop) web applications built with Sencha Touch and Ext JS 4.

Published in: Technology, Design
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,478
On SlideShare
0
From Embeds
0
Number of Embeds
63
Actions
Shares
0
Downloads
270
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Theming and Sass

  1. 1. James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com
  2. 2. Theming & Sass
  3. 3. It’s easy to forgetit’s all in a browser
  4. 4. CSS hopefullyneeds no introduction
  5. 5. <!DOCTYPE html><html> <head> <script src="sencha-touch.js" type="text/javascript"> </script> <link href="sencha-touch.css" type="text/css" rel="stylesheet" /> ...
  6. 6. div { background: #cc66ff;}
  7. 7. But CSS3 really rocks
  8. 8. div { background: rgba( 204, 102, 255, 0.5 );}
  9. 9. div { -webkit-border-radius: 10px;}
  10. 10. div { -webkit-box-shadow: 4px 4px 3px #000;}
  11. 11. div { text-shadow: 1px 1px 0px #fff;}
  12. 12. div { background-image: -webkit-gradient( linear, 0 0, 0 100%, from(#f77), to(#77f) );}
  13. 13. @font-­‐face  {    font-­‐family:  Consolas;    src:  url(consolas.woff);}div  {    font-­‐family:  Consolas;}  
  14. 14. Useful tools
  15. 15. http://sencha.com/x/bb
  16. 16. http://westciv.com/tools/gradients/
  17. 17. https://github.com/bluesmoon/pngtocss
  18. 18. http://www.google.com/webfonts
  19. 19. Sass and Compass
  20. 20. http://sass-lang.com/
  21. 21. Variables/* SCSS */ /* CSS */$blue: #3bbfce; .content-navigation {$margin: 16px; border-color: #3bbfce; color: #2b9eab;.content-navigation { } border-color: $blue; color: .border { darken($blue, 9%); padding: 8px;} margin: 8px; border-color: #3bbfce;.border { } padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
  22. 22. Functionsrgb($red, $green, $blue)lighten($color, $amount)complement($color)transparentize($color, $amount)...ceil($value)...if($condition, $if-true, $if-false)...
  23. 23. Nesting/* SCSS */ /* CSS */table.hl { table.hl { margin: 2em 0; margin: 2em 0; td.ln { } text-align: right; table.hl td.ln { } text-align: right;} }li { li { font: { font-family: serif; family: serif; font-weight: bold; weight: bold; font-size: 1.2em; size: 1.2em; } }}
  24. 24. Mixins/* SCSS */ /* CSS */@mixin table-base { #data { th { float: left; text-align: center; margin-left: 10px; font-weight: bold; } } #data th { td, th {padding: 2px} text-align: center;} font-weight: bold; }@mixin left($dist) { #data td, #data th { float: left; padding: 2px; margin-left: $dist; }}#data { @include left(10px); @include table-base;}
  25. 25. Selector Inheritance/* SCSS */ /* CSS */.error { .error, .badError { border: 1px #f00; border: 1px #f00; background: #fdd; background: #fdd;} }.error.intrusion { font-size: 1.3em; .error.intrusion, font-weight: bold; .badError.intrusion {} font-size: 1.3em; font-weight: bold;.badError { } @extend .error; border-width: 3px; .badError {} border-width: 3px; }
  26. 26. http://compass-style.org/
  27. 27. CSS3 Modules Appearance Font Face Background Clip GradientBackground Origin Images Background Size Inline Block Border Radius Opacity Box Text Shadow Box Shadow Transform Box Sizing Transition Columns
  28. 28. For example/* SCSS */div { @include border-radius(4px, 4px);}/* CSS */div { -webkit-border-radius: 4px 4px; -moz-border-radius: 4px / 4px; -o-border-radius: 4px / 4px; -ms-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px;}
  29. 29. Typography Links Text Lists Vertical Rhythm Utilities Color SpritesGeneral Tables ...
  30. 30. $> sudo gem install compass http://rubyinstaller.org/
  31. 31. $> compass -vCompass 0.11.1 (Antares)Copyright (c) 2008-2011 Chris EppsteinReleased under the MIT License.$> sass -vSass 3.1.1 (Brainy Betty)
  32. 32. $> compass create .directory sass/directory stylesheets/ create config.rb create sass/screen.scss create sass/print.scss create sass/ie.scss
  33. 33. $> compass compile sass/*
  34. 34. config.rb# Compass configurationssass_dir = "sass"css_dir = "stylesheets"output_style = :compressed# or :nested :expanded :compact
  35. 35. ThemingSencha Touch
  36. 36. config.rb # Get the directory that this # configuration file exists in dir = File.dirname(__FILE__) # Load the sencha-touch framework # automatically. load File.join(dir, .., themes) # Compass configurations sass_path = dir css_path = File.join(dir, "..", "css") environment = :production output_style = :compressed
  37. 37. sencha-touch.scss@import sencha-touch/default/all;@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;@include sencha-tabs;@include sencha-toolbar;@include sencha-toolbar-forms;@include sencha-carousel;@include sencha-indexbar;@include sencha-list;@include sencha-list-paging;@include sencha-list-pullrefresh;@include sencha-layout;@include sencha-form;@include sencha-msgbox;@include sencha-loading-spinner;
  38. 38. @import sencha-touch/default/all; @import widgets; @import widgets/toolbar; ... @mixin sencha-toolbar { .x-toolbar { overflow: hidden; position: relative; ...@include sencha-toolbar;...
  39. 39. An easy way to optimize
  40. 40. sencha-touch.scss@import sencha-touch/default/all;@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;@include sencha-tabs;@include sencha-toolbar;@include sencha-toolbar-forms;@include sencha-carousel;@include sencha-indexbar;@include sencha-list;@include sencha-list-paging;@include sencha-list-pullrefresh;@include sencha-layout;@include sencha-form;@include sencha-msgbox;@include sencha-loading-spinner;
  41. 41. 147433118233 (-20%)
  42. 42. sencha-touch.scss$include-default-icons: false;@import sencha-touch/default/all;@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;...
  43. 43. 14743364017 (-57%)
  44. 44. sencha-touch.scss$include-default-icons: false;@import sencha-touch/default/all;@include pictos-iconmask(action);@include sencha-panel;@include sencha-buttons;@include sencha-sheet;@include sencha-picker;...
  45. 45. Variables
  46. 46. apple.scss$base-color: #7c92ae;$base-gradient: glossy;$list-active-gradient: bevel;$list-header-bg-color: transparentize( saturate($base-color, 10%), .25);$list-header-gradient: matte;$tabs-dark: #111;@import sencha-touch/default/all;@include sencha-panel;@include sencha-buttons;...
  47. 47. _variables.scss$include-html-style: true; $base-color: #354F6E;$include-default-icons: true; $base-gradient: matte;$include-form-sliders: true; $alert-color: red;$include-floating-panels: true; $confirm-color: #92cf00;$include-default-uis: true; $page-bg-color: #eee;$include-highlights: true; $global-row-height: 2.6em;$include-border-radius: true; $active-color: darken( saturate($base-color, 55%),$basic-slider: false; 10%);
  48. 48. http://dev.sencha.com/deploy/touch/docs/theme/
  49. 49. $> compass watch .>>> Change detected to:seattlebars.scssoverwrite ./seattlebars.css>>> Compass is watching forchanges. Press Ctrl-C to Stop.
  50. 50. $base-color: #99ccaa;
  51. 51. @mixin color-by-background( $bg-color, $contrast: 100%) { @if (lightness($bg-color) > 50) { color: darken($bg-color, $contrast) } @else { color: lighten($bg-color, $contrast) }}
  52. 52. In action
  53. 53. https://github.com/ senchalearn/ seattlebars
  54. 54. ThemingExt JS 4
  55. 55. On the wayto Sass nirvana
  56. 56. ext-all.scss@import compass;@import ext4/default/all;
  57. 57. _all.scss@import functions;@import variables;@import mixins;@import core;@import layout/layout;@import util/tool;@import util/messagebox;@import util/splitter;@import util/resizable;@import util/dragdrop;@import util/scroller;@import util/focus;...
  58. 58. Variables
  59. 59. variables/_core.scss...$color: #000;$font-family:tahoma,arial,verdana,sans-serif;$font-size : 12px !default;$base-gradient: matte;$base-color : #C0D4ED;$neutral-color: #eeeeee;...
  60. 60. test.scss$base-color: #FF8000;$panel-header-font-size: 15px;@import compass;@import ext4/default/all;
  61. 61. Slicer$> sencha slice theme -d . -c resources/css/test.css -o ./test-images
  62. 62. Add these to your theme’s images directory
  63. 63. Chart theming
  64. 64. var chart = Ext.create( Ext.chart.Chart, { theme: Blue, ... });// Base, Green, Sky, Red,// Purple, Blue, Yellow...// or {}
  65. 65. CSS3Sass & Compass Sencha Touch Ext JS 4
  66. 66. James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com

×