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