Skip to content

Commit c4120ee

Browse files
author
James Kolce
committed
[fix: #241] Split globals file
So people have a clean settings file to copy into their projects. The _globals file should remain with it's contents since is the one used in add-ons.
1 parent fd23820 commit c4120ee

File tree

5 files changed

+198
-195
lines changed

5 files changed

+198
-195
lines changed

‎_globals.scss‎

Lines changed: 4 additions & 195 deletions
Original file line numberDiff line numberDiff line change
@@ -2,198 +2,7 @@
22
// Globals
33
// =============================================================================
44

5-
//
6-
// Helper functions
7-
// --------------------------------------------------
8-
9-
// Pow function, used in the type scale.
10-
@function pow($number, $exponent) {
11-
$value: 1;
12-
13-
@if $exponent > 0 {
14-
@for $i from 1 through $exponent {
15-
$value: $value * $number;
16-
}
17-
} @else if $exponent < 0 {
18-
@for $i from 1 through -$exponent {
19-
$value: $value / $number;
20-
}
21-
}
22-
23-
@return $value;
24-
}
25-
26-
//
27-
// Base
28-
// --------------------------------------------------
29-
30-
// Font size for small devices
31-
$font-size: 16 !default;
32-
33-
// Font size for big devices
34-
$font-size-secondary: 18 !default;
35-
36-
// Tracking
37-
$letter-spacing: 0.05em !default;
38-
39-
// Font families
40-
$font-primary: "Helvetica", "Arial", sans-serif !default;
41-
$font-secondary: "Helvetica", "Arial", sans-serif !default;
42-
$font-mono: "Consolas", monospace !default;
43-
$font-print-primary: "Georgia", "Times New Roman", "Times", serif !default;
44-
$font-print-secondary: "Georgia", "Times New Roman", "Times", serif !default;
45-
46-
// Enable margins to all the elements
47-
// except the first one in each nesting level
48-
$automargin: true !default;
49-
50-
// ^ How much margin for those elements
51-
$block-margin: 1lh !default;
52-
53-
// Transition duration
54-
$transition-duration: 150ms !default;
55-
56-
// Custom media queries
57-
// Use as @media (--medium) { … }
58-
@custom-media --extra-small (width <= 480px);
59-
@custom-media --small (width >= 480px);
60-
@custom-media --medium (width >= 768px);
61-
@custom-media --large (width >= 960px);
62-
@custom-media --extra-large (width >= 1100px);
63-
@custom-media --only-small (480px < width <= 768px);
64-
@custom-media --only-medium (768px < width <= 980px);
65-
@custom-media --only-large (980px < width <= 1100px);
66-
67-
// Spacing variables
68-
$spacing-xs: 0.5lh !default;
69-
$spacing-s: 1lh !default;
70-
$spacing-m: 2lh !default;
71-
$spacing-l: 3lh !default;
72-
$spacing-xl: 4lh !default;
73-
74-
//
75-
// Type Scale
76-
// --------------------------------------------------
77-
78-
// Suggested ratios
79-
// Source: http://type-scale.com/
80-
$_minor-second: 1.067 !default;
81-
$_major-second: 1.125 !default;
82-
$_minor-third: 1.200 !default;
83-
$_major-third: 1.250 !default;
84-
$_perfect-fourth: 1.333 !default;
85-
$_augmented-fourth: 1.414 !default;
86-
$_perfect-fifth: 1.500 !default;
87-
$_golden-ratio: 1.618 !default;
88-
89-
// Ratio for primary scale
90-
$scale-ratio: $_minor-third !default;
91-
92-
// Ratio for secondary scale
93-
$scale-ratio-secondary: $_perfect-fourth !default;
94-
95-
// Function to easily retrieve sizes from a scale.
96-
@function typeScale($size, $ratio: $scale-ratio) {
97-
@return pow($ratio, $size - 2) * 1rem;
98-
}
99-
100-
//
101-
// Grid
102-
// --------------------------------------------------
103-
104-
// Enable grid styles
105-
$enable-grid: true !default;
106-
107-
// Enable x-*, sm-*, md-*, lg-*, xl-* columns and offsets
108-
$full-grid: false !default;
109-
110-
// Max width for container
111-
$container-width: 1200px !default;
112-
113-
// Gutter size
114-
$gutter: 2rem !default;
115-
116-
// Number of columns in a row
117-
$num-columns: 12 !default;
118-
119-
// Prefix for attributes
120-
$prefix: '' !default;
121-
122-
// Create columns and offsets above this breakpoint
123-
$breakpoint: --small !default;
124-
125-
//
126-
// Color Palette
127-
// --------------------------------------------------
128-
// Use the getColor() function to use those values in
129-
// your stylesheets. Example: getColor(base, primary)
130-
131-
$colors: (
132-
base: (
133-
"primary": #C65146,
134-
"selection": #EBE1D3,
135-
"lines": #DCDCDC
136-
),
137-
138-
text: (
139-
"primary": #444,
140-
"secondary": #777,
141-
"heading": #222,
142-
"inverted": white
143-
),
144-
145-
background: (
146-
"dark": #32373d,
147-
"light": #f5f5f5,
148-
"body": white
149-
),
150-
151-
state: (
152-
"muted": #eee,
153-
"success": #10a887,
154-
"warning": #F17F42,
155-
"error": #da3c3c
156-
),
157-
158-
blue: (
159-
"darker": #1573b6,
160-
"dark": #1e80c6,
161-
"base": #2b90d9,
162-
"light": #3fa2e9,
163-
"lighter": #4eb1f9
164-
),
165-
166-
green: (
167-
"darker": #089073,
168-
"dark": #0b9d7d,
169-
"base": #10a887,
170-
"light": #1eb896,
171-
"lighter": #28ceaa
172-
),
173-
174-
red: (
175-
"darker": #653131,
176-
"dark": #b73333,
177-
"base": #da3c3c,
178-
"light": #f25a5a,
179-
"lighter": #fa8181
180-
),
181-
182-
gray: (
183-
"darker": #333333,
184-
"dark": #4d4d4d,
185-
"base": #666666,
186-
"light": #808080,
187-
"lighter": #999999
188-
)
189-
) !default;
190-
191-
//
192-
// getColor Function
193-
// --------------------------------------------------
194-
// Easily retrieve colors from the $colors map.
195-
//
196-
197-
@function getColor($color, $value: "base") {
198-
@return map-get(map-get($colors, $color), $value);
199-
}
5+
@import 'globals/pow-function';
6+
@import 'globals/settings';
7+
@import 'globals/getColor-function';
8+
@import 'globals/typeScale-function';

‎globals/_getColor-function.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
//
2+
// getColor Function
3+
// --------------------------------------------------
4+
// Easily retrieve colors from the $colors map.
5+
//
6+
7+
@function getColor($color, $value: "base") {
8+
@return map-get(map-get($colors, $color), $value);
9+
}

‎globals/_pow-function.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
//
2+
// Pow function
3+
// --------------------------------------------------
4+
5+
@function pow($number, $exponent) {
6+
$value: 1;
7+
8+
@if $exponent > 0 {
9+
@for $i from 1 through $exponent {
10+
$value: $value * $number;
11+
}
12+
} @else if $exponent < 0 {
13+
@for $i from 1 through -$exponent {
14+
$value: $value / $number;
15+
}
16+
}
17+
18+
@return $value;
19+
}

‎globals/_settings.scss‎

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
//
2+
// Base
3+
// --------------------------------------------------
4+
5+
// Font size for small devices
6+
$font-size: 16 !default;
7+
8+
// Font size for big devices
9+
$font-size-secondary: 18 !default;
10+
11+
// Tracking
12+
$letter-spacing: 0.05em !default;
13+
14+
// Font families
15+
$font-primary: "Helvetica", "Arial", sans-serif !default;
16+
$font-secondary: "Helvetica", "Arial", sans-serif !default;
17+
$font-mono: "Consolas", monospace !default;
18+
$font-print-primary: "Georgia", "Times New Roman", "Times", serif !default;
19+
$font-print-secondary: "Georgia", "Times New Roman", "Times", serif !default;
20+
21+
// Enable margins to all the elements
22+
// except the first one in each nesting level
23+
$automargin: true !default;
24+
25+
// ^ How much margin for those elements
26+
$block-margin: 1lh !default;
27+
28+
// Transition duration
29+
$transition-duration: 150ms !default;
30+
31+
// Custom media queries
32+
// Use as @media (--medium) { … }
33+
@custom-media --extra-small (width <= 480px);
34+
@custom-media --small (width >= 480px);
35+
@custom-media --medium (width >= 768px);
36+
@custom-media --large (width >= 960px);
37+
@custom-media --extra-large (width >= 1100px);
38+
@custom-media --only-small (480px < width <= 768px);
39+
@custom-media --only-medium (768px < width <= 980px);
40+
@custom-media --only-large (980px < width <= 1100px);
41+
42+
// Spacing variables
43+
$spacing-xs: 0.5lh !default;
44+
$spacing-s: 1lh !default;
45+
$spacing-m: 2lh !default;
46+
$spacing-l: 3lh !default;
47+
$spacing-xl: 4lh !default;
48+
49+
//
50+
// Type Scale
51+
// --------------------------------------------------
52+
53+
// Suggested ratios
54+
// Source: http://type-scale.com/
55+
$_minor-second: 1.067 !default;
56+
$_major-second: 1.125 !default;
57+
$_minor-third: 1.200 !default;
58+
$_major-third: 1.250 !default;
59+
$_perfect-fourth: 1.333 !default;
60+
$_augmented-fourth: 1.414 !default;
61+
$_perfect-fifth: 1.500 !default;
62+
$_golden-ratio: 1.618 !default;
63+
64+
// Ratio for primary scale
65+
$scale-ratio: $_minor-third !default;
66+
67+
// Ratio for secondary scale
68+
$scale-ratio-secondary: $_perfect-fourth !default;
69+
70+
//
71+
// Grid
72+
// --------------------------------------------------
73+
74+
// Enable grid styles
75+
$enable-grid: true !default;
76+
77+
// Enable x-*, sm-*, md-*, lg-*, xl-* columns and offsets
78+
$full-grid: false !default;
79+
80+
// Max width for container
81+
$container-width: 1200px !default;
82+
83+
// Gutter size
84+
$gutter: 2rem !default;
85+
86+
// Number of columns in a row
87+
$num-columns: 12 !default;
88+
89+
// Prefix for attributes
90+
$prefix: '' !default;
91+
92+
// Create columns and offsets above this breakpoint
93+
$breakpoint: --small !default;
94+
95+
//
96+
// Color Palette
97+
// --------------------------------------------------
98+
// Use the getColor() function to use those values in
99+
// your stylesheets. Example: getColor(base, primary)
100+
101+
$colors: (
102+
base: (
103+
"primary": #C65146,
104+
"selection": #EBE1D3,
105+
"lines": #DCDCDC
106+
),
107+
108+
text: (
109+
"primary": #444,
110+
"secondary": #777,
111+
"heading": #222,
112+
"inverted": white
113+
),
114+
115+
background: (
116+
"dark": #32373d,
117+
"light": #f5f5f5,
118+
"body": white
119+
),
120+
121+
state: (
122+
"muted": #eee,
123+
"success": #10a887,
124+
"warning": #F17F42,
125+
"error": #da3c3c
126+
),
127+
128+
blue: (
129+
"darker": #1573b6,
130+
"dark": #1e80c6,
131+
"base": #2b90d9,
132+
"light": #3fa2e9,
133+
"lighter": #4eb1f9
134+
),
135+
136+
green: (
137+
"darker": #089073,
138+
"dark": #0b9d7d,
139+
"base": #10a887,
140+
"light": #1eb896,
141+
"lighter": #28ceaa
142+
),
143+
144+
red: (
145+
"darker": #653131,
146+
"dark": #b73333,
147+
"base": #da3c3c,
148+
"light": #f25a5a,
149+
"lighter": #fa8181
150+
),
151+
152+
gray: (
153+
"darker": #333333,
154+
"dark": #4d4d4d,
155+
"base": #666666,
156+
"light": #808080,
157+
"lighter": #999999
158+
)
159+
) !default;

0 commit comments

Comments
 (0)