• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Sencha Touch Theming - /ch/open
 

Sencha Touch Theming - /ch/open

on

  • 1,826 views

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

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

Statistics

Views

Total Views
1,826
Views on SlideShare
1,824
Embed Views
2

Actions

Likes
0
Downloads
9
Comments
0

2 Embeds 2

http://paper.li 1
https://twitter.com 1

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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

Sencha Touch Theming - /ch/open Sencha Touch Theming - /ch/open Presentation Transcript

  • 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"]); $("span[foo=bar]");
  • 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 equal to"bar"
  • 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"
  • 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 (from the left) with "en"
  • :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 already visited(:visited)
  • 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 elementE~Fan F element preceded by an E element
  • 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; color : rgb(224,224,224); font-family : ChunkFive; text-shadow : none; -webkit-text-fill-color : transparent; -webkit-text-stroke : 3px rgb(133,29,25);}
  • 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);}
  • #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;}
  • .avatar { float: right; width: 73px; height: 73px; display: block; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
  • 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-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%);
  • 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%);
  • 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%);
  • 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%);
  • Sass• Variables• Nesting• Mixins• Inheritance
  • 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;} }
  • 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;} }
  • 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;}
  • 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; }
  • 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 / 4px; -o-border-radius: 4px / 4px; -ms-border-radius: 4px / 4px; -khtml-border-radius: 4px / 4px; border-radius: 4px / 4px; }
  • 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