├── .csscomb.json
├── .editorconfig
└── README.md
/.csscomb.json:
--------------------------------------------------------------------------------
1 | {
2 | "exclude": [
3 | "node_modules/**",
4 | "resources/assets/sass/front/utility/**"
5 | ],
6 | "always-semicolon": true,
7 | "block-indent": " ",
8 | "color-case": "lower",
9 | "color-shorthand": true,
10 | "element-case": "lower",
11 | "eof-newline": true,
12 | "leading-zero": false,
13 | "quotes": "single",
14 | "remove-empty-rulesets": true,
15 | "space-after-colon": " ",
16 | "space-after-combinator": " ",
17 | "space-after-opening-brace": "\n",
18 | "space-after-selector-delimiter": "\n",
19 | "space-before-closing-brace": "\n",
20 | "space-before-colon": "",
21 | "space-before-combinator": " ",
22 | "space-before-opening-brace": " ",
23 | "space-before-selector-delimiter": "",
24 | "space-between-declarations": "\n",
25 | "strip-spaces": true,
26 | "unitless-zero": true,
27 | "vendor-prefix-align": true,
28 | "sort-order-fallback": "abc",
29 | "sort-order": [
30 | [
31 | "$variable"
32 | ],
33 | [
34 | "$extend"
35 | ],
36 | [
37 | "$include"
38 | ],
39 | [
40 | "content",
41 | "box-sizing",
42 | "display",
43 | "flex",
44 | "flex-align",
45 | "flex-direction",
46 | "flex-grow",
47 | "flex-order",
48 | "flex-pack",
49 | "flex-shrink",
50 | "flex-wrap",
51 | "align-content",
52 | "align-items",
53 | "justify-content",
54 | "position",
55 | "top",
56 | "right",
57 | "bottom",
58 | "left",
59 | "width",
60 | "min-width",
61 | "max-width",
62 | "height",
63 | "min-height",
64 | "max-height",
65 | "clear",
66 | "clip",
67 | "float",
68 | "margin",
69 | "margin-top",
70 | "margin-right",
71 | "margin-bottom",
72 | "margin-left",
73 | "padding",
74 | "padding-top",
75 | "padding-right",
76 | "padding-bottom",
77 | "padding-left",
78 | "overflow",
79 | "overflow-x",
80 | "overflow-y",
81 | "vertical-align",
82 | "visibility",
83 | "zoom",
84 | "z-index"
85 | ],
86 | [
87 | "font",
88 | "font-family",
89 | "font-size",
90 | "font-size-adjust",
91 | "font-stretch",
92 | "font-style",
93 | "font-variant",
94 | "font-weight",
95 | "line-height",
96 | "font-smooth",
97 | "webkit-font-smoothing",
98 | "moz-osx-font-smoothing",
99 | "hyphens",
100 | "letter-spacing",
101 | "tab-size",
102 | "text-align",
103 | "text-align-last",
104 | "text-decoration",
105 | "text-indent",
106 | "text-justify",
107 | "text-outline",
108 | "text-rendering",
109 | "text-transform",
110 | "text-wrap",
111 | "text-overflow",
112 | "text-overflow-ellipsis",
113 | "text-overflow-mode",
114 | "white-space",
115 | "word-break",
116 | "word-spacing",
117 | "word-wrap",
118 | "counter-increment",
119 | "counter-reset",
120 | "list-style",
121 | "list-style-image",
122 | "list-style-position",
123 | "list-style-type"
124 | ],
125 | [
126 | "color",
127 | "background",
128 | "background-attachment",
129 | "background-clip",
130 | "background-color",
131 | "background-image",
132 | "background-origin",
133 | "background-position",
134 | "background-position-x",
135 | "background-position-y",
136 | "background-repeat",
137 | "background-size",
138 | "border",
139 | "border-collapse",
140 | "border-color",
141 | "border-style",
142 | "border-width",
143 | "border-top",
144 | "border-top-color",
145 | "border-top-style",
146 | "border-top-width",
147 | "border-right",
148 | "border-right-color",
149 | "border-right-style",
150 | "border-right-width",
151 | "border-bottom",
152 | "border-bottom-color",
153 | "border-bottom-style",
154 | "border-bottom-width",
155 | "border-left",
156 | "border-left-color",
157 | "border-left-style",
158 | "border-left-width",
159 | "border-radius",
160 | "border-top-left-radius",
161 | "border-top-right-radius",
162 | "border-bottom-right-radius",
163 | "border-bottom-left-radius",
164 | "border-image",
165 | "border-image-outset",
166 | "border-image-source",
167 | "border-image-repeat",
168 | "border-image-slice",
169 | "border-image-width",
170 | "border-spacing",
171 | "box-shadow",
172 | "opacity",
173 | "outline",
174 | "outline-width",
175 | "outline-style",
176 | "outline-color",
177 | "outline-offset",
178 | "text-shadow"
179 | ],
180 | [
181 | "animation",
182 | "animation-delay",
183 | "animation-direction",
184 | "animation-duration",
185 | "animation-iteration-count",
186 | "animation-name",
187 | "animation-play-state",
188 | "animation-timing-function",
189 | "transform",
190 | "transform-origin",
191 | "transform-origin-x",
192 | "transform-origin-y",
193 | "transition",
194 | "transition-delay",
195 | "transition-duration",
196 | "transition-property",
197 | "transition-timing-function",
198 | "cursor",
199 | "pointer-events",
200 | "quotes",
201 | "resize",
202 | "-webkit-user-select",
203 | "-moz-user-select",
204 | "-ms-user-select",
205 | "user-select"
206 | ],
207 | [
208 | "..."
209 | ],
210 | [
211 | "$include form-placeholder",
212 | "$include mq",
213 | "$include mq-smaller",
214 | "$include mq-wider",
215 | "$include mq-taller",
216 | "$include mq-higher"
217 | ]
218 | ],
219 | "verbose": true
220 | }
221 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | ; This file is for unifying the coding style for different editors and IDEs.
2 | ; More information at http://editorconfig.org
3 |
4 | root = true
5 |
6 | [*]
7 | charset = utf-8
8 | indent_size = 4
9 | indent_style = space
10 | end_of_line = lf
11 | insert_final_newline = true
12 | trim_trailing_whitespace = true
13 |
14 | [{package.json}]
15 | indent_size = 2
16 |
17 | [*.md]
18 | trim_trailing_whitespace = false
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | [](https://supportukrainenow.org)
3 |
4 | # CSS Style Guide
5 |
6 | A work in progress CSS style guide for our projects at [Spatie](https://spatie.be).
7 | We currently use SCSS, but principles are useable for other pre/postprocessors.
8 |
9 | Spatie is a webdesign agency in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).
10 |
11 | - [HTML](#html)
12 | - [CSS classes](#css-classes)
13 | - [SCSS syntax](#scss-syntax)
14 | - [File structure](#file-structure)
15 | - [Tools](#tools)
16 | - [Inspiration](#inspiration)
17 |
18 | ## Support us
19 |
20 | [
](https://spatie.be/github-ad-click/css-styleguide)
21 |
22 | We invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).
23 |
24 | We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).
25 |
26 | ## HTML
27 |
28 | - All styling is done by classes
29 | - Make elements easily reusable, moveable in a project, or between projects
30 | - Avoid #id's for styling
31 | - Avoid multiple components on 1 DOM-element
32 |
33 | ```html
34 |
35 |