Skip to content

Commit 67106d8

Browse files
dima716dima716
committed
Code guide v1
1 parent 24d0b09 commit 67106d8

File tree

174 files changed

+1964
-820
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

174 files changed

+1964
-820
lines changed

‎app/css/chapter.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
@media (--viewport-large) {
2222
flex-direction: row;
23+
flex-wrap: wrap;
2324
}
2425
}
2526

@@ -55,3 +56,11 @@
5556
.gray-bgcolor {
5657
background-color: var(--light-subtle-color);
5758
}
59+
60+
.text-bold {
61+
font-weight: 800;
62+
}
63+
64+
.text-center {
65+
text-align: center;
66+
}

‎app/css/footer.css

Lines changed: 1 addition & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
footer {
22
padding: 2rem;
33

4-
background-color: var(--brand-color-dark);
4+
background-color: var(--subtle-color);
55
}
66

77
.contacts {
@@ -16,52 +16,3 @@ footer {
1616
width: 161px;
1717
}
1818

19-
.social-icons {
20-
display: flex;
21-
justify-content: space-between;
22-
align-items: center;
23-
margin: 0.5rem 0 1rem 0;
24-
}
25-
26-
.social-icons,
27-
.github {
28-
font-size: 0;
29-
}
30-
31-
.icon {
32-
min-width: 2rem;
33-
min-height: 2rem;
34-
35-
background-repeat: no-repeat;
36-
background-position: center;
37-
background-size: calc(100% - 5px);
38-
opacity: 0.5;
39-
40-
&:hover {
41-
opacity: 1;
42-
}
43-
44-
&-vk {
45-
background-image: resolve("icon-vkontakte.svg");
46-
}
47-
48-
&-fb {
49-
background-image: resolve("icon-facebook.svg");
50-
}
51-
52-
&-tw {
53-
background-image: resolve("icon-twitter.svg");
54-
}
55-
56-
&-ig {
57-
background-image: resolve("icon-instagram.svg");
58-
}
59-
}
60-
61-
.github-link {
62-
display: inline-block;
63-
width: 91px;
64-
height: 16px;
65-
66-
background-image: resolve("github.svg");
67-
}

‎app/css/general.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
*, *:before, *:after {
2+
box-sizing: inherit;
3+
}
4+
15
html {
26
font-size: var(--base-px-size);
7+
box-sizing: border-box;
38

49
@media (--viewport-large) {
510
font-size: var(--large-px-size);

‎app/css/header.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ header {
55

66
background-color: var(--brand-color);
77
background-image:
8-
repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px),
9-
repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px);
8+
repeating-linear-gradient(150deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06) 1px, transparent 0, transparent 41px),
9+
repeating-linear-gradient(-150deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.06) 1px, transparent 0, transparent 41px);
1010

