2
3
4
5
6
— Легко поддерживать  7
— Легко поддерживать— Легко добавлять темы  8
— Легко поддерживать— Легко добавлять темы— Дешево добавлять темы  9
Независимые блоки10
/css       /blocks             /messages             ... 11
/css       /blocks             /messages             ...       /pages             main.css 12
Тема: 13
Тема:    — фоны 14
Тема:    — фоны    — цвета 15
Тема:    — фоны    — цвета    — шрифты 16
Тема:    — фоны    — цвета    — шрифты    — отступы, границы 17
Геометрия отдельно       от оформления18
/css       /blocks             /messages       /themes             /theme 19
/default     /messages 20
/default     /messages     default.scss 21
/default     /messages     default.scss     default.vars.scss  22
/default     /messages     default.scss     default.vars.scss/theme     theme.scss  23
/default      /messages      default.scss      default.vars.scss/theme      theme.scss   24      theme.vars.scss
SASS25
/css/blocks/messages/messages.scss.messages{      padding:20px;} 26
/css/blocks/messages/messages.scss.messages{      padding:20px;}/css/pages/mail.scss@import url(../messages/messages.scss)...
/css/themes/default/messages/messages.scss.messages{      background:$messages-background;} 28
/css/themes/default/messages/messages.scss.messages{background:$messages-background;}/css/blocks/default/default.scss@impo...
/css/themes/default/messages/messages.scss.messages{background:$messages-background;}/css/blocks/default/default.scss@impo...
/css/themes/theme/theme.vars.scss$messages-background: #FFF; 31
/css/themes/theme/theme.vars.scss$messages-background: #FFF;/css/themes/theme/theme.scss@import url(theme.vars.scss); 32
/css/themes/theme/theme.vars.scss$messages-background: #FFF;/css/themes/theme/theme.scss@import url(theme.vars.scss);@impo...
/css/pages/mail.css/css/themes/theme/theme.css 34
mixin35
36
url("data:image/…") repeat-x scroll 0 top,url("data:image/…") repeat-x scroll 0 bottom,url("data:image/…") repeat-y scroll...
38
none repeat scroll 0 0 white  39
background: url(...), url(..), color url(datauri)  40
background: color url(datauri);background: url(...), url(..), color url(datauri)  41
background: color url(datauri);background: url(...), url(..), color url(datauri)*background: color url(link)  42
.block {      background: $block--bg1, $block--bg2;} 43
.block {      background: $block--background;} 44
Списокcolor url() no-repeat left top  45
Двухуровневый списокurl() no-repeat left top,url() no-repeat left top,color url() no-repeat left top  46
Ключ47
фон как есть 48
фон как есть+ фолбэк на старые браузеры 49
фон как есть+ фолбэк на старые браузеры+ фолбэк на старых ИЕ 50
url(), color, <key>51
нет ключа 52
нет ключа--multiback  53
нет ключа--multiback--multiback-ie  54
@mixin multibackground($bgs){}    55
@mixin multibackground($bgs){    $flag: nth($bgs, length($bgs));}    56
@mixin multibackground($bgs){    $flag: nth($bgs, length($bgs));    @if $flag == "--multiback" {}}    57
@mixin multibackground($bgs){    $flag: nth($bgs, length($bgs));    @if $flag == "--multiback" {}    @else if $flag == "--...
@mixin multibackground($bgs){    $flag: nth($bgs, length($bgs));    @if $flag == "--multiback" {}    @else if $flag == "--...
@mixin multibackground($bgs){    $flag: nth($bgs, length($bgs));    @if $flag == "--multiback" {…}    @else if $flag == "-...
background: nth($bgs,length($bgs) - 1);@include _multiback($bgs, 1);  61
@mixin multibackground($bgs){    $flag: nth($bgs, length($bgs));    @if $flag == "--multiback" {}    @else if $flag == "--...
background: nth($bgs, length($bgs) - 2);@include _multiback($bgs, 2);*background: nth($bgs, length($bgs) - 1);  63
@mixin multibackground($bgs){    $flag: nth($bgs, length($bgs));    @if $flag == "--multiback" {}    @else if $flag == "--...
background: $bgs; 65
1666
Переключение тем67
deferred68
$.when(    AJAX.post(...),    switchThemeCss(themeId)); 69
Проверка загрузки70
jquery.getCSS71
id темы72
content font-family73
IE:content: undefinedfont-family: some_datacss data: some_data  74
content + font-family75
OPERAcontent: "some_data"font-family: "Times New Roman"css data: "some_data" 76
content + font-family77
function switchThemeCss (themeId){         var url = getThemeCssUrl(themeId);}    78
function switchThemeCss (themeId){         var url = getThemeCssUrl(themeId);         $.getCSS(url, function(link){ … });}...
function switchThemeCss (themeId){      var deferred = $.Deferred();      var url = getThemeCssUrl(themeId);      $.getCSS...
function switchThemeCss (themeId){      var deferred = $.Deferred();      var url = getThemeCssUrl(themeId);      $.getCSS...
if (getApplyedThemeId() !== oldThemeId){       $Theme.remove(); $Theme = $(link);       deferred.resolve();} else {       ...
Config83
t1026 : {     title : Роботы,     text : Поздравляем!} 84
t1036 : {     title : Легенда,     link : {              href: http://link.mail.ru/,              title: Играть!,         ...
Динамика86
setTimeout87
function chooseTheme(themeId){      var themeVariant = all,      switch (themeId) {…}         return themeVariant}    88
function chooseTheme(themeId){      var themeVariant = all,      switch (themeId) {…}         return themeVariant}    89
case t1032:     if (time >= 7 && time < 19){            themeVariant = "day";     } else {            themeVariant = "nigh...
var themeChoosed = chooseTheme(t1032);document.write(      <link href="t1032. + themeChoosed + .css"/>);  91
92
СПАСИБО!             Андрей СуминРуководитель разработки клиентской части           sumin@corp.mail.ru
сумин андрей
Upcoming SlideShare
Loading in...5
×

сумин андрей

1,076

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,076
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

сумин андрей

  1. 1. 2
  2. 2. 3
  3. 3. 4
  4. 4. 5
  5. 5. 6
  6. 6. — Легко поддерживать 7
  7. 7. — Легко поддерживать— Легко добавлять темы 8
  8. 8. — Легко поддерживать— Легко добавлять темы— Дешево добавлять темы 9
  9. 9. Независимые блоки10
  10. 10. /css /blocks /messages ... 11
  11. 11. /css /blocks /messages ... /pages main.css 12
  12. 12. Тема: 13
  13. 13. Тема: — фоны 14
  14. 14. Тема: — фоны — цвета 15
  15. 15. Тема: — фоны — цвета — шрифты 16
  16. 16. Тема: — фоны — цвета — шрифты — отступы, границы 17
  17. 17. Геометрия отдельно от оформления18
  18. 18. /css /blocks /messages /themes /theme 19
  19. 19. /default /messages 20
  20. 20. /default /messages default.scss 21
  21. 21. /default /messages default.scss default.vars.scss 22
  22. 22. /default /messages default.scss default.vars.scss/theme theme.scss 23
  23. 23. /default /messages default.scss default.vars.scss/theme theme.scss 24 theme.vars.scss
  24. 24. SASS25
  25. 25. /css/blocks/messages/messages.scss.messages{ padding:20px;} 26
  26. 26. /css/blocks/messages/messages.scss.messages{ padding:20px;}/css/pages/mail.scss@import url(../messages/messages.scss); 27
  27. 27. /css/themes/default/messages/messages.scss.messages{ background:$messages-background;} 28
  28. 28. /css/themes/default/messages/messages.scss.messages{background:$messages-background;}/css/blocks/default/default.scss@import url(messages/messages.scss); 29
  29. 29. /css/themes/default/messages/messages.scss.messages{background:$messages-background;}/css/blocks/default/default.scss@import url(messages/messages.scss); 30
  30. 30. /css/themes/theme/theme.vars.scss$messages-background: #FFF; 31
  31. 31. /css/themes/theme/theme.vars.scss$messages-background: #FFF;/css/themes/theme/theme.scss@import url(theme.vars.scss); 32
  32. 32. /css/themes/theme/theme.vars.scss$messages-background: #FFF;/css/themes/theme/theme.scss@import url(theme.vars.scss);@import url(../default/default.scss); 33
  33. 33. /css/pages/mail.css/css/themes/theme/theme.css 34
  34. 34. mixin35
  35. 35. 36
  36. 36. url("data:image/…") repeat-x scroll 0 top,url("data:image/…") repeat-x scroll 0 bottom,url("data:image/…") repeat-y scroll right top,url("data:image/…") repeat-y scroll 0 top,none repeat scroll 0 0 white 37
  37. 37. 38
  38. 38. none repeat scroll 0 0 white 39
  39. 39. background: url(...), url(..), color url(datauri) 40
  40. 40. background: color url(datauri);background: url(...), url(..), color url(datauri) 41
  41. 41. background: color url(datauri);background: url(...), url(..), color url(datauri)*background: color url(link) 42
  42. 42. .block { background: $block--bg1, $block--bg2;} 43
  43. 43. .block { background: $block--background;} 44
  44. 44. Списокcolor url() no-repeat left top 45
  45. 45. Двухуровневый списокurl() no-repeat left top,url() no-repeat left top,color url() no-repeat left top 46
  46. 46. Ключ47
  47. 47. фон как есть 48
  48. 48. фон как есть+ фолбэк на старые браузеры 49
  49. 49. фон как есть+ фолбэк на старые браузеры+ фолбэк на старых ИЕ 50
  50. 50. url(), color, <key>51
  51. 51. нет ключа 52
  52. 52. нет ключа--multiback 53
  53. 53. нет ключа--multiback--multiback-ie 54
  54. 54. @mixin multibackground($bgs){} 55
  55. 55. @mixin multibackground($bgs){ $flag: nth($bgs, length($bgs));} 56
  56. 56. @mixin multibackground($bgs){ $flag: nth($bgs, length($bgs)); @if $flag == "--multiback" {}} 57
  57. 57. @mixin multibackground($bgs){ $flag: nth($bgs, length($bgs)); @if $flag == "--multiback" {} @else if $flag == "--multiback-ie" {}} 58
  58. 58. @mixin multibackground($bgs){ $flag: nth($bgs, length($bgs)); @if $flag == "--multiback" {} @else if $flag == "--multiback-ie" {} @else {}} 59
  59. 59. @mixin multibackground($bgs){ $flag: nth($bgs, length($bgs)); @if $flag == "--multiback" {…} @else if $flag == "--multiback-ie" {} @else {}} 60
  60. 60. background: nth($bgs,length($bgs) - 1);@include _multiback($bgs, 1); 61
  61. 61. @mixin multibackground($bgs){ $flag: nth($bgs, length($bgs)); @if $flag == "--multiback" {} @else if $flag == "--multiback-ie" {…} @else {}} 62
  62. 62. background: nth($bgs, length($bgs) - 2);@include _multiback($bgs, 2);*background: nth($bgs, length($bgs) - 1); 63
  63. 63. @mixin multibackground($bgs){ $flag: nth($bgs, length($bgs)); @if $flag == "--multiback" {} @else if $flag == "--multiback-ie" {} @else {…}} 64
  64. 64. background: $bgs; 65
  65. 65. 1666
  66. 66. Переключение тем67
  67. 67. deferred68
  68. 68. $.when( AJAX.post(...), switchThemeCss(themeId)); 69
  69. 69. Проверка загрузки70
  70. 70. jquery.getCSS71
  71. 71. id темы72
  72. 72. content font-family73
  73. 73. IE:content: undefinedfont-family: some_datacss data: some_data 74
  74. 74. content + font-family75
  75. 75. OPERAcontent: "some_data"font-family: "Times New Roman"css data: "some_data" 76
  76. 76. content + font-family77
  77. 77. function switchThemeCss (themeId){ var url = getThemeCssUrl(themeId);} 78
  78. 78. function switchThemeCss (themeId){ var url = getThemeCssUrl(themeId); $.getCSS(url, function(link){ … });} 79
  79. 79. function switchThemeCss (themeId){ var deferred = $.Deferred(); var url = getThemeCssUrl(themeId); $.getCSS(url, function(link){ … }); return deferred;} 80
  80. 80. function switchThemeCss (themeId){ var deferred = $.Deferred(); var url = getThemeCssUrl(themeId); $.getCSS(url, function(link){ … }); return deferred.promise();} 81
  81. 81. if (getApplyedThemeId() !== oldThemeId){ $Theme.remove(); $Theme = $(link); deferred.resolve();} else { $(link).remove(); deferred.reject();} 82
  82. 82. Config83
  83. 83. t1026 : { title : Роботы, text : Поздравляем!} 84
  84. 84. t1036 : { title : Легенда, link : { href: http://link.mail.ru/, title: Играть!, target: _blank }} 85
  85. 85. Динамика86
  86. 86. setTimeout87
  87. 87. function chooseTheme(themeId){ var themeVariant = all, switch (themeId) {…} return themeVariant} 88
  88. 88. function chooseTheme(themeId){ var themeVariant = all, switch (themeId) {…} return themeVariant} 89
  89. 89. case t1032: if (time >= 7 && time < 19){ themeVariant = "day"; } else { themeVariant = "night"; } 90
  90. 90. var themeChoosed = chooseTheme(t1032);document.write( <link href="t1032. + themeChoosed + .css"/>); 91
  91. 91. 92
  92. 92. СПАСИБО! Андрей СуминРуководитель разработки клиентской части sumin@corp.mail.ru
  1. A particular slide catching your eye?

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

×