-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.scss
83 lines (75 loc) · 2.88 KB
/
style.scss
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
83
/* Example files how to organize CSS with the ITCSS methodology with WP specific adjustments */
/* Basics see: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ */
/**
* SETTINGS
* Fonts................Any font files, if the project needs specific fonts.
* Global...............Project-specific, globally available variables.
*
* TOOLS
* Breakpoints..........Mixin for breakpoints
* Mixins...............Global mixins.
*
* GENERIC
* Normalize.css........Normalise browser defaults.
* Box-sizing...........More manageable box-model.
*
* ELEMENTS
* Forms................Element-level form styling.
* Headings.............H1–H6
* Links................Default links.
* Lists................Default lists.
* Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video.
*
* BLOCKS
* Cover................Specific styles for the cover block.
* Group................Specific styles for the group block.
* Pullquote............Specific styles for the pullquote block.
*
* COMPONENTS
* Header...............Header styles.
* Footer...............Footer styles.
* Comments.............Comment styles.
* Blog archive.........Blog archive styles.
*
* UTILITIES
* A11y.................Screen reader text, prefers reduced motion etc.
* Color Palette........Classes for the color palette colors.
* Editor Font Sizes....Editor Font Sizes.
*
*/
/* Categories 01 to 03 are the basics. */
@import "01-settings/fonts";
@import "01-settings/global";
@import "02-tools/breakpoints";
@import "02-tools/mixins";
@import "03-generic/normalize";
@import "03-generic/box-sizing";
/* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */
@import "04-elements/body";
@import "04-elements/blockquote";
@import "04-elements/buttons";
@import "04-elements/forms";
@import "04-elements/headings";
@import "04-elements/hr";
@import "04-elements/links";
@import "04-elements/lists";
@import "04-elements/media";
@import "04-elements/misc";
@import "04-elements/paragraph";
@import "04-elements/tables";
/* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */
@import "05-blocks/cover";
@import "05-blocks/group";
@import "05-blocks/pullquote";
/* Category 06 contains all "bigger" components which contain elements of the previous two categories like header, footer, page template, single template, comments section, archives, ... */
@import "06-components/header";
@import "06-components/footer";
@import "06-components/page";
@import "06-components/single";
@import "06-components/archives";
@import "06-components/comments";
@import "07-components/navigation";
/* Category 07 is for any utility classes that are not assigned to a specific component. */
@import "07-utilities/a11y";
@import "07-utilities/color-palette";
@import "07-utilities/editor-font-sizes";