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