Show More
@@ -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 |
|
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 |
|
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