| 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
|
| 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 base font 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 validation states for <input>
|
| 27 | $enable-input-states: true !default;
|
| 28 |
|
| 29 | // Enable transitions for <a>, <button>, <input>
|
| 30 | $enable-transitions: true !default;
|
| 31 |
|
| 32 |
|
| 33 | // Spacings
|
| 34 | // ––––––––––––––––––––
|
| 35 |
|
| 36 | // Gutters and horizontals margins
|
| 37 | // For <body>, .grid, <nav>, <table>
|
| 38 | $spacing-gutter: 1rem !default;
|
| 39 |
|
| 40 | // Blocks verticals margins and paddings
|
| 41 | // For <header>, <main>, <footer>, <section>, <article>
|
| 42 | // This value is proportionally multiplied according breakpoints for great responsive spacings
|
| 43 | $spacing-block: 2rem !default;
|
| 44 |
|
| 45 | // Vertical margins for Typography and Form elements
|
| 46 | // This value is proportionally multiplied according breakpoints for great responsive spacings
|
| 47 | $spacing-typography: 1.5rem !default;
|
| 48 |
|
| 49 | // Padding for <input> and <button>
|
| 50 | $spacing-input-button: .75rem 1rem !default;
|
| 51 |
|
| 52 |
|
| 53 | // Typography
|
| 54 | // ––––––––––––––––––––
|
| 55 |
|
| 56 | // Sans serif native font stack
|
| 57 | $sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
| 58 | "Helvetica Neue", Arial, "Noto Sans", sans-serif,
|
| 59 | "Apple Color Emoji", "Segoe UI Emoji",
|
| 60 | "Segoe UI Symbol", "Noto Color Emoji" !default;
|
| 61 |
|
| 62 | // Monospace native font stack
|
| 63 | $monospace: SFMono-Regular, Menlo, Monaco, Consolas,
|
| 64 | "Liberation Mono", "Courier New", monospace !default;
|
| 65 |
|
| 66 | $line-height: 1.5 !default;
|
| 67 | $text-weight: 400 !default;
|
| 68 | $heading-weight: 700 !default;
|
| 69 |
|
| 70 |
|
| 71 | // Blocks
|
| 72 | // ––––––––––––––––––––
|
| 73 |
|
| 74 | // For <form> elements, <button>, <article>, <details> inlined code, tooltips
|
| 75 | $round: .25rem !default;
|
| 76 |
|
| 77 |
|
| 78 | // Transitions
|
| 79 | // ––––––––––––––––––––
|
| 80 |
|
| 81 | // For <a>, <form> elements and <button>
|
| 82 | $transition: .2s ease-in-out !default;
|
| 83 |
|
| 84 |
|
| 85 | // Responsive
|
| 86 | // ––––––––––––––––––––
|
| 87 |
|
| 88 | // xs: Extra small (portrait phones)
|
| 89 | // sm: Small(landscape phones)
|
| 90 | // md: Medium(tablets)
|
| 91 | // lg: Large(desktops)
|
| 92 | // xl: Extra large (large desktops)
|
| 93 |
|
| 94 | // NOTE:
|
| 95 | // To provide an easy and fine styling on each breakpoint
|
| 96 | // we didn't use @each, @mixin or @include.
|
| 97 | // That means you need to edit each CSS selector file to add a breakpoint
|
| 98 | // You can disable any viewports, base-font and spacing-factor with 'null'
|
| 99 |
|
| 100 | // Breakpoints
|
| 101 | // 'null' disable the breakpoint
|
| 102 | $breakpoints: (
|
| 103 | xs: 0,
|
| 104 | sm: 576px,
|
| 105 | md: 768px,
|
| 106 | lg: 992px,
|
| 107 | xl: 1200px
|
| 108 | ) !default;
|
| 109 |
|
| 110 | // Viewports
|
| 111 | $viewports: (
|
| 112 | // 'null' disable the viewport on a breakpoint
|
| 113 | sm: 510px,
|
| 114 | md: 700px,
|
| 115 | lg: 920px,
|
| 116 | xl: 1130px
|
| 117 | ) !default;
|
| 118 |
|
| 119 | // Base font for .rem
|
| 120 | // 'null' disable the base font on a breakpoint
|
| 121 | // 'xs' should not be 'null'
|
| 122 | $base-font: (
|
| 123 | xs: 16px,
|
| 124 | sm: 17px,
|
| 125 | md: 18px,
|
| 126 | lg: 19px,
|
| 127 | xl: 20px
|
| 128 | ) !default;
|
| 129 |
|
| 130 | // Multiplication factor for spacings
|
| 131 | // 'null' disable spacing factor on a breakpoint
|
| 132 | $spacing-factor: (
|
| 133 | xs: 1,
|
| 134 | sm: 1.25,
|
| 135 | md: 1.5,
|
| 136 | lg: 1.75,
|
| 137 | xl: 2
|
| 138 | ) !default;
|