Your SlideShare is downloading. ×
0
ThemingSencha Touch
• CSS3• SASS• Compass
CSS3• Selectors• Text shadow, fill, stroke• Rounded corners• Box shadows• Gradients
span[foo]a span element with a "foo" attribute
span[foo] <span foo="lalala">a span element with a "foo" attribute
span[foo="bar"]a span element whose "foo" attributevalue is exactly equal to "bar"
span[foo="bar"]a span element whose "foo" attributevalue is exactly equal to "bar"
span[foo="bar"]a span element whose "foo" attributevalue is exactly equal to "bar"        $(span[foo="bar"]);        $("sp...
span[foo="bar"]        <span foo="bar">a span element whose "foo" attributevalue is exactly equal to "bar"
span[foo~="bar"]a span element whose "foo" attributevalue is a list of whitespace-separatedvalues, one of which is exactly...
span[foo~="bar"] <span foo="bar baz">a span element whose "foo" attributevalue is a list of whitespace-separatedvalues, on...
span[foo^="bar"]a span element whose "foo" attributevalue begins exactly with the string "bar"
span[foo^="bar"]    <span foo="barbaz">a span element whose "foo" attributevalue begins exactly with the string "bar"
span[foo$="bar"]a span element whose "foo" attributevalue ends exactly with the string "bar"
span[foo$="bar"]     <span foo="bazbar">a span element whose "foo" attributevalue ends exactly with the string "bar"
span[foo*="bar"]a span element whose "foo" attributevalue contains the substring "bar"
span[foo*="bar"] <span foo="xxxbarxxx">a span element whose "foo" attributevalue contains the substring "bar"
span[foo|="en"] <span foo="en-bar">a span element whose "foo" attributehas a hyphen-separated list of valuesbeginning (fro...
:nth-child(n)the n-th child of its parent
:nth-child(n)the n-th child of its parent             table tr:nth-child(2n+1)
:nth-last-child(n)the n-th child of its parent, counting fromthe last one
:first-child:last-childfirst or last child of its parent
span:emptya span element that has no children(including text nodes)
a:linka:visitedan anchor element being the sourceanchor of a hyperlink of which the targetis not yet visited (:link) or al...
span:activespan:hoverspan:focusa span element during certain useractions
E:lang(fr)E:enabledE:disabledE:checkedE::first-lineE elementE::first-letterE::beforeE::afterE.warningE#myidE:not(s)
EFan F element descendant of an EelementE>Fan F element child of an E elementE+Fan F element immediately preceded byan E e...
h1 {       text-shadow : 0 5px 10px rgba(0,0,0,.5);}
em {       color: #FFF;       text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;}
p {      font-weight: 400;      text-shadow: 0 1px 1px #f8fcee;}
h1 {       margin : 0;       font-size : 10em;       font-weight : bold;       text-align : center;       line-height : 1;...
h1 {    margin : 0;    font-size : 10em;    font-weight : bold;    text-align : center;    line-height : 1;    color : rgb...
#example-03 {  width: 320px;  height: 215px;  margin-bottom: 40px;  padding: 10px;  background: transparent              u...
.avatar {    float: right;    width: 73px;    height: 73px;    display: block;    -moz-border-radius: 4px;    -webkit-bord...
box-shadow: 0 -5px 10px rgba(0, 0, 0, .5);
background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0.1, rgb(64,194,155)),    color-...
background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0.1, rgb(64,194,155)),    color-...
background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0.1, rgb(64,194,155)),    color-...
background-image: -webkit-gradient(    linear,    left bottom,    left top,    color-stop(0.1, rgb(64,194,155)),    color-...
Sass• Variables• Nesting• Mixins• Inheritance
Variables$blue: #3bbfce;           /* CSS */$margin: 16px;                          .content-navigation {.content-navigati...
Nestingtable.hl {               /* CSS */  margin: 2em 0;  td.ln {                table.hl {    text-align: right;     mar...
Mixins@mixin table-base {  th {                    /* CSS */    text-align: center;    font-weight: bold;    #data {  }   ...
Inheritance                       /* CSS */.error {  border: 1px #f00;    .error, .badError {  background: #fdd;      bord...
Color Magic• lighten• darken• saturate• desaturate• grayscale
Compass
@import “compass”
border-radius   mixin
.simple { @include border-radius(4px, 4px); }
.simple { @include border-radius(4px, 4px); }  .simple {    -webkit-border-radius: 4px 4px;    -moz-border-radius: 4px / 4...
Sencha builds onCompass builds on Sass
Included Themes   • iOS   • Android   • Blackberry   • Sencha
Installing Compasshttps://gist.github.com/1211383
Example App Sourcehttps://github.com/nelmio/techup-mobile
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Sencha Touch Theming - /ch/open
Upcoming SlideShare
Loading in...5
×

Sencha Touch Theming - /ch/open

1,567

Published on

Sencha Touch Theming Slides as given at /ch/open 2011. The CSS3 slides were stolen (with permission) from Pierre Spring.

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,567
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • CSS3: thanks to webkit\nSASS: syntactically awesome stylesheets, compiles to CSS\nCompass: css framework built on sass\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • not with empty string\n
  • \n
  • not with empty string\n
  • \n
  • not with empty string\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • horizontal offset\nvertical offset\nshadow blur radius\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • alpha channel\nopacity\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • radial gradients\n
  • \n
  • note: crazy math\n
  • \n
  • includable modules, like functions. can take arguments.\n
  • classes can extend other classes, all parent selectors are duplicated for the child class\nyou can override\n
  • there are lots of useful functions you can use\n
  • css framework built on sass\nwritten in ruby\ncommand line utility\n
  • supports pre-defined modules that you can use\nby default: CSS3, typography helpers, utilities\navailable: layout, reset\n
  • \n
  • \n
  • \n
  • \n
  • sencha = generic\n
  • \n
  • \n
  • build: javascript, php/symfony2\nconsulting: performance, security, symfony2\nlaunch: own products, techup.ch\n
  • Transcript of "Sencha Touch Theming - /ch/open"

    1. 1. ThemingSencha Touch
    2. 2. • CSS3• SASS• Compass
    3. 3. CSS3• Selectors• Text shadow, fill, stroke• Rounded corners• Box shadows• Gradients
    4. 4. span[foo]a span element with a "foo" attribute
    5. 5. span[foo] <span foo="lalala">a span element with a "foo" attribute
    6. 6. span[foo="bar"]a span element whose "foo" attributevalue is exactly equal to "bar"
    7. 7. span[foo="bar"]a span element whose "foo" attributevalue is exactly equal to "bar"
    8. 8. span[foo="bar"]a span element whose "foo" attributevalue is exactly equal to "bar" $(span[foo="bar"]); $("span[foo=bar]");
    9. 9. span[foo="bar"] <span foo="bar">a span element whose "foo" attributevalue is exactly equal to "bar"
    10. 10. span[foo~="bar"]a span element whose "foo" attributevalue is a list of whitespace-separatedvalues, one of which is exactly equal to"bar"
    11. 11. span[foo~="bar"] <span foo="bar baz">a span element whose "foo" attributevalue is a list of whitespace-separatedvalues, one of which is exactly equal to"bar"
    12. 12. span[foo^="bar"]a span element whose "foo" attributevalue begins exactly with the string "bar"
    13. 13. span[foo^="bar"] <span foo="barbaz">a span element whose "foo" attributevalue begins exactly with the string "bar"
    14. 14. span[foo$="bar"]a span element whose "foo" attributevalue ends exactly with the string "bar"
    15. 15. span[foo$="bar"] <span foo="bazbar">a span element whose "foo" attributevalue ends exactly with the string "bar"
    16. 16. span[foo*="bar"]a span element whose "foo" attributevalue contains the substring "bar"
    17. 17. span[foo*="bar"] <span foo="xxxbarxxx">a span element whose "foo" attributevalue contains the substring "bar"
    18. 18. span[foo|="en"] <span foo="en-bar">a span element whose "foo" attributehas a hyphen-separated list of valuesbeginning (from the left) with "en"
    19. 19. :nth-child(n)the n-th child of its parent
    20. 20. :nth-child(n)the n-th child of its parent table tr:nth-child(2n+1)
    21. 21. :nth-last-child(n)the n-th child of its parent, counting fromthe last one
    22. 22. :first-child:last-childfirst or last child of its parent
    23. 23. span:emptya span element that has no children(including text nodes)
    24. 24. a:linka:visitedan anchor element being the sourceanchor of a hyperlink of which the targetis not yet visited (:link) or already visited(:visited)
    25. 25. span:activespan:hoverspan:focusa span element during certain useractions
    26. 26. E:lang(fr)E:enabledE:disabledE:checkedE::first-lineE elementE::first-letterE::beforeE::afterE.warningE#myidE:not(s)
    27. 27. EFan F element descendant of an EelementE>Fan F element child of an E elementE+Fan F element immediately preceded byan E elementE~Fan F element preceded by an E element
    28. 28. h1 { text-shadow : 0 5px 10px rgba(0,0,0,.5);}
    29. 29. em { color: #FFF; text-shadow: 0 0 150px #FFF, 0 0 60px #FFF, 0 0 10px #FFF;}
    30. 30. p { font-weight: 400; text-shadow: 0 1px 1px #f8fcee;}
    31. 31. h1 { margin : 0; font-size : 10em; font-weight : bold; text-align : center; line-height : 1; color : rgb(224,224,224); font-family : ChunkFive; text-shadow : none; -webkit-text-fill-color : transparent; -webkit-text-stroke : 3px rgb(133,29,25);}
    32. 32. h1 { margin : 0; font-size : 10em; font-weight : bold; text-align : center; line-height : 1; color : rgb(224,224,224); font-family : ChunkFive; text-shadow : none; -webkit-text-fill-color : transparent; -webkit-text-stroke : 3px rgb(133,29,25);}
    33. 33. #example-03 { width: 320px; height: 215px; margin-bottom: 40px; padding: 10px; background: transparent url(assets/img/c04.jpg) no-repeat 0 0; border: 10px solid #646171; background-size: 100% 100%; -webkit-border-radius: 30px 200px; -moz-border-radius: 30px 200px; border-radius: 30px 200px;}
    34. 34. .avatar { float: right; width: 73px; height: 73px; display: block; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
    35. 35. box-shadow: 0 -5px 10px rgba(0, 0, 0, .5);
    36. 36. background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(64,194,155)), color-stop(0.55, rgb(90,233,186)), color-stop(0.78, rgb(117,255,224)));background-image: -moz-linear-gradient( center bottom, rgb(64,194,155) 10%, rgb(90,233,186) 55%, rgb(117,255,224) 78%);
    37. 37. background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(64,194,155)), color-stop(0.55, rgb(90,233,186)), color-stop(0.78, rgb(117,255,224)));background-image: -moz-linear-gradient( center bottom, rgb(64,194,155) 10%, rgb(90,233,186) 55%, rgb(117,255,224) 78%);
    38. 38. background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(64,194,155)), color-stop(0.55, rgb(90,233,186)), color-stop(0.78, rgb(117,255,224)));background-image: -moz-linear-gradient( center bottom, rgb(64,194,155) 10%, rgb(90,233,186) 55%, rgb(117,255,224) 78%);
    39. 39. background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.1, rgb(64,194,155)), color-stop(0.55, rgb(90,233,186)), color-stop(0.78, rgb(117,255,224)));background-image: -moz-linear-gradient( center bottom, rgb(64,194,155) 10%, rgb(90,233,186) 55%, rgb(117,255,224) 78%);
    40. 40. Sass• Variables• Nesting• Mixins• Inheritance
    41. 41. Variables$blue: #3bbfce; /* CSS */$margin: 16px; .content-navigation {.content-navigation { border-color: border-color: $blue; #3bbfce; color: color: #2b9eab; darken($blue, 9%); }} .border {.border { padding: 8px; padding: $margin / 2; margin: 8px; margin: $margin / 2; border-color: border-color: $blue; #3bbfce;} }
    42. 42. Nestingtable.hl { /* CSS */ margin: 2em 0; td.ln { table.hl { text-align: right; margin: 2em 0; } }} table.hl td.ln { text-align: right;li { } font: { family: serif; li { weight: bold; font-family: serif; size: 1.2em; font-weight: bold; } font-size: 1.2em;} }
    43. 43. Mixins@mixin table-base { th { /* CSS */ text-align: center; font-weight: bold; #data { } float: left; td, th {padding: 2px} margin-left: 10px;} } #data th {@mixin left($dist) { text-align: center; float: left; font-weight: bold; margin-left: $dist; }} #data td, #data th { padding: 2px;#data { } @include left(10px); @include table-base;}
    44. 44. Inheritance /* CSS */.error { border: 1px #f00; .error, .badError { background: #fdd; border: 1px #f00;} background: #fdd;.error.intrusion { } font-size: 1.3em; font-weight: bold; .error.intrusion,} .badError.intrusion { font-size: 1.3em;.badError { font-weight: bold; @extend .error; } border-width: 3px;} .badError { border-width: 3px; }
    45. 45. Color Magic• lighten• darken• saturate• desaturate• grayscale
    46. 46. Compass
    47. 47. @import “compass”
    48. 48. border-radius mixin
    49. 49. .simple { @include border-radius(4px, 4px); }
    50. 50. .simple { @include border-radius(4px, 4px); } .simple { -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; }
    51. 51. Sencha builds onCompass builds on Sass
    52. 52. Included Themes • iOS • Android • Blackberry • Sencha
    53. 53. Installing Compasshttps://gist.github.com/1211383
    54. 54. Example App Sourcehttps://github.com/nelmio/techup-mobile
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×