##// END OF EJS Templates
rhodecode-enterprise-ce
RSS
docs: adding grunt info
lisaq -
r304:85646c29 default
parent child Browse files
Show More
Show file before | Show file after | Hide comments
@@ -1,152 +1,153 b''
1
1
2 ==================================================
2 ==================================================
3 Code style and structure guide for frontend work
3 Code style and structure guide for frontend work
4 ==================================================
4 ==================================================
5
5
6 About: Outline of frontend development practices.
6 About: Outline of frontend development practices.
7
7
8
8
9
9
10
10
11 Templates
11 Templates
12 =========
12 =========
13
13
14 - Indent with 4 spaces in general.
14 - Indent with 4 spaces in general.
15
16 - Embedded Python code follows the same conventions as in the backend.
15 - Embedded Python code follows the same conventions as in the backend.
17
16
18 A common problem are missed spaces around operators.
17 A common problem is missed spaces around operators.
19
18
20
19
21
20
22
21
23 Grunt AND npm2nix
22 Grunt
24 =================
23 =====
25
24
26
25 We use Grunt to compile our JavaScript and LESS files. This is done automatically
27 ---something goes here ---
26 when you start an instance. If you are changing these files, however, it is
27 recommended to amend `--reload` to the `runserver` command, or use `grunt watch`
28 - the Gruntfile is located in the base directory. For more info on Grunt, see
29 http://gruntjs.com/
28
30
29
31
30
32
31
33
32 LESS CSS
34 LESS CSS
33 ========
35 ========
34
36
35
37
36 Style
38 Style
37 -----
39 -----
38
40
39 - Use 4 spaces instead of tabs.
41 - Use 4 spaces instead of tabs.
40
42 - Avoid ``!important``; it is very often an indicator for a problem.
41 - Avoid ``!important``, it is very often an indicator for a problem.
42
43
43
44
44
45
45
46
46 Structure
47 Structure
47 ---------
48 ---------
48
49
49 It is important that we maintain consistency in the LESS files so that things
50 It is important that we maintain consistency in the LESS files so that things
50 scale properly. CSS is organized using LESS and then compiled into a css file
51 scale properly. CSS is organized using LESS and then compiled into a CSS file
51 to be used in production. Find the class you need to change and change it
52 to be used in production. Find the class you need to change and change it
52 there. Do not add overriding styles at the end of the file. The LESS file will
53 there. Do not add overriding styles at the end of the file. The LESS file will
53 be minified; use plenty of spacing and comments for readability.
54 be minified; use plenty of spacing and comments for readability.
54
55
55 These will be kept in auxillary LESS files to be imported (in this order) at the top:
56 These will be kept in auxillary LESS files to be imported (in this order) at the top:
56
57
57 - `fonts.less` (font-face declarations)
58 - `fonts.less` (font-face declarations)
58 - `mixins` (place all LESS mixins here)
59 - `mixins` (place all LESS mixins here)
59 - `helpers` (basic classes for hiding mobile elements, centering, etc)
60 - `helpers` (basic classes for hiding mobile elements, centering, etc)
60 - `variables` (theme-specific colors, spacing, and fonts which might change later)
61 - `variables` (theme-specific colors, spacing, and fonts which might change later)
61
62
62
63
63 Sections of the primary LESS file are as follows. Add comments describing
64 Sections of the primary LESS file are as follows. Add comments describing
64 layout and modules.
65 layout and modules.
65
66
66 .. code-block:: css
67 .. code-block:: css
67
68
68 //--- BASE ------------------//
69 //--- BASE ------------------//
69 Very basic, sitewide styles.
70 Very basic, sitewide styles.
70
71
71 //--- LAYOUT ------------------//
72 //--- LAYOUT ------------------//
72 Essential layout, ex. containers and wrappers.
73 Essential layout, ex. containers and wrappers.
73 Do not put type styles in here.
74 Do not put type styles in here.
74
75
75 //--- MODULES ------------------//
76 //--- MODULES ------------------//
76 Reusable sections, such as sidebars and menus.
77 Reusable sections, such as sidebars and menus.
77
78
78 //--- THEME ------------------//
79 //--- THEME ------------------//
79 Theme styles, typography, etc.
80 Theme styles, typography, etc.
80
81
81
82
82
83
83 Formatting rules
84 Formatting rules
84 ~~~~~~~~~~~~~~~~
85 ~~~~~~~~~~~~~~~~
85
86
86 - Each rule should be indented on a separate line (this is helpful for diff
87 - Each rule should be indented on a separate line (this is helpful for diff
87 checking).
88 checking).
88
89
89 - Use a space after each colon and a semicolon after each last rule.
90 - Use a space after each colon and a semicolon after each last rule.
90
91
91 - Put a blank line between each class.
92 - Put a blank line between each class.
92
93
93 - Nested classes should be listed after the parent class' rules, separated with a
94 - Nested classes should be listed after the parent class' rules, separated with a
94 blank line, and indented.
95 blank line, and indented.
95
96
96 - Using the below as a guide, place each rule in order of its effect on content,
97 - Using the below as a guide, place each rule in order of its effect on content,
97 layout, sizing, and last listing minor style changes such as font color and
98 layout, sizing, and last listing minor style changes such as font color and
98 backgrounds. Not every possible rule is listed here; when adding new ones,
99 backgrounds. Not every possible rule is listed here; when adding new ones,
99 judge where it should go in the list based on that hierarchy.
100 judge where it should go in the list based on that hierarchy.
100
101
101 .. code-block:: scss
102 .. code-block:: scss
102
103
103 .class {
104 .class {
104 content
105 content
105 list-style-type
106 list-style-type
106 position
107 position
107 float
108 float
108 top
109 top
109 right
110 right
110 bottom
111 bottom
111 left
112 left
112 height
113 height
113 max-height
114 max-height
114 min-height
115 min-height
115 width
116 width
116 max-width
117 max-width
117 min-width
118 min-width
118 margin
119 margin
119 padding
120 padding
120 indent
121 indent
121 vertical-align
122 vertical-align
122 text-align
123 text-align
123 border
124 border
124 border-radius
125 border-radius
125 font-size
126 font-size
126 line-height
127 line-height
127 font
128 font
128 font-style
129 font-style
129 font-variant
130 font-variant
130 font-weight
131 font-weight
131 color
132 color
132 text-shadow
133 text-shadow
133 background
134 background
134 background-color
135 background-color
135 box-shadow
136 box-shadow
136 background-url
137 background-url
137 background-position
138 background-position
138 background-repeat
139 background-repeat
139 background-cover
140 background-cover
140 transitions
141 transitions
141 cursor
142 cursor
142 pointer-events
143 pointer-events
143
144
144 .nested-class {
145 .nested-class {
145 position
146 position
146 background-color
147 background-color
147
148
148 &:hover {
149 &:hover {
149 color
150 color
150 }
151 }
151 }
152 }
152 }
153 }
General Comments 0
You need to be logged in to leave comments. Login now