blob: 3814c3f5255891f2d585a2bc9cbe7d8ad6c6f843 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
Thanks for helping out! 😇
### Raising an issue
* Make sure the issue hasn't been raised yet
* Include **screenshots** and animated GIFs in your issue whenever possible
### Submitting a Pull Request
* Include **screenshots** and animated GIFs in your pull request whenever possible
* Use the **present** tense ("Add feature" not "Added feature")
* Use the **imperative** mood ("Move cursor to..." not "Moves cursor to...")
* Limit the first line to 72 characters or fewer
* Reference issues and pull requests liberally
### Try your changes
When modifying any `.sass`, you will need to rebuild the css. You can do this by running:
```
npm install
npm run build
```
To see documentation changes check [the documentation readme](../docs/README.md).
### Bulma Sass styleguide
* **No semi-colons** `;` or **curly braces** `{` `}`
* **No camelCase**
* Use only **classes**
* Order the CSS properties **alphabetically**
* Order the CSS rule by
* direct styles
* nested tags
* pseudo-classes
* color modifiers
* size modifiers
* modifiers
* responsive styles
* Add appropriate one-line comments for each of these sections within a CSS rule
* **No trailing space**
* End files with a **newline**
```sass
.element
@extend .something
+mixin
property: value
span
// ...
div
// ...
.child
// ...
&:pseudo-class
// ...
// Colors
@each $name, $pair in $colors
// Loop
// Sizes
&.is-small
// ...
&.is-medium
// ...
&.is-large
// ...
// Modifiers (ordered alphabetically)
&.has-icons
// ...
&.is-active
// ...
&.is-fullwidth
// ...
// Responsiveness
+mobile
// ...
+tablet
// ...
+desktop
// ...
```
|
