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