Widgets
CSS variables
Igloo uses CSS custom properties (variables) for all theme related styling.
Generated theme
When ever the theme node is saved, the
ig-theme.css is used as a template to create a new css file under /css/generated-themes/ Here you can see a generated theme css file.1
​
2
:root{
3
//Base
4
--white: #fff;
5
--black: #000;
6
​
7
// Theme
8
--theme: #3aa5ed;
9
--theme-rgb: 58, 165, 237; // rgb from --theme
10
--theme-darker: #148ee0; // 10% darken than --theme
11
--theme-contrast: #fff;
12
13
// Theme secondary
14
--theme-alt: #2ecc71;
15
--theme-alt-darker: #25a25a; // 10% darken than --theme-alt
16
--theme-alt-contrast: #fff;
17
​
18
// Dark
19
--heading-dark: #111;
20
--text-dark: #444;
21
--background-dark: #111;
22
--background-dark-lighter: #1b1b1b; // 5% lighter than --bakground-dark
23
--border-dark: rgba(0,0,0,0.08);
24
​
25
// Light
26
--heading-light: #fff;
27
--text-light: #fff;
28
--background-light: #f9f9f9;
29
--border-light: rgba(255,255,255,0.1);
30
​
31
// Header
32
--selected-nav-item: #3aa5ed;
33
--header-height: 70px;
34
--logo-padding: 24px;
35
--pre-top-height: 30px;
36
--top-combo-calc: calc(var(--header-height) + var(--pre-top-height));
37
--navigation-padding: 30px;
38
--navigation-font-size: 0.875rem;
39
--navigation-font-weight: bold;
40
​
41
// Grid
42
--grid-width-small: 850px;
43
--grid-width: 1300px;
44
--grid-width-big: 1600px;
45
--grid-gutter: 30px;
46
--grid-gutter-half: calc(var(--grid-gutter) / 2);
47
​
48
// Buttons
49
--button-border-radius: 4px;
50
​
51
// Typography
52
--body-font: "Roboto", sans-serif;
53
--heading-font: "Roboto", sans-serif;
54
55
--font-size: 1.1rem;
56
--font-size-big: 1.25rem;
57
--font-size-small: 0.75rem;
58
​
59
--body-line-height: 1.6;
60
61
--font-size-h1: 2.5rem;
62
--font-size-h2: 2.25rem;
63
--font-size-h3: 1.75rem;
64
--font-size-h4: 1.5rem;
65
--font-size-h5: 1.2rem;
66
--font-size-h6: 1rem;
67
--hero-heading: 3.75rem;
68
--heading-line-height: 1.5;
69
70
--font-weight-normal: normal;
71
--font-weight-light: 300;
72
--font-weight-bold: bold;
73
--font-weight-bolder: bolder;
74
75
--body-font-weight: normal;
76
--heading-font-weight: bold;
77
--text-big-font-weight: 300;
78
​
79
// Validation
80
--success: #2ecc71;
81
--error: #e74c3c;
82
​
83
@media @l{
84
--navigation-padding: 15px;
85
}
86
​
87
@media @m{
88
--header-height: 50px;
89
--grid-gutter: 20px;
90
--logo-padding: 15px;
91
--navigation-font-size: 1rem;
92
}
93
​
94
@media @s{
95
--grid-gutter: 15px;
96
--hero-heading: 2.5rem;
97
}
98
​
99
@media @xs{
100
--grid-gutter: 15px;
101
}
102
}
103
​
104
Copied!
CSS template file
Here you can see what the
ig-theme.css file looks like, values like {themeColor} are replaced with the value from the theme node in Umbraco. 1
:root {
2
/* Base */
3
--white: #fff;
4
--black: #000;
5
6
/* Theme */
7
--theme: {themeColor};
8
--theme-rgb: {themeColorRGB};
9
--theme-darker: {themeColorDarker};
10
--theme-contrast: {themeContrast};
11
​
12
/* Theme alt */
13
--theme-alt: {themeAltColor};
14
--theme-alt-darker: {themeAltColorDarker};
15
--theme-alt-contrast: {themeAltContrast};
16
17
/* Dark */
18
--heading-dark: {headingColorDark};
19
--text-dark: {textColorDark};
20
--background-dark: {darkBackground};
21
--background-dark-lighter: {darkBackgroundLighter};
22
--border-dark: {borderDark};
23
24
/* Light */
25
--heading-light: {headingColorLight};
26
--text-light: {textColorLight};
27
--background-light: {grayBackground};
28
--border-light: {borderLight};
29
30
/* Header */
31
--selected-nav-item: {selectedNavigationItem};
32
--header-height: {headerHeight};
33
--logo-padding: {logoPadding};
34
--pre-top-height: 30px;
35
--top-combo-calc: calc(var(--header-height) + var(--pre-top-height));
36
--navigation-padding: {navigationPadding};
37
--navigation-font-size: {navigationFontSize};
38
--navigation-font-weight: {navigationFontWeight};
39
40
/* Grid */
41
--grid-width-small: {gridWidthSmall};
42
--grid-width: {gridWidth};
43
--grid-width-big: {gridWidthBig};
44
--grid-gutter: {gridGutter};
45
--grid-gutter-half: calc(var(--grid-gutter) / 2);
46
47
/* Buttons */
48
--button-border-radius: {buttonBorderRadius};
49
50
/* Typography */
51
--body-font: {bodyFont};
52
--heading-font: {headingFont};
53
--font-size: {textFontSize};
54
--font-size-big: {textBigFontSize};
55
--font-size-small: {textSmallFontSize};
56
--body-line-height: {textLineHeight};
57
58
--font-size-h1: {heading1FontSize};
59
--font-size-h2: {heading2FontSize};
60
--font-size-h3: {heading3FontSize};
61
--font-size-h4: {heading4FontSize};
62
--font-size-h5: {heading5FontSize};
63
--font-size-h6: {heading6FontSize};
64
--hero-heading: {heroHeadingFontSize};
65
--heading-line-height: {headingLineHeight};
66
67
--font-weight-normal: normal;
68
--font-weight-light: 300;
69
--font-weight-bold: bold;
70
--font-weight-bolder: bolder;
71
72
--body-font-weight: {textFontWeight};
73
--heading-font-weight: {headingFontWeight};
74
--text-big-font-weight: {textBigFontWeight};
75
76
/* Validation */
77
--success: {success};
78
--error: {error};
79
}
80
@media only screen and (max-width: 1200px) {
81
:root {
82
--navigation-padding: {navigationPaddingSmallerScreens};
83
}
84
}
85
@media only screen and (max-width: 992px) {
86
:root {
87
--header-height: {headerHeightMobile};
88
--grid-gutter: {gridGutterMedium};
89
--logo-padding: {logoPaddingMobile};
90
--navigation-font-size: {navigationFontSizeMobile};
91
}
92
}
93
@media only screen and (max-width: 768px) {
94
:root {
95
--grid-gutter: {gridGutterSmall};
96
--hero-heading: {heroHeadingMobileFontSize};
97
}
98
}
99
@media only screen and (max-width: 480px) {
100
:root {
101
--grid-gutter: {gridGutterXS};
102
}
103
}
104
​
Copied!
Last modified 1yr ago
Copy link