сумин андрей

2

3

4

5

6

7

— Легко поддерживать

8

— Легко поддерживать

— Легко добавлять темы

9

— Легко поддерживать

— Легко добавлять темы

— Дешево добавлять темы

10

Независимые блоки

11

/css

/blocks

/messages

...

12

/css

/blocks

/messages

...

/pages

main.css

13

Тема:

14

Тема:

— фоны

15

Тема:

— фоны

— цвета

16

Тема:

— фоны

— цвета

— шрифты

17

Тема:

— фоны

— цвета

— шрифты

— отступы, границы

18

Геометрия отдельно от оформления

19

/css

/blocks

/messages

/themes

/theme

20

/default

/messages

21

/default

/messages

default.scss

22

/default

/messages

default.scss

default.vars.scss

23

/default

/messages

default.scss

default.vars.scss

/theme

theme.scss

24

/default

/messages

default.scss

default.vars.scss

/theme

theme.scss

theme.vars.scss

25

SASS

26

/css/blocks/messages/messages.scss

.messages{

padding:20px;

}

27

/css/blocks/messages/messages.scss

.messages{

padding:20px;

}

/css/pages/mail.scss

@import url(../messages/messages.scss);

28

/css/themes/default/messages/messages.scss

.messages{

background:$messages-background;

}

29

/css/themes/default/messages/messages.scss

.messages{background:$messages-background;}

/css/blocks/default/default.scss

@import url(messages/messages.scss);

30

/css/themes/default/messages/messages.scss

.messages{background:$messages-background;}

/css/blocks/default/default.scss

@import url(messages/messages.scss);

31

/css/themes/theme/theme.vars.scss

$messages-background: #FFF;

32

/css/themes/theme/theme.vars.scss

$messages-background: #FFF;

/css/themes/theme/theme.scss

@import url(theme.vars.scss);

33

/css/themes/theme/theme.vars.scss

$messages-background: #FFF;

/css/themes/theme/theme.scss

@import url(theme.vars.scss);

@import url(../default/default.scss);

34

/css/pages/mail.css

/css/themes/theme/theme.css

35

mixin

36

37

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

38

39

none repeat scroll 0 0 white

40

background: url(...), url(..), color url(datauri)

41

background: color url(datauri);

background: url(...), url(..), color url(datauri)

42

background: color url(datauri);

background: url(...), url(..), color url(datauri)

*background: color url(link)

43

.block {

background: $block--bg1, $block--bg2;

}

44

.block {

background: $block--background;

}

45

Список

color url() no-repeat left top

46

Двухуровневый список

url() no-repeat left top,

url() no-repeat left top,

color url() no-repeat left top

47

Ключ

48

фон как есть

49

фон как есть

+ фолбэк на старые браузеры

50

фон как есть

+ фолбэк на старые браузеры

+ фолбэк на старых ИЕ

51

url(), color, <key>

52

нет ключа

53

нет ключа

--multiback

54

нет ключа

--multiback

--multiback-ie

55

@mixin multibackground($bgs){

}

56

@mixin multibackground($bgs){

$flag: nth($bgs, length($bgs));

}

57

@mixin multibackground($bgs){

$flag: nth($bgs, length($bgs));

@if $flag == "--multiback" {}

}

58

@mixin multibackground($bgs){

$flag: nth($bgs, length($bgs));

@if $flag == "--multiback" {}

@else if $flag == "--multiback-ie" {}

}

59

@mixin multibackground($bgs){

$flag: nth($bgs, length($bgs));

@if $flag == "--multiback" {}

@else if $flag == "--multiback-ie" {}

@else {}

}

60

@mixin multibackground($bgs){

$flag: nth($bgs, length($bgs));

@if $flag == "--multiback" {…}

@else if $flag == "--multiback-ie" {}

@else {}

}

61

background: nth($bgs,length($bgs) - 1);

@include _multiback($bgs, 1);

62

@mixin multibackground($bgs){

$flag: nth($bgs, length($bgs));

@if $flag == "--multiback" {}

@else if $flag == "--multiback-ie" {…}

@else {}

}

63

background: nth($bgs, length($bgs) - 2);

@include _multiback($bgs, 2);

*background: nth($bgs, length($bgs) - 1);

64

@mixin multibackground($bgs){

$flag: nth($bgs, length($bgs));

@if $flag == "--multiback" {}

@else if $flag == "--multiback-ie" {}

@else {…}

}

65

background: $bgs;

66

16

67

Переключение тем

68

deferred

69

$.when(

AJAX.post(...),

switchThemeCss(themeId)

);

70

Проверка загрузки

71

jquery.getCSS

72

id темы

73

content font-family

74

IE:

content: undefined

font-family: 'some_data'

css data: 'some_data'

75

content + font-family

76

OPERA

content: "some_data"

font-family: "Times New Roman"

css data: "some_data"

77

content + font-family

78

function switchThemeCss (themeId){

var url = getThemeCssUrl(themeId);

}

79

function switchThemeCss (themeId){

var url = getThemeCssUrl(themeId);

$.getCSS(url, function(link){ … });

}

80

function switchThemeCss (themeId){

var deferred = $.Deferred();

var url = getThemeCssUrl(themeId);

$.getCSS(url, function(link){ … });

return deferred;

}

81

function switchThemeCss (themeId){

var deferred = $.Deferred();

var url = getThemeCssUrl(themeId);

$.getCSS(url, function(link){ … });

return deferred.promise();

}

82

if (getApplyedThemeId() !== oldThemeId){

$Theme.remove(); $Theme = $(link);

deferred.resolve();

} else {

$(link).remove();

deferred.reject();

}

83

Config

84

t1026 : {

title : 'Роботы',

text : 'Поздравляем!'

}

85

t1036 : {

title : 'Легенда',

link : {

href: 'http://link.mail.ru/',

title: 'Играть!',

target: '_blank'

}

}

86

Динамика

87

setTimeout

88

function chooseTheme(themeId){

var themeVariant = 'all',

switch (themeId) {…}

return themeVariant

}

89

function chooseTheme(themeId){

var themeVariant = 'all',

switch (themeId) {…}

return themeVariant

}

90

case 't1032':

if (time >= 7 && time < 19){

themeVariant = "day";

} else {

themeVariant = "night";

}

91

var themeChoosed = chooseTheme('t1032');

document.write(

'<linkhref="t1032.' + themeChoosed + '.css"/>'

);

92

Андрей СуминРуководитель разработки клиентской части

sumin@corp.mail.ru

СПАСИБО!