1111
@media (--viewport-medium) {
1212
padding-bottom: 4rem;
@@ -15,7 +15,7 @@ header {
1515
h1 {
1616
margin: 0 0 0.25rem;
1717

18-
color: var(--light-color);
18+
color: var(--dark-color);
1919
}
2020

2121
p {
@@ -25,11 +25,11 @@ header {
2525
}
2626

2727
a:any-link {
28-
color: var(--light-color);
28+
color: var(--dark-color);
2929
}
3030
}
3131

3232
.logo {
33-
width: 300px;
34-
height: 300px;
33+
width: auto;
34+
height: auto;
3535
}

‎app/css/style.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "normalize.css";
22
@import "variables.css";
33

4-
@import "prismjs-default-theme/prism-default.css";
4+
@import "prismjs/themes/prism.css";
55

66
@import "general.css";
77
@import "prism.css";

‎app/css/variables.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
--base-px-size: 16px;
33
--large-px-size: calc(var(--base-px-size) * 1.25);
44

5-
--brand-color: #312785;
5+
--brand-color: #fff;
66
--brand-color-dark: #2d2d44;
77

88
--dark-color: #5a5a5a;

‎app/img/bane.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/img/github.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/img/icon-facebook.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/img/icon-instagram.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/img/icon-twitter.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/img/icon-vkontakte.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/img/logo-full.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/img/logo.png

13.7 KB
Loading

‎app/img/logo.svg

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎app/img/og.png

-50.6 KB
Binary file not shown.

‎app/js/app.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
import 'prismjs';
2+
import 'prismjs/components/prism-stylus.js';
3+
import 'prismjs/components/prism-jade.js';
4+
import 'prismjs/components/prism-javascript.js';
5+
import 'prismjs/components/prism-git.js';
6+

‎app/templates/index.hbs

Lines changed: 107 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,122 @@
11
<!DOCTYPE html>
22
<html lang="ru">
3-
<head>
3+
<head>
44
<meta charset="utf-8">
5-
<title>Стиль кода Академии HTML</title>
5+
<title>Стиль кода Aitarget</title>
66
<link rel="stylesheet" href="{{resolve 'style.css'}}">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<meta name="twitter:card" content="summary_large_image">
9-
<meta name="twitter:site" content="@htmlacademy_ru">
10-
<meta name="twitter:image" content="https://htmlacademy.github.io/codeguide/img/og.png">
11-
<meta property="og:type" content="website">
12-
<meta property="og:url" content="https://htmlacademy.github.io/codeguide/">
13-
<meta property="og:title" itemprop="name" content="Стиль кода Академии HTML">
14-
<meta property="og:image" itemprop="image" content="https://htmlacademy.github.io/codeguide/img/og.png">
15-
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-29640059-7','auto');ga('send','pageview');</script>
16-
</head>
17-
<body>
8+
</head>
9+
<body>
1810

19-
<main>
20-
{{~> header ~}}
11+
<main>
12+
{{~> header ~}}
2113

22-
<section class="chapter">
14+
<section class="chapter">
2315
<h2>Оглавление</h2>
2416
<article class="chapter-part">
25-
<div class="chapter-part-col">
26-
<h4>HTML</h4>
27-
<ul>
28-
<li><a href="#html-syntax">Синтаксис</a></li>
29-
<li><a href="#html-validator">Валидность</a></li>
30-
<li><a href="#html-doctype">HTML-доктайп</a></li>
31-
<li><a href="#html-encoding">Кодировка символов</a></li>
32-
<li><a href="#html-style-includes">Подключение стилей</a></li>
33-
<li><a href="#html-js-includes">Подключение скриптов</a></li>
34-
<li><a href="#html-attribute-order">Порядок атрибутов</a></li>
35-
<li><a href="#html-boolean">Логические атрибуты</a></li>
36-
<li><a href="#html-form-labels">Подписи полей ввода</a></li>
37-
<li><a href="#html-img-sizes">Размеры картинок</a></li>
38-
<li><a href="#html-language">Атрибут языка</a></li>
39-
</ul>
40-
</div>
41-
<div class="chapter-part-col">
42-
<h4>CSS</h4>
43-
<ul>
44-
<li><a href="#css-syntax">Синтаксис</a></li>
45-
<li><a href="#css-order">Порядок свойств</a></li>
46-
<li><a href="#css-class-names">Имена классов</a></li>
47-
<li><a href="#css-import">Правило @import</a></li>
48-
<li><a href="#css-font-variant">Варианты шрифта</a></li>
49-
</ul>
50-
</div>
17+
<div class="chapter-part-col">
18+
<h4>Jade</h4>
19+
<ul>
20+
<li><a href="#jade-classes-ids">Классы и идентификаторы пишутся в начале</a></li>
21+
<li><a href="#jade-comments">Комментарии</a></li>
22+
<li><a href="#jade-inline-elements">Строчные элементы</a></li>
23+
<li><a href="#jade-linewrapping">Перенос строки для однотипных блоков</a></li>
24+
<li><a href="#jade-long-lines">Длинные строки</a></li>
25+
<li><a href="#jade-mixins">Пиши меньше, делай больше</a></li>
26+
<li><a href="#jade-number-values">Числовые значения в аттрибутах</a></li>
27+
<li><a href="#jade-several-attributes">Несколько аттрибутов</a></li>
28+
<li><a href="#jade-single-attributes">Одиночные аттрибуты</a></li>
29+
<li><a href="#jade-single-quotes">Одиночные кавычки</a></li>
30+
<li><a href="#jade-unnecessary-attributes">Необязательные аттрибуты</a></li>
31+
<li><a href="#jade-include-partials">Подключение шаблонов</a></li>
32+
<li><a href="#jade-useful-links">Полезные ссылки</a></li>
33+
</ul>
34+
</div>
35+
<div class="chapter-part-col">
36+
<h4>Stylus</h4>
37+
<ul>
38+
<li><a href="#stylus-syntax">Синтаксис</a></li>
39+
<li><a href="#stylus-indentation">Отступы</a></li>
40+
<li><a href="#stylus-space-classes">Отступы между классами</a></li>
41+
<li><a href="#stylus-unnecessary-symbols">Использование ненужных символов</a></li>
42+
43+
<li><a href="#stylus-one-block">Один файл - один блок</a></li>
44+
<li><a href="#stylus-mixins-blocks">Свойства в примесях</a></li>
45+
<li><a href="#stylus-total">Итого</a></li>
46+
47+
<li><a href="#stylus-variables">Переменные</a></li>
48+
<li><a href="#stylus-problems">Возможные проблемы и пути их решения</a></li>
49+
<li><a href="#stylus-general-recomendations">Общие рекомедации</a></li>
50+
<li><a href="#stylus-useful-links">Полезные ссылки</a></li>
51+
</ul>
52+
</div>
53+
<div class="chapter-part-col">
54+
<h4>JavaScript</h4>
55+
<ul>
56+
<li><a href="#js-access-functions">Геттеры и сеттеры</a></li>
57+
<li><a href="#js-code-blocks">Блоки кода</a></li>
58+
<li><a href="#js-comments">Комментарии</a></li>
59+
<li><a href="#js-conditionals">Условные выражения и равенства</a></li>
60+
<li><a href="#js-constructors">Конструкторы</a></li>
61+
<li><a href="#js-copy-array">Копирование массива</a></li>
62+
<li><a href="#js-copy-array-like">Копирование похожего по свойствам на массив объект</a></li>
63+
<li><a href="#js-events">События</a></li>
64+
<li><a href="#js-functions">Функции</a></li>
65+
<li><a href="#js-key-words">Ключевые слова</a></li>
66+
<li><a href="#js-naming-conventions">Соглашение об именовании</a></li>
67+
<li><a href="#js-properties">Свойства</a></li>
68+
<li><a href="#js-reserved-words">Зарезервированные слова</a></li>
69+
<li><a href="#js-spaces">Пробелы</a></li>
70+
<li><a href="#js-strings">Строки</a></li>
71+
<li><a href="#js-syntax">Синтаксис</a></li>
72+
<li><a href="#js-variables">Переменные</a></li>
73+
</ul>
74+
</div>
75+
<div class="chapter-part-col">
76+
<h4>Angular</h4>
77+
<ul>
78+
<li><a href="#css-syntax">Структура папок</a></li>
79+
</ul>
80+
</div>
81+
<div class="chapter-part-col">
82+
<h4>Git</h4>
83+
<ul>
84+
<li><a href="#git-branch-naming">Наименование веток</a></li>
85+
</ul>
86+
</div>
5187
</article>
52-
</section>
88+
</section>
89+
90+
<section class="chapter">
91+
<h2>Jade</h2>
92+
{{~> jade/jade-rules ~}}
93+
{{~> jade/jade-recomendations ~}}
94+
</section>
95+
96+
<section class="chapter">
97+
<h2>Stylus</h2>
98+
{{~> stylus/stylus-rules ~}}
99+
{{~> stylus/stylus-recomendations ~}}
100+
</section>
101+
102+
<section class="chapter">
103+
<h2>JavaScript</h2>
104+
{{~> js/js-rules ~}}
105+
</section>
53106

54-
<section class="chapter">
55-
<h2>HTML</h2>
56-
{{~> html/html-rules ~}}
57-
</section>
107+
<section class="chapter">
108+
<h2>jQuery</h2>
109+
{{~> jquery/jquery-rules ~}}
110+
</section>
58111

59-
<section class="chapter">
60-
<h2>CSS</h2>
61-
{{~> css/css-rules ~}}
62-
</section>
112+
<section class="chapter">
113+
<h2>Git</h2>
114+
{{~> git/git-rules ~}}
115+
</section>
63116

64-
{{~> footer ~}}
65-
</main>
117+
{{~> footer ~}}
118+
</main>
66119

67-
<script src="{{resolve 'app.js'}}"></script>
68-
</body>
120+
<script src="{{resolve 'app.js'}}"></script>
121+
</body>
69122
</html>

‎app/templates/partials/angular/examples/jquery-cache-example.hbs

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* Плохо */
2+
function setSidebar() {
3+
$('#sidebar').hide();
4+
5+
// ...код...
6+
7+
$('#sidebar').css({
8+
backgroundColor: 'pink'
9+
});
10+
}
11+
12+
/* Хорошо */
13+
function setSidebar() {
14+
var $sidebar = $('#sidebar');
15+
$sidebar.hide();
16+
17+
// ...код...
18+
19+
$sidebar.css({
20+
backgroundColor: 'pink'
21+
});
22+
}

‎app/templates/partials/angular/examples/jquery-events-example.hbs

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/* Плохо */
2+
$input
3+
.click(function () { /* ... */ })
4+
.focus(function () { /* ... */ })
5+
.blur(function () { /* ... */ });
6+
7+
/* Хорошо */
8+
$input
9+
.on('click', function () { /* ... */ })
10+
.on('focus', function () { /* ... */ })
11+
.on('blur', function () { /* ... */ });
12+
13+
/* Лучше */
14+
// Несколько событий разделяются пробелами
15+
$field.on('click focus', function () { /* ... */ });
16+
17+
$input.on({
18+
// Несколько событий разделяются пробелами
19+
'click focus': function () { /* ... */ },
20+
blur: function () { /* ... */ }
21+
});

0 commit comments

Comments
 (0)