1 | // Config
|
2 | // ––––––––––––––––––––
|
3 |
|
4 | // Set the root element for $enable-semantic-container and $enable-responsive-spacings
|
5 | $semantic-root-element: "body" !default;
|
6 |
|
7 | // Enable <header>, <main>, <footer> inside $semantic-root-element as containers
|
8 | $enable-semantic-container: false !default;
|
9 |
|
10 | // Enable .container and .container-fluid
|
11 | $enable-class-container: true !default;
|
12 |
|
13 | // Enable a centered viewport for <header>, <main>, <footer> inside $enable-semantic-container
|
14 | // Fluid layout if disabled
|
15 | $enable-viewport: true !default;
|
16 |
|
17 | // Enable responsive spacings for <header>, <main>, <footer>, <section>, <article>
|
18 | // Fixed spacings if disabled
|
19 | $enable-responsive-spacings: true !default;
|
20 |
|
21 | // Enable responsive typography
|
22 | // Fixed root element size if disabled
|
23 | $enable-responsive-typography: true !default;
|
24 |
|
25 | // Enable .classes
|
26 | // .classless version if disabled
|
27 | $enable-classes: true !default;
|
28 |
|
29 | // Enable .grid class
|
30 | $enable-grid: true !default;
|
31 |
|
32 | // Enable transitions
|
33 | $enable-transitions: true !default;
|
34 |
|
35 | // Enable overriding with !important
|
36 | $enable-important: true !default;
|
37 |
|
38 | // Responsive
|
39 | // ––––––––––––––––––––
|
40 |
|
41 | // xs: Extra small (portrait phones)
|
42 | // sm: Small(landscape phones)
|
43 | // md: Medium(tablets)
|
44 | // lg: Large(desktops)
|
45 | // xl: Extra large (large desktops)
|
46 |
|
47 | // NOTE:
|
48 | // To provide an easy and fine styling on each breakpoint
|
49 | // we didn't use @each, @mixin or @include.
|
50 | // That means you need to edit each CSS selector file to add a breakpoint
|
51 |
|
52 | // Breakpoints
|
53 | // 'null' disable the breakpoint
|
54 | $breakpoints: (
|
55 | xs: 0,
|
56 | sm: 576px,
|
57 | md: 768px,
|
58 | lg: 992px,
|
59 | xl: 1200px,
|
60 | ) !default;
|
61 |
|
62 | // Viewports
|
63 | $viewports: (
|
64 | // 'null' disable the viewport on a breakpoint
|
65 | sm: 510px,
|
66 | md: 700px,
|
67 | lg: 920px,
|
68 | xl: 1130px
|
69 | ) !default;
|