├── .browserslistrc ├── .editorconfig ├── .gitattributes ├── .gitignore ├── .lintstagedrc ├── .prettierrc ├── .stylelintignore ├── .stylelintrc ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── demo ├── index.html ├── scripts │ └── main.js └── scss │ ├── main.scss │ └── settings │ ├── _colors.scss │ └── _global.scss ├── package-lock.json ├── package.json └── scss ├── atomic-builder.scss ├── elements ├── _forms.scss ├── _headings.scss ├── _page.scss ├── _root.scss └── _tables.scss ├── generic ├── _box-sizing.scss ├── _normalize.scss ├── _reset.scss └── _shared.scss ├── objects ├── _container.scss └── _grid.scss ├── settings ├── _colors.scss └── _global.scss ├── tools ├── _functions.scss └── _mixins.scss └── utilities ├── _alignment.scss ├── _clear.scss ├── _colors.scss ├── _cursors.scss ├── _display.scss ├── _flex.scss ├── _float.scss ├── _helper.scss ├── _overflow.scss ├── _position.scss ├── _reset.scss ├── _sizing.scss ├── _spacing.scss ├── _text.scss └── _visibility.scss /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | Firefox ESR 4 | not dead 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | .cache 5 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "!(_normalize).scss": "stylelint --fix --max-warnings 0", 3 | "*.{md,html,js}": "prettier --write" 4 | } 5 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 120, 3 | "singleQuote": true, 4 | "trailingComma": "all", 5 | "proseWrap": "always" 6 | } 7 | -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | scss/generic/_normalize.scss 2 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "stylelint-config-sass-guidelines", 4 | "stylelint-config-rational-order", 5 | "stylelint-config-prettier" 6 | ], 7 | "plugins": ["stylelint-prettier"], 8 | "defaultSeverity": "warning", 9 | "rules": { 10 | "prettier/prettier": true, 11 | "scss/dollar-variable-pattern": null, 12 | "order/properties-alphabetical-order": null, 13 | "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\\\[.+\\\\])?(?:\\\\@[a-zA-Z0-9\\-]+)?$", 14 | "max-nesting-depth": 4 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making 6 | participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, 7 | disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, 8 | socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation. 9 | 10 | ## Our Standards 11 | 12 | Examples of behavior that contributes to creating a positive environment include: 13 | 14 | - Using welcoming and inclusive language 15 | - Being respectful of differing viewpoints and experiences 16 | - Gracefully accepting constructive criticism 17 | - Focusing on what is best for the community 18 | - Showing empathy towards other community members 19 | 20 | Examples of unacceptable behavior by participants include: 21 | 22 | - The use of sexualized language or imagery and unwelcome sexual attention or advances 23 | - Trolling, insulting/derogatory comments, and personal or political attacks 24 | - Public or private harassment 25 | - Publishing others' private information, such as a physical or electronic address, without explicit permission 26 | - Other conduct which could reasonably be considered inappropriate in a professional setting 27 | 28 | ## Our Responsibilities 29 | 30 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take 31 | appropriate and fair corrective action in response to any instances of unacceptable behavior. 32 | 33 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, 34 | issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any 35 | contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 36 | 37 | ## Scope 38 | 39 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the 40 | project or its community. Examples of representing a project or community include using an official project e-mail 41 | address, posting via an official social media account, or acting as an appointed representative at an online or offline 42 | event. Representation of a project may be further defined and clarified by project maintainers. 43 | 44 | ## Enforcement 45 | 46 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at 47 | [jonathan.levaillant@outlook.com](jonathan.levaillant@outlook.com). All complaints will be reviewed and investigated and 48 | will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated 49 | to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies 50 | may be posted separately. 51 | 52 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent 53 | repercussions as determined by other members of the project's leadership. 54 | 55 | ## Attribution 56 | 57 | This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org/), version 1.4, 58 | available at 59 | [https://www.contributor-covenant.org/version/1/4/code-of-conduct.html](https://www.contributor-covenant.org/version/1/4/code-of-conduct.html) 60 | 61 | For answers to common questions about this code of conduct, see 62 | [https://www.contributor-covenant.org/faq](https://www.contributor-covenant.org/faq) 63 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Jonathan Levaillant 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 6 | documentation files (the "Software"), to deal in the Software without restriction, including without limitation the 7 | rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit 8 | persons to whom the Software is furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the 11 | Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE 14 | WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 15 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 16 | OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 17 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Atomic Builder 2 | 3 | # Atomic Builder 4 | 5 | Atomic Builder is a lightweight and flexible CSS front-end framework based on [ITCSS](https://itcss.io/) architecture 6 | and built with [Sass](https://sass-lang.com/). 7 | 8 | Atomic Builder does its best to provide zero cosmetic styling. That means Atomic Builder can be used on any and all 9 | types of project without suggesting a look-and-feel. If you do require a UI out of the box, then Atomic Builder is 10 | probably not the best tool for you. I’d recommend looking at a UI Toolkit such as 11 | [Bootstrap](https://getbootstrap.com/). 12 | 13 | ## Browser support 14 | 15 | All modern browsers are supported (except Internet Explorer). 16 | 17 | ## Installation 18 | 19 | **You can use Atomic Builder in your project by installing it using a package manager (recommended):** 20 | 21 | [npm](https://www.npmjs.com/): 22 | 23 | ``` 24 | $ npm install atomic-builder 25 | ``` 26 | 27 | [yarn](https://yarnpkg.com/): 28 | 29 | ``` 30 | $ yarn add atomic-builder 31 | ``` 32 | 33 | **Copy/paste (not recommended):** 34 | 35 | You can download [Atomic Builder](https://github.com/jonathanlevaillant/atomic-builder/archive/master.zip) and save it 36 | into your project’s `css/` directory. This method is not recommended because you lose the ability to easily and quickly 37 | manage and update Atomic Builder as a dependency. 38 | 39 | ## Philosophy 40 | 41 | ### Architecture 42 | 43 | Atomic Builder follows a specific folder structure based on ITCSS, which you should follow as well in your own CSS 44 | directory: 45 | 46 | - `settings/`: Used with Sass and contain global variables, colors definitions, etc. 47 | - `tools/`: Globally used mixins and functions. 48 | - `generic/`: Reset and normalize styles. 49 | - `elements/`: Unclassed HTML elements (like `

`, ``, etc.). 50 | - `objects/`: Class-based selectors which define undecorated design patterns. 51 | - `components/`: Specific UI components. Because Atomic Builder does no cosmetic styling, it is up to you to author this 52 | layer. 53 | - `utilities/`: Helper classes with high-specificity. 54 | 55 | ### Methodology and namespaces 56 | 57 | Atomic Builder is written using [BEM](https://en.bem.info/methodology/) (Block, Element, Modifier) methodology for 58 | building component-based user interfaces. 59 | 60 | **It also provides some classes with specific namespace:** 61 | 62 | - `.o-`: Signify that something is an Object, and that it may be used in any number of unrelated contexts to the one you 63 | can currently see it in. 64 | - `.c-`: Signify that something is a Component. This is a concrete, implementation-specific piece of UI. 65 | - `.u-`: Signify that this class is a Utility class. It has very specific role and should not be bound onto or changed. 66 | It can be reused and is not tied to any specific piece of UI. 67 | 68 | Every class in either of these three directories (layers) gets the appropriate prefix in its class name. Be sure to 69 | follow this convention in your own code as well to keep a consistent naming convention across your code base. 70 | 71 | ## Getting started 72 | 73 | ### Importing 74 | 75 | As much as possible, avoid modifying Atomic Builder’s core files. The best way to do this is to import Atomic Builder’s 76 | source Sass files in your own project. 77 | 78 | **You have two options** : include all of Atomic Builder, or pick the parts you need. 79 | 80 | We encourage the latter, though be aware that `settings/` and `tools/` folders are required. 81 | 82 | ```scss 83 | // Settings (required) 84 | @import 'node_modules/atomic-builder/scss/settings/colors'; 85 | @import 'node_modules/atomic-builder/scss/settings/global'; 86 | 87 | // Tools (required) 88 | @import 'node_modules/atomic-builder/scss/tools/functions'; 89 | @import 'node_modules/atomic-builder/scss/tools/mixins'; 90 | 91 | // Generic (optional) 92 | @import 'node_modules/atomic-builder/scss/generic/normalize'; 93 | @import 'node_modules/atomic-builder/scss/generic/box-sizing'; 94 | @import 'node_modules/atomic-builder/scss/generic/reset'; 95 | @import 'node_modules/atomic-builder/scss/generic/shared'; 96 | 97 | // Elements (optional) 98 | @import 'node_modules/atomic-builder/scss/elements/root'; 99 | @import 'node_modules/atomic-builder/scss/elements/page'; 100 | @import 'node_modules/atomic-builder/scss/elements/heading'; 101 | @import 'node_modules/atomic-builder/scss/elements/forms'; 102 | @import 'node_modules/atomic-builder/scss/elements/tables'; 103 | 104 | // Objects (optional) 105 | @import 'node_modules/atomic-builder/scss/objects/grid'; 106 | @import 'node_modules/atomic-builder/scss/objects/container'; 107 | 108 | // Utilities (optional) 109 | @import 'node_modules/atomic-builder/scss/utilities/position'; 110 | @import 'node_modules/atomic-builder/scss/utilities/display'; 111 | @import 'node_modules/atomic-builder/scss/utilities/flex'; 112 | @import 'node_modules/atomic-builder/scss/utilities/alignment'; 113 | @import 'node_modules/atomic-builder/scss/utilities/float'; 114 | @import 'node_modules/atomic-builder/scss/utilities/clear'; 115 | @import 'node_modules/atomic-builder/scss/utilities/sizing'; 116 | @import 'node_modules/atomic-builder/scss/utilities/spacing'; 117 | @import 'node_modules/atomic-builder/scss/utilities/overflow'; 118 | @import 'node_modules/atomic-builder/scss/utilities/colors'; 119 | @import 'node_modules/atomic-builder/scss/utilities/text'; 120 | @import 'node_modules/atomic-builder/scss/utilities/visibility'; 121 | @import 'node_modules/atomic-builder/scss/utilities/cursors'; 122 | @import 'node_modules/atomic-builder/scss/utilities/reset'; 123 | @import 'node_modules/atomic-builder/scss/utilities/helper'; 124 | ``` 125 | 126 | ### Theming 127 | 128 | Every Sass variable in Atomic Builder includes the `!default` flag allowing you to override the variable’s default value 129 | in your own Sass file without modifying Atomic Builder’s source code. Your overrides must come before you import Atomic 130 | Builder’s setting files. 131 | 132 | You will find the complete list of Atomic Builder’s variables in 133 | [`scss/settings/_colors.scss`](https://github.com/jonathanlevaillant/atomic-builder/blob/master/scss/settings/_colors.scss) 134 | and 135 | [`scss/settings/_global.scss`](https://github.com/jonathanlevaillant/atomic-builder/blob/master/scss/settings/_global.scss). 136 | 137 | #### Overriding variable 138 | 139 | To modify an existing variable `$container-max-width`, add the following to your custom Sass file: 140 | 141 | ```scss 142 | $container-max-width: 96rem; 143 | ``` 144 | 145 | #### Overriding map 146 | 147 | To modify an existing key in our `$spacers` map, add the following to your custom Sass file: 148 | 149 | ```scss 150 | $spacers: ( 151 | 'base': 2rem, 152 | ); 153 | ``` 154 | 155 | To add a new key and value to `$spacers` map, add the following to your custom Sass file: 156 | 157 | ```scss 158 | $spacers: ( 159 | 'custom-spacer': 1rem, 160 | ); 161 | ``` 162 | 163 | To remove an existing key from `$spacers` map, add the following to your custom Sass file: 164 | 165 | ```scss 166 | $spacers: ( 167 | 'base': null, 168 | ); 169 | ``` 170 | 171 | ## Pro Tips 172 | 173 | Atomic builder also provides some features and tools that should be of great help to you. 174 | 175 | ### CSS Custom properties 176 | 177 | CSS custom properties allow you to store and retrieve values from properties you define yourself. 178 | 179 | They follow the same rules as other CSS properties, so you are able to define and use them at multiple levels, following 180 | standard CSS cascading and specificity rules. 181 | 182 | Atomic Builder includes CSS custom properties in it’s compiled CSS. These CSS custom properties are based on Atomic 183 | Builder’s variables in 184 | [`scss/settings/_colors.scss`](https://github.com/jonathanlevaillant/atomic-builder/blob/master/scss/settings/_colors.scss) 185 | and 186 | [`scss/settings/_global.scss`](https://github.com/jonathanlevaillant/atomic-builder/blob/master/scss/settings/_global.scss) 187 | and are generated in our 188 | [`scss/elements/_root.scss`](https://github.com/jonathanlevaillant/atomic-builder/blob/master/scss/elements/_root.scss) 189 | file. 190 | 191 | For example, this Sass map: 192 | 193 | ```scss 194 | $spacers: ( 195 | 'lg': 4.8rem, 196 | 'base': 2.4rem, 197 | 'sm': 1.2rem, 198 | ); 199 | ``` 200 | 201 | will automatically add these custom properties in the root element: 202 | 203 | ```scss 204 | :root { 205 | --spacer-lg: 4.8rem; 206 | --spacer-base: 2.4rem; 207 | --spacer-sm: 1.2rem; 208 | } 209 | ``` 210 | 211 | You can now retrieve these custom properties like this: 212 | 213 | ```scss 214 | .c-custom-component { 215 | margin: var(--spacer-base); 216 | padding: var(--spacer-sm); 217 | } 218 | ``` 219 | 220 | ### Responsive breakpoints 221 | 222 | You may have noticed that Atomic Builder provides a default map of breakpoint values: 223 | 224 | ```scss 225 | $breakpoints: ( 226 | 'phone': 47.9375em, 227 | 'tablet': 64em, 228 | ); 229 | ``` 230 | 231 | Like any other Atomic Builder’s variables, it is possible to override this Sass map to modify, add or remove some 232 | responsive breakpoint keys: 233 | 234 | ```scss 235 | $breakpoints: ( 236 | 'phone': null, 237 | 'tablet': null, 238 | 'sm': 47.9375em, 239 | ); 240 | ``` 241 | 242 | It is even possible to delete all responsive breakpoint keys if your website doesn’t require to be responsive: 243 | 244 | ```scss 245 | $breakpoints: (); 246 | ``` 247 | 248 | These responsive breakpoints are available via Sass mixin `@mixin media($keys...)` by adding optional suffixes: `-up` or 249 | `-down`. 250 | 251 | **It is important to note that the suffix `-up` is exclusive while the suffix `-down` is inclusive.** 252 | 253 | This Sass mixin with `($key)` name: 254 | 255 | ```scss 256 | @include media('tablet') { 257 | .c-custom-component { 258 | margin: var(--spacer-base); 259 | } 260 | } 261 | ``` 262 | 263 | will generate these responsive breakpoints: 264 | 265 | ```scss 266 | @media (max-width: 64em) and (min-width: 48em) { 267 | .c-custom-component { 268 | margin: var(--spacer-base); 269 | } 270 | } 271 | ``` 272 | 273 | This Sass mixin with `($key-up)` name: 274 | 275 | ```scss 276 | @include media('tablet-up') { 277 | .c-custom-component { 278 | margin: var(--spacer-base); 279 | } 280 | } 281 | ``` 282 | 283 | will generate this responsive breakpoint: 284 | 285 | ```scss 286 | @media (min-width: 64.0625em) { 287 | .c-custom-component { 288 | margin: var(--spacer-base); 289 | } 290 | } 291 | ``` 292 | 293 | This Sass mixin with `($key-down)` name: 294 | 295 | ```scss 296 | @include media('tablet-down') { 297 | .c-custom-component { 298 | margin: var(--spacer-base); 299 | } 300 | } 301 | ``` 302 | 303 | will generate this responsive breakpoint: 304 | 305 | ```scss 306 | @media (max-width: 64em) { 307 | .c-custom-component { 308 | margin: var(--spacer-base); 309 | } 310 | } 311 | ``` 312 | 313 | This Sass mixin with multiple `($key1, $key2)` names: 314 | 315 | ```scss 316 | @include media('phone', 'tablet-up') { 317 | .c-custom-component { 318 | margin: var(--spacer-base); 319 | } 320 | } 321 | ``` 322 | 323 | will generate these responsive breakpoints: 324 | 325 | ```scss 326 | @media (max-width: 47.9375em) { 327 | .c-custom-component { 328 | margin: var(--spacer-base); 329 | } 330 | } 331 | 332 | @media (min-width: 64.0625em) { 333 | .c-custom-component { 334 | margin: var(--spacer-base); 335 | } 336 | } 337 | ``` 338 | 339 | #### Summary table (Atomic Builder’s default settings) 340 | 341 | | Key | Phone | Tablet | Desktop | 342 | | ------------- | ----- | ------ | ------- | 343 | | `phone` | ✓ | ✗ | ✗ | 344 | | `tablet-down` | ✓ | ✓ | ✗ | 345 | | `tablet` | ✗ | ✓ | ✗ | 346 | | `phone-up` | ✗ | ✓ | ✓ | 347 | | `tablet-up` | ✗ | ✗ | ✓ | 348 | 349 | ### Grid system 350 | 351 | Atomic Builder includes a lightweight and fully responsive grid system built with flexbox. 352 | 353 | This grid system uses custom properties based on Atomic Builder’s variables in 354 | [`scss/settings/_global.scss`](https://github.com/jonathanlevaillant/atomic-builder/blob/master/scss/settings/_global.scss). 355 | (The following examples are based on 12-column grids.) 356 | 357 | To declare a grid, the syntax is really easy: 358 | 359 | ```html 360 |
361 |
Column one (auto)
362 |
Column two (auto)
363 |
364 | ``` 365 | 366 | By default, the columns are based on the width of their content, but it’s also possible to define a grid with regular 367 | column widths: 368 | 369 | ```html 370 |
371 |
1/2
372 |
1/2
373 |
374 | ``` 375 | 376 | ...or even with irregular column widths: 377 | 378 | ```html 379 |
380 |
1/3
381 |
2/3
382 |
383 | ``` 384 | 385 | Finally, to declare a responsive grid, just add a suffix based on breakpoint key name, as noted above, in the column 386 | class name: 387 | 388 | ```html 389 |
390 |
1/2 and 1/3 for tablets and desktops
391 |
1/2 and 2/3 for tablets and desktops
392 |
393 | ``` 394 | 395 | ## Contributing 396 | 397 | Please read [CONTRIBUTING.md](https://github.com/jonathanlevaillant/atomic-builder/blob/master/CONTRIBUTING.md) for 398 | details on our code of conduct, and the process for submitting pull requests to us. 399 | 400 | ## Versioning 401 | 402 | We use [SemVer](https://semver.org/) for versioning. For the versions available, see the 403 | [tags on this repository](https://github.com/jonathanlevaillant/atomic-builder/tags). 404 | 405 | ## Authors 406 | 407 | **Jonathan Levaillant** - _Initial work_ - [jonathanlevaillant](https://github.com/jonathanlevaillant). 408 | 409 | See also the list of [contributors](https://github.com/jonathanlevaillant/atomic-builder/graphs/contributors) who 410 | participated in this project. 411 | 412 | ## Licence 413 | 414 | This project is licensed under the MIT License - see the 415 | [LICENSE.md](https://github.com/jonathanlevaillant/atomic-builder/blob/master/LICENSE.md) file for details. 416 | 417 | ## Acknowledgement 418 | 419 | JoliCode 420 | 421 | Open Source time sponsored by JoliCode 422 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Atomic Builder Styleguide 7 | 8 | 9 |
10 |

Atomic Builder Styleguide

11 | 36 |
37 |

Colors

38 |
39 |
40 |
41 |
42 | primary
43 | #e91e63 44 |
45 |
46 |
47 |
48 | white
49 | #fff 50 |
51 |
52 |
53 |
54 | gray-100
55 | #f5f5f5 56 |
57 |
58 |
59 |
60 | gray-500
61 | #c0c0c0 62 |
63 |
64 |
65 |
66 | gray-900
67 | #696969 68 |
69 |
70 |
71 |
72 | black
73 | #000 74 |
75 |
76 |
77 |
78 |
79 |

Headings

80 |
81 |

Heading Level One

82 |

Heading Level Two

83 |

Heading Level Three

84 |

Heading Level Four

85 |
Heading Level Five
86 |
Heading Level Six
87 |
88 |
89 |

Font Stacks

90 |
91 |

Trebuchet MS 400

92 |

Trebuchet MS 700

93 |

Trebuchet MS 400 Italic

94 |

95 | Trebuchet MS 700 Italic 96 |

97 |
98 |
99 |

Text elements

100 |
101 |

This text snippet will be bold

102 |

This text snippet will be emphasized

103 |

This text snippet will be underlined

104 |

This text snippet will be strikedthrough

105 |

This text snippet will be small

106 |

This text snippet will be subscripted

107 |

This text snippet will be superscripted

108 |

This text snippet will be abbreviated

109 |

This text snippet will be highlighted

110 |

This text snippet will be an inline code sample

111 |
112 |
113 |

Paragraph

114 |
115 |

116 | A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a 117 | discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. 118 | Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, 119 | used to organize longer prose. 120 |

121 |
122 |
123 |

Lists

124 |
125 |

Unordered list

126 |
    127 |
  • List element one
    • 128 |
  • 129 | List element two 130 |
      131 |
    • 132 | Nested list element one 133 |
        134 |
      • Nested list element one
        • 135 |
      • Nested list element two
        • 136 |
      137 |
      • 138 |
    • List element two
      • 139 |
    140 |
    • 141 |
  • List element three
    • 142 |
  • List element four
    • 143 |
144 |

Ordered list

145 |
    146 |
  1. List element one
    2. 147 |
  2. 148 | List element two 149 |
      150 |
    1. Nested list element one
      2. 151 |
    2. Nested list element two
      3. 152 |
    153 |
    3. 154 |
  3. List element three
    4. 155 |
  4. List element four
    5. 156 |
157 |

Definition list

158 |
159 |
Definition term
160 |
Definition description
161 |
162 |
163 |
164 |

Grid

165 |
166 |

Regular column widths

167 |
168 |
169 |
1/1
170 |
171 |
172 |
173 |
174 |
1/2
175 |
176 |
177 |
1/2
178 |
179 |
180 |
181 |
182 |
1/3
183 |
184 |
185 |
1/3
186 |
187 |
188 |
1/3
189 |
190 |
191 |
192 |
193 |
1/4
194 |
195 |
196 |
1/4
197 |
198 |
199 |
1/4
200 |
201 |
202 |
1/4
203 |
204 |
205 |
206 |
207 |
1/6
208 |
209 |
210 |
1/6
211 |
212 |
213 |
1/6
214 |
215 |
216 |
1/6
217 |
218 |
219 |
1/6
220 |
221 |
222 |
1/6
223 |
224 |
225 |
226 |
227 |
1/12
228 |
229 |
230 |
1/12
231 |
232 |
233 |
1/12
234 |
235 |
236 |
1/12
237 |
238 |
239 |
1/12
240 |
241 |
242 |
1/12
243 |
244 |
245 |
1/12
246 |
247 |
248 |
1/12
249 |
250 |
251 |
1/12
252 |
253 |
254 |
1/12
255 |
256 |
257 |
1/12
258 |
259 |
260 |
1/12
261 |
262 |
263 |

Multiple rows within a single container

264 |
265 |
266 |
1/2
267 |
268 |
269 |
1/2
270 |
271 |
272 |
1/3
273 |
274 |
275 |
1/3
276 |
277 |
278 |
1/3
279 |
280 |
281 |
1/4
282 |
283 |
284 |
1/4
285 |
286 |
287 |
1/4
288 |
289 |
290 |
1/4
291 |
292 |
293 |

Irregular column widths

294 |
295 |
296 |
1/6
297 |
298 |
299 |
1/3
300 |
301 |
302 |
1/2
303 |
304 |
305 |
306 |
307 |
1/6
308 |
309 |
310 |
auto
311 |
312 |
313 |
1/6
314 |
315 |
316 |

Offsetting columns

317 |
318 |
319 |
1/3
320 |
321 |
322 |
1/4
323 |
324 |
325 |
1/6
326 |
327 |
328 |

Horizontal alignment

329 |
330 |
331 |
1/4
332 |
333 |
334 |
1/4
335 |
336 |
337 |
338 |
339 |
1/4
340 |
341 |
342 |
1/4
343 |
344 |
345 |
346 |
347 |
1/4
348 |
349 |
350 |
1/4
351 |
352 |
353 |
354 |
355 |
1/4
356 |
357 |
358 |
1/4
359 |
360 |
361 |
362 |
363 |
1/4
364 |
365 |
366 |
1/4
367 |
368 |
369 |
370 |
371 |
1/4
372 |
373 |
374 |
1/4
375 |
376 |
377 |

Vertical alignment

378 |
379 |
380 |
1/3
381 |
382 |
383 |
1/3
384 |
385 |
386 |
1/3
387 |
388 |
389 |

Custom grid gutters

390 |
391 |
392 |
1/4
393 |
394 |
395 |
1/4
396 |
397 |
398 |
1/4
399 |
400 |
401 |
1/4
402 |
403 |
404 |
405 |
406 |
1/4
407 |
408 |
409 |
1/4
410 |
411 |
412 |
1/4
413 |
414 |
415 |
1/4
416 |
417 |
418 |
419 |
420 |
1/4
421 |
422 |
423 |
1/4
424 |
425 |
426 |
1/4
427 |
428 |
429 |
1/4
430 |
431 |
432 |
433 |
434 |
1/4
435 |
436 |
437 |
1/4
438 |
439 |
440 |
1/4
441 |
442 |
443 |
1/4
444 |
445 |
446 |

Nested grids

447 |
448 |
449 |
450 | 3/4 451 |
452 |
453 |
2/3
454 |
455 |
456 |
1/3
457 |
458 |
459 |
460 |
461 |
462 |
1/4
463 |
464 |
465 |

Responsive grid

466 |
467 |
468 |
469 | 1/6 470 | 1/2 471 | 1/1 472 |
473 |
474 |
475 |
476 | 1/3 477 | 1/2 478 | 1/1 479 |
480 |
481 |
482 |
483 | 1/2 484 | 1/1 485 |
486 |
487 |
488 |
489 |
490 | 491 | 492 | 493 | -------------------------------------------------------------------------------- /demo/scripts/main.js: -------------------------------------------------------------------------------- 1 | import '../scss/main.scss'; 2 | -------------------------------------------------------------------------------- /demo/scss/main.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | DEMO 3 | ========================================================================== */ 4 | 5 | // Your variable overrides. 6 | @import 'settings/colors'; 7 | @import 'settings/global'; 8 | 9 | // Import Atomic Builder and its default variables. 10 | @import '../../scss/atomic-builder'; 11 | 12 | // Import helper classes from Atomic Builder. 13 | @import '../../scss/utilities/position'; 14 | @import '../../scss/utilities/display'; 15 | @import '../../scss/utilities/flex'; 16 | @import '../../scss/utilities/spacing'; 17 | @import '../../scss/utilities/colors'; 18 | @import '../../scss/utilities/text'; 19 | @import '../../scss/utilities/reset'; 20 | -------------------------------------------------------------------------------- /demo/scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | ///* ======================================================================== 2 | // #COLORS 3 | // ======================================================================== */ 4 | 5 | // Map of colors. 6 | $colors: ( 7 | 'primary': #e91e63, 8 | 'gray-100': #f5f5f5, 9 | 'gray-500': #c0c0c0, 10 | 'gray-900': #696969, 11 | ); 12 | -------------------------------------------------------------------------------- /demo/scss/settings/_global.scss: -------------------------------------------------------------------------------- 1 | ///* ======================================================================== 2 | // #GLOBAL 3 | // ======================================================================== */ 4 | 5 | // Map of font weights. 6 | $font-weights: ( 7 | 'bolder': 700, 8 | ); 9 | 10 | // Map of font sizes. 11 | $font-sizes: ( 12 | 'h1': ( 13 | 'tablet-up': ( 14 | 6.8rem, 15 | 1.3, 16 | ), 17 | 'tablet': ( 18 | 6.2rem, 19 | 1.4, 20 | ), 21 | 'phone': 5.8rem, 22 | ), 23 | 'h2': ( 24 | 'default': 5.1rem, 25 | 'phone': 4.8rem, 26 | ), 27 | 'h3': ( 28 | 'default': 3.8rem, 29 | 'phone': 3.6rem, 30 | ), 31 | 'sm': 1.4rem, 32 | ); 33 | 34 | // Map of font families. 35 | $font-families: ( 36 | 'base': "'Trebuchet MS', sans-serif", 37 | ); 38 | 39 | // Map of spacing values. 40 | $spacers: ( 41 | 'sm': 1.2rem, 42 | 'lg': 4.8rem, 43 | ); 44 | 45 | // Global settings of the container (max width and side margins). 46 | $container-side-margin: ( 47 | 'default': 4.8rem, 48 | 'tablet': 2.4rem, 49 | 'phone': 1.2rem, 50 | ); 51 | 52 | // Global settings of the grid (number of columns, column gap and row gap). 53 | $column-gap: ( 54 | 'phone': 1.2rem, 55 | ); 56 | 57 | // Parameters to enable or disable the responsive utility classes builders. 58 | $enable-responsive-display: true; 59 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "atomic-builder", 3 | "version": "8.3.1", 4 | "description": "Atomic Builder is a lightweight and flexible CSS front-end framework based on ITCSS architecture and built with Sass", 5 | "author": "Jonathan Levaillant (http://jonathanlevaillant.fr)", 6 | "license": "MIT", 7 | "engines": { 8 | "node": ">=10.0.0" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "https://github.com/jonathanlevaillant/atomic-builder.git" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/jonathanlevaillant/atomic-builder/issues", 16 | "email": "jonathan.levaillant@outlook.com" 17 | }, 18 | "keywords": [ 19 | "framework", 20 | "css", 21 | "sass", 22 | "bem", 23 | "itcss", 24 | "bemit", 25 | "responsive", 26 | "custom properties" 27 | ], 28 | "style": "dist/css/atomic-builder.css", 29 | "unpkg": "dist/css/atomic-builder.min.css", 30 | "files": [ 31 | "dist", 32 | "scss" 33 | ], 34 | "scripts": { 35 | "clean": "rimraf dist", 36 | "css": "node-sass --output-style expanded --source-map true scss/atomic-builder.scss dist/css/atomic-builder.css", 37 | "lint": "stylelint \"{scss,demo}/**/*.scss\"", 38 | "prefix": "postcss --map --use autoprefixer --replace dist/css/atomic-builder.css", 39 | "compile": "npm-run-all lint css prefix", 40 | "minify": "cleancss --source-map --source-map-inline-sources --output dist/css/atomic-builder.min.css dist/css/atomic-builder.css", 41 | "watch": "nodemon --watch scss --watch demo --ext scss --exec \"npm run lint\"", 42 | "serve": "parcel demo/index.html --open", 43 | "dev": "npm-run-all --parallel watch serve", 44 | "build": "npm-run-all clean compile minify", 45 | "prepare": "npm run build" 46 | }, 47 | "husky": { 48 | "hooks": { 49 | "pre-commit": "lint-staged" 50 | } 51 | }, 52 | "devDependencies": { 53 | "autoprefixer": "^10.0.2", 54 | "clean-css-cli": "^4.3.0", 55 | "husky": "^4.3.0", 56 | "lint-staged": "^10.5.1", 57 | "node-sass": "^5.0.0", 58 | "nodemon": "^2.0.6", 59 | "npm-run-all": "^4.1.5", 60 | "parcel-bundler": "^1.12.4", 61 | "postcss": "^8.1.7", 62 | "postcss-cli": "^8.3.0", 63 | "prettier": "^2.1.2", 64 | "rimraf": "^3.0.2", 65 | "stylelint": "^13.8.0", 66 | "stylelint-config-prettier": "^8.0.2", 67 | "stylelint-config-rational-order": "^0.1.2", 68 | "stylelint-config-sass-guidelines": "^7.1.0", 69 | "stylelint-prettier": "^1.1.2" 70 | }, 71 | "dependencies": {} 72 | } 73 | -------------------------------------------------------------------------------- /scss/atomic-builder.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | ATOMIC BUILDER 3 | ========================================================================== */ 4 | 5 | /** 6 | * Atomic Builder, by @jlwebart 7 | * 8 | * github.com/jonathanlevaillant/atomic-builder 9 | */ 10 | 11 | // Settings : Used with preprocessors and contain font, colors definitions, etc. 12 | @import 'settings/colors'; 13 | @import 'settings/global'; 14 | 15 | // Tools : Globally used mixins and functions. 16 | @import 'tools/functions'; 17 | @import 'tools/mixins'; 18 | 19 | // Generic : Reset and/or normalize styles, box-sizing definition, etc. 20 | @import 'generic/normalize'; 21 | @import 'generic/box-sizing'; 22 | @import 'generic/reset'; 23 | @import 'generic/shared'; 24 | 25 | // Elements : Styling for bare HTML elements (like h1, a, etc.). 26 | @import 'elements/root'; 27 | @import 'elements/page'; 28 | @import 'elements/headings'; 29 | @import 'elements/forms'; 30 | @import 'elements/tables'; 31 | 32 | // Objects : Class-based selectors which define undecorated design patterns. 33 | @import 'objects/grid'; 34 | @import 'objects/container'; 35 | 36 | // Utilities : Helper classes with ability to override all previous styles. 37 | -------------------------------------------------------------------------------- /scss/elements/_forms.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #FORMS 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | textarea { 9 | vertical-align: top; 10 | resize: vertical; 11 | } 12 | -------------------------------------------------------------------------------- /scss/elements/_headings.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #HEADINGS 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | h1 { 9 | font-size: var(--font-size-h1); 10 | line-height: var(--line-height-h1); 11 | } 12 | 13 | h2 { 14 | font-size: var(--font-size-h2); 15 | line-height: var(--line-height-h2); 16 | } 17 | 18 | h3 { 19 | font-size: var(--font-size-h3); 20 | line-height: var(--line-height-h3); 21 | } 22 | 23 | h4 { 24 | font-size: var(--font-size-h4); 25 | line-height: var(--line-height-h4); 26 | } 27 | 28 | h5 { 29 | font-size: var(--font-size-h5); 30 | line-height: var(--line-height-h5); 31 | } 32 | 33 | h6 { 34 | font-size: var(--font-size-h6); 35 | line-height: var(--line-height-h6); 36 | } 37 | -------------------------------------------------------------------------------- /scss/elements/_page.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #PAGE 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | /** 9 | * 1. Force scrollbars to always be visible to prevent awkward 'jumps' when 10 | * navigating between pages that do/do not have enough content to produce 11 | * scrollbars naturally. 12 | * 2. Set the html font-size to "10px", which is adapted to rem unit. 13 | * 3. IE and Chrome math fixing. 14 | * 4. Breaks words to prevent overflow in all browsers. 15 | * 5. Enable font smoothing. 16 | * 6. Ensure the page always fills at least the entire height of the viewport. 17 | */ 18 | 19 | html { 20 | overflow-y: scroll; /* 1 */ 21 | font-size: 62.5%; /* 2 */ 22 | font-size: calc(1em * 0.625); /* 3 */ 23 | word-break: break-word; /* 4 */ 24 | -webkit-font-smoothing: antialiased; /* 5 */ 25 | -moz-osx-font-smoothing: grayscale; /* 5 */ 26 | } 27 | 28 | body { 29 | min-height: 100vh; /* 6 */ 30 | font-weight: var(--font-weight-base); 31 | font-size: var(--font-size-base); 32 | font-family: var(--font-family-base); 33 | line-height: var(--line-height-base); 34 | } 35 | -------------------------------------------------------------------------------- /scss/elements/_root.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #ROOT 3 | ========================================================================== */ 4 | 5 | /* Variables & Custom properties 6 | ========================================================================== */ 7 | 8 | :root { 9 | /** 10 | * Custom properties for colors. 11 | */ 12 | 13 | @include var-colors; 14 | 15 | /** 16 | * Custom properties for typography. 17 | */ 18 | 19 | @include var-font-weights; 20 | @include var-font-sizes; 21 | @include var-font-families; 22 | 23 | /** 24 | * Custom properties for sizing values. 25 | */ 26 | 27 | @include var-sizing; 28 | 29 | /** 30 | * Custom properties for spacing values. 31 | */ 32 | 33 | @include var-spacing; 34 | 35 | /** 36 | * Custom properties for layout. 37 | */ 38 | 39 | @include var-container-max-width; 40 | @include var-container-side-margin; 41 | @include var-column-count; 42 | @include var-column-gap; 43 | @include var-row-gap; 44 | } 45 | -------------------------------------------------------------------------------- /scss/elements/_tables.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #TABLES 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | table { 9 | width: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /scss/generic/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #BOX-SIZING 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | html { 9 | box-sizing: border-box; 10 | } 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | box-sizing: inherit; 16 | } 17 | -------------------------------------------------------------------------------- /scss/generic/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /scss/generic/_reset.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #RESET 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | /** 9 | * Remove default margins. 10 | */ 11 | 12 | html, 13 | body, 14 | iframe, 15 | h1, 16 | h2, 17 | h3, 18 | h4, 19 | h5, 20 | h6, 21 | hr, 22 | p, 23 | blockquote, 24 | pre, 25 | ol, 26 | ul, 27 | li, 28 | dl, 29 | dt, 30 | dd, 31 | fieldset, 32 | legend, 33 | figure { 34 | margin: 0; 35 | padding: 0; 36 | } 37 | 38 | /** 39 | * Reset heading styles. 40 | */ 41 | 42 | h1, 43 | h2, 44 | h3, 45 | h4, 46 | h5, 47 | h6 { 48 | font-weight: normal; 49 | font-size: 100%; 50 | } 51 | 52 | /** 53 | * Remove default table spacing. 54 | */ 55 | 56 | table { 57 | border-collapse: collapse; 58 | border-spacing: 0; 59 | } 60 | 61 | /** 62 | * Remove default spacing between table cells. 63 | */ 64 | 65 | td, 66 | th { 67 | padding: 0; 68 | } 69 | 70 | /** 71 | * Remove default border on fieldsets. 72 | */ 73 | 74 | fieldset { 75 | border: 0; 76 | } 77 | 78 | /** 79 | * Correct the text style of placeholders. 80 | */ 81 | 82 | ::placeholder { 83 | color: inherit; 84 | opacity: 1; 85 | } 86 | 87 | /** 88 | * Remove default iframe border. 89 | */ 90 | 91 | iframe { 92 | border: 0; 93 | } 94 | 95 | /** 96 | * Remove the text style of addresses. 97 | */ 98 | 99 | address { 100 | font-style: normal; 101 | } 102 | 103 | /** 104 | * Remove the tapping delay on clickable elements. 105 | */ 106 | 107 | a, 108 | area, 109 | button, 110 | input, 111 | label, 112 | select, 113 | summary, 114 | textarea, 115 | [tabindex] { 116 | touch-action: manipulation; 117 | } 118 | -------------------------------------------------------------------------------- /scss/generic/_shared.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #SHARED 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | /** 9 | * Add `min-width: 0` and `min-height: 0` to all elements 10 | */ 11 | 12 | *, 13 | *::before, 14 | *::after { 15 | min-width: 0; 16 | min-height: 0; 17 | } 18 | 19 | /** 20 | * Always declare margins in the same direction. 21 | */ 22 | 23 | h1, 24 | h2, 25 | h3, 26 | h4, 27 | h5, 28 | h6, 29 | hr, 30 | p, 31 | blockquote, 32 | pre, 33 | address, 34 | ol, 35 | ul, 36 | dl, 37 | fieldset, 38 | table, 39 | figure { 40 | @include vertical-margins; 41 | } 42 | 43 | /** 44 | * Consistent indentation for lists. 45 | */ 46 | 47 | ol, 48 | ul, 49 | dd { 50 | padding-left: var(--spacer-base); 51 | } 52 | 53 | /** 54 | * Fluid media elements for responsive purposes. 55 | */ 56 | 57 | object, 58 | embed, 59 | img, 60 | svg, 61 | video { 62 | max-width: 100%; 63 | height: auto; 64 | } 65 | 66 | iframe, 67 | audio { 68 | max-width: 100%; 69 | } 70 | 71 | /** 72 | * Change the alignment on media elements. 73 | */ 74 | 75 | iframe, 76 | canvas, 77 | img, 78 | svg, 79 | video, 80 | audio { 81 | vertical-align: middle; 82 | } 83 | 84 | /** 85 | * Change the cursor with CSS for better user experience. 86 | */ 87 | 88 | [aria-busy='true'] { 89 | cursor: progress; 90 | } 91 | 92 | [aria-controls] { 93 | cursor: pointer; 94 | } 95 | 96 | [aria-disabled='true'], 97 | [disabled] { 98 | cursor: not-allowed; 99 | } 100 | -------------------------------------------------------------------------------- /scss/objects/_container.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #CONTAINER 3 | ========================================================================== */ 4 | 5 | /* Variables & Custom properties 6 | ========================================================================== */ 7 | 8 | /** 9 | * Prevents overwriting the global configuration. 10 | */ 11 | 12 | .o-container { 13 | --container-side-margin-default: var(--container-side-margin, calc(0 * 1rem)); 14 | } 15 | 16 | /* Declarative rules 17 | ========================================================================== */ 18 | 19 | .o-container { 20 | width: 100%; 21 | max-width: calc(var(--container-max-width) + var(--container-side-margin-default) * 2); 22 | margin-right: auto; 23 | margin-left: auto; 24 | padding-right: var(--container-side-margin-default); 25 | padding-left: var(--container-side-margin-default); 26 | } 27 | -------------------------------------------------------------------------------- /scss/objects/_grid.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #GRID 3 | ========================================================================== */ 4 | 5 | /* Variables & Custom properties 6 | ========================================================================== */ 7 | 8 | .o-grid { 9 | --grid-column-count: var(--column-count); 10 | --grid-column-width: auto; 11 | --grid-column-offset-width: 0; 12 | 13 | --grid-column-gap: var(--column-gap); 14 | --grid-row-gap: var(--row-gap); 15 | } 16 | 17 | // Grid columns builder. 18 | @include grid-columns; 19 | 20 | // Responsive grid columns builder. 21 | @if $enable-responsive-grid { 22 | @include responsive-grid-columns; 23 | } 24 | 25 | /* Declarative rules 26 | ========================================================================== */ 27 | 28 | .o-grid { 29 | display: flex; 30 | flex-flow: row wrap; 31 | margin-bottom: calc(var(--grid-row-gap) * -1); 32 | margin-left: calc(var(--grid-column-gap) * -1); 33 | } 34 | 35 | .o-grid__col { 36 | flex: 0 1 var(--grid-column-width); 37 | box-sizing: border-box; 38 | margin-left: var(--grid-column-offset-width); 39 | padding-bottom: var(--grid-row-gap); 40 | padding-left: var(--grid-column-gap); 41 | } 42 | -------------------------------------------------------------------------------- /scss/settings/_colors.scss: -------------------------------------------------------------------------------- 1 | ///* ======================================================================== 2 | // #COLORS 3 | // ======================================================================== */ 4 | 5 | // Map of colors. 6 | $colors: () !default; 7 | $colors: map-merge( 8 | ( 9 | 'white': #fff, 10 | 'black': #000, 11 | ), 12 | $colors 13 | ); 14 | -------------------------------------------------------------------------------- /scss/settings/_global.scss: -------------------------------------------------------------------------------- 1 | ///* ======================================================================== 2 | // #GLOBAL 3 | // ======================================================================== */ 4 | 5 | // Map of font weights. 6 | $font-weights: () !default; 7 | $font-weights: map-merge( 8 | ( 9 | 'base': 400, 10 | ), 11 | $font-weights 12 | ); 13 | 14 | // Map of font sizes. 15 | $font-sizes: () !default; 16 | $font-sizes: map-merge( 17 | ( 18 | 'base': ( 19 | 1.6rem, 20 | 1.5, 21 | ), 22 | 'h1': 6.8rem, 23 | 'h2': 5.1rem, 24 | 'h3': 3.8rem, 25 | 'h4': 2.8rem, 26 | 'h5': 2.1rem, 27 | 'h6': 1.6rem, 28 | ), 29 | $font-sizes 30 | ); 31 | 32 | // Map of font families. 33 | // To include a list of font families, it is recommended to follow this syntax : 34 | // "'Times New Roman', Times, serif" 35 | $font-families: () !default; 36 | $font-families: map-merge( 37 | ( 38 | 'base': sans-serif, 39 | ), 40 | $font-families 41 | ); 42 | 43 | // Map of sizing values. 44 | $sizes: () !default; 45 | $sizes: map-merge( 46 | ( 47 | '100': 100%, 48 | 'auto': auto, 49 | ), 50 | $sizes 51 | ); 52 | 53 | // Map of spacing values. 54 | $spacers: () !default; 55 | $spacers: map-merge( 56 | ( 57 | 'base': 2.4rem, 58 | 'auto': auto, 59 | 'none': 0, 60 | ), 61 | $spacers 62 | ); 63 | 64 | // Global settings of the container (max width and side margins). 65 | $container-max-width: 126rem !default; 66 | 67 | $container-side-margin: () !default; 68 | $container-side-margin: map-merge( 69 | ( 70 | 'default': 2.4rem, 71 | ), 72 | $container-side-margin 73 | ); 74 | 75 | // Global settings of the grid (number of columns, column gap and row gap). 76 | $column-count: 12 !default; 77 | 78 | $column-gap: () !default; 79 | $column-gap: map-merge( 80 | ( 81 | 'default': 2.4rem, 82 | ), 83 | $column-gap 84 | ); 85 | 86 | $row-gap: () !default; 87 | $row-gap: map-merge( 88 | ( 89 | 'default': 2.4rem, 90 | ), 91 | $row-gap 92 | ); 93 | 94 | // Map of breakpoint values. 95 | // It is recommended to keep `em` units. 96 | $breakpoints: () !default; 97 | $breakpoints: map-merge( 98 | ( 99 | 'phone': 47.9375em, 100 | 'tablet': 64em, 101 | ), 102 | $breakpoints 103 | ); 104 | 105 | // Parameter to set margins in a single-direction (top or bottom direction). 106 | // https://csswizardry.com/2012/06/single-direction-margin-declarations/ 107 | $vertical-margin-direction: 'top' !default; 108 | 109 | // Parameters to enable or disable the responsive utility classes builders. 110 | $enable-responsive-grid: true !default; 111 | $enable-responsive-position: false !default; 112 | $enable-responsive-display: false !default; 113 | $enable-responsive-flex: false !default; 114 | $enable-responsive-alignment: false !default; 115 | $enable-responsive-float: false !default; 116 | $enable-responsive-clear: false !default; 117 | $enable-responsive-sizing: false !default; 118 | $enable-responsive-spacing: false !default; 119 | $enable-responsive-overflow: false !default; 120 | $enable-responsive-colors: false !default; 121 | $enable-responsive-text: false !default; 122 | $enable-responsive-visibility: false !default; 123 | $enable-responsive-cursors: false !default; 124 | $enable-responsive-reset: false !default; 125 | $enable-responsive-helper: false !default; 126 | -------------------------------------------------------------------------------- /scss/tools/_functions.scss: -------------------------------------------------------------------------------- 1 | ///* ======================================================================== 2 | // #FUNCTIONS 3 | // ======================================================================== */ 4 | 5 | $BREAKPOINT_UPPER_LABEL: '-up'; 6 | $BREAKPOINT_LOWER_LABEL: '-down'; 7 | $BREAKPOINT_DEFAULT_LABEL: 'default'; 8 | 9 | //* Private functions 10 | // ======================================================================== */ 11 | 12 | /// Function to sort map by values. 13 | /// @author Andrew Luca 14 | /// @link https://gist.github.com/iamandrewluca 15 | /// @access private 16 | /// @param {Map} $map - Map to sort 17 | /// @return {Map} 18 | @function map-sort-by-values($map) { 19 | $keys: (); 20 | $values: (); 21 | $sorted-map: (); 22 | 23 | @each $key, $value in $map { 24 | $keys: append($keys, $key); 25 | $values: append($values, $value); 26 | } 27 | 28 | $list: zip($keys, $values); 29 | 30 | @while length($list) > 0 { 31 | $smallest-pair: nth($list, 1); 32 | 33 | @each $pair in $list { 34 | $value: nth($pair, 2); 35 | $smallest-value: nth($smallest-pair, 2); 36 | 37 | @if $value < $smallest-value { 38 | $smallest-pair: $pair; 39 | } 40 | } 41 | 42 | $key: nth($smallest-pair, 1); 43 | $value: nth($smallest-pair, 2); 44 | $sorted-map: map-merge( 45 | $sorted-map, 46 | ( 47 | $key: $value, 48 | ) 49 | ); 50 | $smallest-pair-index: index($list, $smallest-pair); 51 | $new-list: (); 52 | 53 | @for $i from 1 through length($list) { 54 | @if $i != $smallest-pair-index { 55 | $new-list: append($new-list, nth($list, $i), 'space'); 56 | } 57 | } 58 | 59 | $list: $new-list; 60 | } 61 | 62 | @return $sorted-map; 63 | } 64 | 65 | /// Function to create new breakpoints by merging them with their upper and lower values. 66 | /// @access private 67 | /// @requires {variable} BREAKPOINT_UPPER_LABEL 68 | /// @requires {variable} BREAKPOINT_LOWER_LABEL 69 | /// @param {Map} $breakpoints - Breakpoints from global settings 70 | /// @throws Make sure that `#{$value}` is a number in `$breakpoints: #{$breakpoints}` map. 71 | /// @return {Map} 72 | @function breakpoint-merge($breakpoints) { 73 | $new-breakpoints: (); 74 | 75 | @each $key, $value in $breakpoints { 76 | @if type-of($value) == 'number' { 77 | $new-breakpoints: map-merge( 78 | $new-breakpoints, 79 | ( 80 | $key: $value, 81 | ) 82 | ); 83 | $new-breakpoints: map-merge($new-breakpoints, (#{$key}#{$BREAKPOINT_UPPER_LABEL}: $value + 0.0625)); 84 | $new-breakpoints: map-merge($new-breakpoints, (#{$key}#{$BREAKPOINT_LOWER_LABEL}: $value)); 85 | } @else if $value { 86 | @warn 'Make sure that `#{$value}` is a number in `$breakpoints: #{$breakpoints}` map.'; 87 | } 88 | } 89 | 90 | @return $new-breakpoints; 91 | } 92 | 93 | /// Function to remove the smallest breakpoint value which is duplicate. 94 | /// If found, removes it, else return `$breakpoints`. 95 | /// Be careful, breakpoints should be sorted with their upper and lower values. 96 | /// @access private 97 | /// @requires {variable} BREAKPOINT_LOWER_LABEL 98 | /// @param {Map} $breakpoints - Breakpoints from global settings 99 | /// @return {Map} 100 | @function breakpoint-clean($breakpoints) { 101 | @if length($breakpoints) > 1 { 102 | @return map-remove($breakpoints, #{nth(nth($breakpoints, 1), 1)}#{$BREAKPOINT_LOWER_LABEL}); 103 | } 104 | 105 | @return $breakpoints; 106 | } 107 | 108 | $breakpoints: breakpoint-clean(map-sort-by-values(breakpoint-merge($breakpoints))); 109 | 110 | /// Function to fetch the breakpoint value in `$breakpoints` map. 111 | /// If found, returns it, else return `null`. 112 | /// @access private 113 | /// @requires {variable} breakpoints 114 | /// @param {String} $key - Breakpoint key 115 | /// @throws `#{$key}` is not a valid key in `$breakpoints` map. 116 | /// @return {Number | Null} 117 | @function breakpoint-get($key) { 118 | @if map-has-key($breakpoints, $key) { 119 | @return map-get($breakpoints, $key); 120 | } 121 | 122 | @warn '`#{$key}` is not a valid key in `$breakpoints: #{$breakpoints}` map.'; 123 | @return null; 124 | } 125 | 126 | /// Function to fetch the lower breakpoint value in `$breakpoints` map. 127 | /// If found, returns it, else return `null`. 128 | /// @access private 129 | /// @requires {function} breakpoint-get 130 | /// @requires {variable} breakpoints 131 | /// @param {String} $key - Breakpoint key 132 | /// @return {Number | Null} 133 | @function breakpoint-get-down($key) { 134 | $current-index: index($breakpoints, ($key breakpoint-get($key))); 135 | 136 | @if $current-index and $current-index > 1 { 137 | @return nth(nth($breakpoints, $current-index - 1), 2); 138 | } 139 | 140 | @return null; 141 | } 142 | 143 | /// Function to return whether the breakpoint value in `$breakpoints` map is up. 144 | /// @access private 145 | /// @requires {variable} BREAKPOINT_UPPER_LABEL 146 | /// @param {String} $key - Breakpoint key 147 | /// @return {Bool} 148 | @function breakpoint-is-up($key) { 149 | @if str-index($key, $BREAKPOINT_UPPER_LABEL) { 150 | @return true; 151 | } 152 | 153 | @return false; 154 | } 155 | 156 | /// Function to return whether the breakpoint value in `$breakpoints` map is down. 157 | /// @access private 158 | /// @requires {variable} BREAKPOINT_LOWER_LABEL 159 | /// @param {String} $key - Breakpoint key 160 | /// @return {Bool} 161 | @function breakpoint-is-down($key) { 162 | @if str-index($key, $BREAKPOINT_LOWER_LABEL) { 163 | @return true; 164 | } 165 | 166 | @return false; 167 | } 168 | -------------------------------------------------------------------------------- /scss/tools/_mixins.scss: -------------------------------------------------------------------------------- 1 | ///* ======================================================================== 2 | // #MIXINS 3 | // ======================================================================== */ 4 | 5 | $SEPARATOR_MEDIA: '\\@'; 6 | $SEPARATOR_VALUE_START: '\\('; 7 | $SEPARATOR_VALUE_END: '\\)'; 8 | 9 | //* Private mixins 10 | // ======================================================================== */ 11 | 12 | /// Mixin to output media queries. 13 | /// @access private 14 | /// @requires {function} breakpoint-get 15 | /// @requires {function} breakpoint-is-up 16 | /// @requires {function} breakpoint-is-down 17 | /// @requires {function} breakpoint-get-down 18 | /// @requires {variable} BREAKPOINT_DEFAULT_LABEL 19 | /// @param {String} $key - Breakpoint key 20 | @mixin breakpoint($key) { 21 | @if $key == $BREAKPOINT_DEFAULT_LABEL { 22 | @content; 23 | } @else { 24 | $breakpoint-value: breakpoint-get($key); 25 | 26 | @if $breakpoint-value { 27 | @if breakpoint-is-up($key) { 28 | @media (min-width: #{$breakpoint-value}) { 29 | @content; 30 | } 31 | } @else if breakpoint-is-down($key) { 32 | @media (max-width: #{$breakpoint-value}) { 33 | @content; 34 | } 35 | } @else { 36 | $breakpoint-lower-value: breakpoint-get-down($key); 37 | 38 | @if $breakpoint-lower-value { 39 | @media (max-width: #{$breakpoint-value}) and (min-width: #{$breakpoint-lower-value}) { 40 | @content; 41 | } 42 | } @else { 43 | @media (max-width: #{$breakpoint-value}) { 44 | @content; 45 | } 46 | } 47 | } 48 | } 49 | } 50 | } 51 | 52 | /// Mixin to output margins in the same direction. 53 | /// @access private 54 | /// @requires {variable} vertical-margin-direction 55 | /// @throws Make sure that `#{$vertical-margin-direction}` equals `top` or `bottom` in `$vertical-margin-direction: #{$vertical-margin-direction}` variable. 56 | @mixin vertical-margins { 57 | @if $vertical-margin-direction == 'top' { 58 | margin-top: var(--spacer-base); 59 | 60 | @at-root :first-child { 61 | margin-top: 0; 62 | } 63 | } @else if $vertical-margin-direction == 'bottom' { 64 | margin-bottom: var(--spacer-base); 65 | 66 | @at-root :last-child { 67 | margin-bottom: 0; 68 | } 69 | } @else if $vertical-margin-direction { 70 | @warn 'Make sure that `#{$vertical-margin-direction}` equals `top` or `bottom` in `$vertical-margin-direction: #{$vertical-margin-direction}` variable.'; 71 | } 72 | } 73 | 74 | //* Private mixins to output CSS variables (Custom Properties) 75 | // ======================================================================== */ 76 | 77 | /// Mixin to output color variables. 78 | /// @access private 79 | /// @requires {variable} colors 80 | /// @throws Make sure that `#{$value}` is a color or a CSS variable in `$colors: #{$colors}` map. 81 | @mixin var-colors { 82 | @each $key, $value in $colors { 83 | @if type-of($value) == 'color' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 84 | --color-#{$key}: #{$value}; 85 | } @else if $value { 86 | @warn 'Make sure that `#{$value}` is a color or a CSS variable in `$colors: #{$colors}` map.'; 87 | } 88 | } 89 | } 90 | 91 | /// Mixin to output font weight variables. 92 | /// @access private 93 | /// @requires {variable} font-weights 94 | /// @throws Make sure that `#{$value}` is a number or a CSS variable in `$font-weights: #{$font-weights}` map. 95 | @mixin var-font-weights { 96 | @each $key, $value in $font-weights { 97 | @if type-of($value) == 'number' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 98 | --font-weight-#{$key}: #{$value}; 99 | } @else if $value { 100 | @warn 'Make sure that `#{$value}` is a number or a CSS variable in `$font-weights: #{$font-weights}` map.'; 101 | } 102 | } 103 | } 104 | 105 | /// Mixin to output font size variables (and line height, if it exists). 106 | /// @access private 107 | /// @requires {variable} font-sizes 108 | /// @param {String} $key - Font size key 109 | /// @param {List | Number} $value - Font size value 110 | /// @throws Make sure that `#{$value}` is a number, a CSS variable or a list in `$font-sizes: #{$font-sizes}` map. 111 | /// @throws Make sure that `#{$font-size-value}` is a number or a CSS variable in `$font-sizes: #{$font-sizes}` map. 112 | /// @throws Make sure that `#{$line-height-value}` is a number or a CSS variable in `$font-sizes: #{$font-sizes}` map. 113 | @mixin var-rhythm($key, $value) { 114 | @if type-of($value) == 115 | 'number' or 116 | (type-of($value) == 'string' and str-index($value, 'var(--')) or 117 | type-of($value) == 118 | 'list' 119 | { 120 | @if type-of($value) == 'list' { 121 | $font-size-value: nth($value, 1); 122 | $line-height-value: nth($value, 2); 123 | 124 | @if type-of($font-size-value) == 125 | 'number' or 126 | (type-of($font-size-value) == 'string' and str-index($font-size-value, 'var(--')) 127 | { 128 | --font-size-#{$key}: #{$font-size-value}; 129 | } @else if $font-size-value { 130 | @warn 'Make sure that `#{$font-size-value}` is a number or a CSS variable in `$font-sizes: #{$font-sizes}` map.'; 131 | } 132 | 133 | @if type-of($line-height-value) == 134 | 'number' or 135 | (type-of($line-height-value) == 'string' and str-index($line-height-value, 'var(--')) 136 | { 137 | --line-height-#{$key}: #{$line-height-value}; 138 | } @else if $line-height-value { 139 | @warn 'Make sure that `#{$line-height-value}` is a number or a CSS variable in `$font-sizes: #{$font-sizes}` map.'; 140 | } 141 | } @else { 142 | --font-size-#{$key}: #{$value}; 143 | } 144 | } @else if $value { 145 | @warn 'Make sure that `#{$value}` is a number, a CSS variable or a list in `$font-sizes: #{$font-sizes}` map.'; 146 | } 147 | } 148 | 149 | /// Mixin to output font size variables (and line height, if it exists). 150 | /// @access private 151 | /// @requires {mixin} breakpoint 152 | /// @requires {mixin} var-rhythm 153 | /// @requires {variable} font-sizes 154 | /// @throws Make sure that `#{$value}` is a number, a CSS variable, a list or a map in `$font-sizes: #{$font-sizes}` map. 155 | @mixin var-font-sizes { 156 | @each $key, $value in $font-sizes { 157 | @if type-of($value) == 158 | 'number' or 159 | (type-of($value) == 'string' and str-index($value, 'var(--')) or 160 | type-of($value) == 161 | 'list' or 162 | type-of($value) == 163 | 'map' 164 | { 165 | @if type-of($value) == 'map' { 166 | @each $map-key, $map-value in $value { 167 | @include breakpoint($map-key) { 168 | @include var-rhythm($key, $map-value); 169 | } 170 | } 171 | } @else { 172 | @include var-rhythm($key, $value); 173 | } 174 | } @else if $value { 175 | @warn 'Make sure that `#{$value}` is a number, a CSS variable, a list or a map in `$font-sizes: #{$font-sizes}` map.'; 176 | } 177 | } 178 | } 179 | 180 | /// Mixin to output font family variables. 181 | /// @access private 182 | /// @requires {variable} font-families 183 | /// @throws Make sure that `#{$value}` is a string or a CSS variable in `$font-families: #{$font-families}` map. 184 | @mixin var-font-families { 185 | @each $key, $value in $font-families { 186 | @if type-of($value) == 'string' { 187 | --font-family-#{$key}: #{$value}; 188 | } @else if $value { 189 | @warn 'Make sure that `#{$value}` is a string or a CSS variable in `$font-families: #{$font-families}` map.'; 190 | } 191 | } 192 | } 193 | 194 | /// Mixin to output sizing variables. 195 | /// @access private 196 | /// @requires {variable} sizes 197 | /// @throws Make sure that `#{$value}` is a number, a CSS variable or equals `auto` in `$sizes: #{$sizes}` map. 198 | @mixin var-sizing { 199 | @each $key, $value in $sizes { 200 | @if type-of($value) == 'number' or $value == 'auto' or (type-of($value) == 'string' and str-index($value, 'var(--')) 201 | { 202 | --size-#{$key}: #{$value}; 203 | } @else if $value { 204 | @warn 'Make sure that `#{$value}` is a number, a CSS variable or equals `auto` in `$sizes: #{$sizes}` map.'; 205 | } 206 | } 207 | } 208 | 209 | /// Mixin to output spacing variables. 210 | /// @access private 211 | /// @requires {variable} spacers 212 | /// @throws Make sure that `#{$value}` is a number, a CSS variable or equals `auto` in `$spacers: #{$spacers}` map. 213 | @mixin var-spacing { 214 | @each $key, $value in $spacers { 215 | @if type-of($value) == 'number' or $value == 'auto' or (type-of($value) == 'string' and str-index($value, 'var(--')) 216 | { 217 | --spacer-#{$key}: #{$value}; 218 | } @else if $value { 219 | @warn 'Make sure that `#{$value}` is a number, a CSS variable or equals `auto` in `$spacers: #{$spacers}` map.'; 220 | } 221 | } 222 | } 223 | 224 | /// Mixin to output container max width variable. 225 | /// @access private 226 | /// @requires {variable} container-max-width 227 | /// @throws Make sure that `#{$container-max-width}` is a number or a CSS variable in `$container-max-width: #{$container-max-width}` variable. 228 | @mixin var-container-max-width { 229 | @if type-of($container-max-width) == 230 | 'number' or 231 | (type-of($container-max-width) == 'string' and str-index($container-max-width, 'var(--')) 232 | { 233 | --container-max-width: #{$container-max-width}; 234 | } @else { 235 | @warn 'Make sure that `#{$container-max-width}` is a number or a CSS variable in `$container-max-width: #{$container-max-width}` variable.'; 236 | } 237 | } 238 | 239 | /// Mixin to output container side margin variables. 240 | /// @access private 241 | /// @requires {mixin} breakpoint 242 | /// @requires {variable} container-side-margin 243 | /// @throws Make sure that `#{$value}` is a number or a CSS variable in `$container-side-margin: #{$container-side-margin}` map. 244 | @mixin var-container-side-margin { 245 | @each $key, $value in $container-side-margin { 246 | @if type-of($value) == 'number' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 247 | @include breakpoint($key) { 248 | --container-side-margin: #{$value}; 249 | } 250 | } @else if $value { 251 | @warn 'Make sure that `#{$value}` is a number or a CSS variable in `$container-side-margin: #{$container-side-margin}` map.'; 252 | } 253 | } 254 | } 255 | 256 | /// Mixin to output column count variable. 257 | /// @access private 258 | /// @requires {variable} column-count 259 | /// @throws Make sure that `#{$column-count}` is a number in `$column-count: #{$column-count}` variable. 260 | @mixin var-column-count { 261 | @if type-of($column-count) == 'number' and unitless($column-count) { 262 | --column-count: #{$column-count}; 263 | } @else { 264 | @warn 'Make sure that `#{$column-count}` is a number in `$column-count: #{$column-count}` variable.'; 265 | } 266 | } 267 | 268 | /// Mixin to output column gap variables. 269 | /// @access private 270 | /// @requires {mixin} breakpoint 271 | /// @requires {variable} column-gap 272 | /// @throws Make sure that `#{$value}` is a number or a CSS variable in `$column-gap: #{$column-gap}` map. 273 | @mixin var-column-gap { 274 | @each $key, $value in $column-gap { 275 | @if type-of($value) == 'number' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 276 | @include breakpoint($key) { 277 | --column-gap: #{$value}; 278 | } 279 | } @else if $value { 280 | @warn 'Make sure that `#{$value}` is a number or a CSS variable in `$column-gap: #{$column-gap}` map.'; 281 | } 282 | } 283 | } 284 | 285 | /// Mixin to output row gap variables. 286 | /// @access private 287 | /// @requires {mixin} breakpoint 288 | /// @requires {variable} row-gap 289 | /// @throws Make sure that `#{$value}` is a number or a CSS variable in `$row-gap: #{$row-gap}` map. 290 | @mixin var-row-gap { 291 | @each $key, $value in $row-gap { 292 | @if type-of($value) == 'number' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 293 | @include breakpoint($key) { 294 | --row-gap: #{$value}; 295 | } 296 | } @else if $value { 297 | @warn 'Make sure that `#{$value}` is a number or a CSS variable in `$row-gap: #{$row-gap}` map.'; 298 | } 299 | } 300 | } 301 | 302 | //* Private mixins to output grid columns 303 | // ======================================================================== */ 304 | 305 | /// Mixin to output grid columns. 306 | /// @access private 307 | /// @requires {variable} column-count 308 | /// @param {String} $suffix [null] - Responsive suffix 309 | @mixin grid-columns($suffix: null) { 310 | @if type-of($column-count) == 'number' and unitless($column-count) { 311 | @for $i from 1 through $column-count { 312 | .o-grid--#{$i}#{$suffix} { 313 | --grid-column-count: #{$i}; 314 | --grid-column-width: calc(100% / var(--grid-column-count)); 315 | } 316 | 317 | .o-grid__col--#{$i}#{$suffix} { 318 | --grid-columns: #{$i}; 319 | --grid-column-width: calc(100% * var(--grid-columns) / var(--grid-column-count)); 320 | } 321 | 322 | .o-grid__col--push-#{$i}#{$suffix} { 323 | --grid-column-offset-width: calc(100% * #{$i} / var(--grid-column-count)); 324 | } 325 | 326 | .o-grid__col--pull-#{$i}#{$suffix} { 327 | --grid-column-offset-width: calc(-100% * #{$i} / var(--grid-column-count)); 328 | } 329 | } 330 | } 331 | } 332 | 333 | /// Mixin to output responsive grid columns. 334 | /// @access private 335 | /// @requires {mixin} breakpoint 336 | /// @requires {mixin} grid-columns 337 | /// @requires {variable} breakpoints 338 | /// @requires {variable} SEPARATOR_MEDIA 339 | @mixin responsive-grid-columns { 340 | @each $key, $value in $breakpoints { 341 | @include breakpoint($key) { 342 | @include grid-columns(#{$SEPARATOR_MEDIA}#{$key}); 343 | } 344 | } 345 | } 346 | 347 | //* Private mixins to output utility classes (Helpers) 348 | // Naming convention based on Atomic CSS : https://acss.io/reference 349 | // ======================================================================== */ 350 | 351 | /// Mixin to output position utilities. 352 | /// @access private 353 | /// @requires {variable} SEPARATOR_VALUE_START 354 | /// @requires {variable} SEPARATOR_VALUE_END 355 | /// @param {String} $suffix [null] - Responsive suffix 356 | @mixin position($suffix: null) { 357 | .u-pos#{$SEPARATOR_VALUE_START}static#{$SEPARATOR_VALUE_END}#{$suffix} { 358 | position: static; 359 | } 360 | 361 | .u-pos#{$SEPARATOR_VALUE_START}relative#{$SEPARATOR_VALUE_END}#{$suffix} { 362 | position: relative; 363 | } 364 | 365 | .u-pos#{$SEPARATOR_VALUE_START}absolute#{$SEPARATOR_VALUE_END}#{$suffix} { 366 | position: absolute; 367 | } 368 | 369 | .u-pos#{$SEPARATOR_VALUE_START}fixed#{$SEPARATOR_VALUE_END}#{$suffix} { 370 | position: fixed; 371 | } 372 | 373 | .u-pos#{$SEPARATOR_VALUE_START}sticky#{$SEPARATOR_VALUE_END}#{$suffix} { 374 | position: sticky; 375 | } 376 | } 377 | 378 | /// Mixin to output responsive position utilities. 379 | /// @access private 380 | /// @requires {mixin} breakpoint 381 | /// @requires {mixin} position 382 | /// @requires {variable} breakpoints 383 | /// @requires {variable} SEPARATOR_MEDIA 384 | @mixin responsive-position { 385 | @each $key, $value in $breakpoints { 386 | @include breakpoint($key) { 387 | @include position(#{$SEPARATOR_MEDIA}#{$key}); 388 | } 389 | } 390 | } 391 | 392 | /// Mixin to output display utilities. 393 | /// @access private 394 | /// @requires {variable} SEPARATOR_VALUE_START 395 | /// @requires {variable} SEPARATOR_VALUE_END 396 | /// @param {String} $suffix [null] - Responsive suffix 397 | @mixin display($suffix: null) { 398 | .u-d#{$SEPARATOR_VALUE_START}inline#{$SEPARATOR_VALUE_END}#{$suffix} { 399 | display: inline; 400 | } 401 | 402 | .u-d#{$SEPARATOR_VALUE_START}block#{$SEPARATOR_VALUE_END}#{$suffix} { 403 | display: block; 404 | } 405 | 406 | .u-d#{$SEPARATOR_VALUE_START}inline-block#{$SEPARATOR_VALUE_END}#{$suffix} { 407 | display: inline-block; 408 | } 409 | 410 | .u-d#{$SEPARATOR_VALUE_START}flex#{$SEPARATOR_VALUE_END}#{$suffix} { 411 | display: flex; 412 | } 413 | 414 | .u-d#{$SEPARATOR_VALUE_START}inline-flex#{$SEPARATOR_VALUE_END}#{$suffix} { 415 | display: inline-flex; 416 | } 417 | 418 | .u-d#{$SEPARATOR_VALUE_START}grid#{$SEPARATOR_VALUE_END}#{$suffix} { 419 | display: grid; 420 | } 421 | 422 | .u-d#{$SEPARATOR_VALUE_START}inline-grid#{$SEPARATOR_VALUE_END}#{$suffix} { 423 | display: inline-grid; 424 | } 425 | 426 | .u-d#{$SEPARATOR_VALUE_START}table#{$SEPARATOR_VALUE_END}#{$suffix} { 427 | display: table; 428 | } 429 | 430 | .u-d#{$SEPARATOR_VALUE_START}inline-table#{$SEPARATOR_VALUE_END}#{$suffix} { 431 | display: inline-table; 432 | } 433 | 434 | .u-d#{$SEPARATOR_VALUE_START}table-row#{$SEPARATOR_VALUE_END}#{$suffix} { 435 | display: table-row; 436 | } 437 | 438 | .u-d#{$SEPARATOR_VALUE_START}table-cell#{$SEPARATOR_VALUE_END}#{$suffix} { 439 | display: table-cell; 440 | } 441 | 442 | .u-d#{$SEPARATOR_VALUE_START}none#{$SEPARATOR_VALUE_END}#{$suffix} { 443 | display: none; 444 | } 445 | } 446 | 447 | /// Mixin to output responsive display utilities. 448 | /// @access private 449 | /// @requires {mixin} breakpoint 450 | /// @requires {mixin} display 451 | /// @requires {variable} breakpoints 452 | /// @requires {variable} SEPARATOR_MEDIA 453 | @mixin responsive-display { 454 | @each $key, $value in $breakpoints { 455 | @include breakpoint($key) { 456 | @include display(#{$SEPARATOR_MEDIA}#{$key}); 457 | } 458 | } 459 | } 460 | 461 | /// Mixin to output flex utilities. 462 | /// @access private 463 | /// @requires {variable} SEPARATOR_VALUE_START 464 | /// @requires {variable} SEPARATOR_VALUE_END 465 | /// @param {String} $suffix [null] - Responsive suffix 466 | @mixin flex($suffix: null) { 467 | .u-d#{$SEPARATOR_VALUE_START}flex#{$SEPARATOR_VALUE_END}#{$suffix} { 468 | display: flex; 469 | } 470 | 471 | .u-d#{$SEPARATOR_VALUE_START}inline-flex#{$SEPARATOR_VALUE_END}#{$suffix} { 472 | display: inline-flex; 473 | } 474 | 475 | .u-fxd#{$SEPARATOR_VALUE_START}row#{$SEPARATOR_VALUE_END}#{$suffix} { 476 | flex-direction: row; 477 | } 478 | 479 | .u-fxd#{$SEPARATOR_VALUE_START}row-reverse#{$SEPARATOR_VALUE_END}#{$suffix} { 480 | flex-direction: row-reverse; 481 | } 482 | 483 | .u-fxd#{$SEPARATOR_VALUE_START}column#{$SEPARATOR_VALUE_END}#{$suffix} { 484 | flex-direction: column; 485 | } 486 | 487 | .u-fxd#{$SEPARATOR_VALUE_START}column-reverse#{$SEPARATOR_VALUE_END}#{$suffix} { 488 | flex-direction: column-reverse; 489 | } 490 | 491 | .u-fxw#{$SEPARATOR_VALUE_START}nowrap#{$SEPARATOR_VALUE_END}#{$suffix} { 492 | --grid-row-gap: 0; 493 | flex-wrap: nowrap; 494 | } 495 | 496 | .u-fxw#{$SEPARATOR_VALUE_START}wrap#{$SEPARATOR_VALUE_END}#{$suffix} { 497 | flex-wrap: wrap; 498 | } 499 | 500 | .u-fxw#{$SEPARATOR_VALUE_START}wrap-reverse#{$SEPARATOR_VALUE_END}#{$suffix} { 501 | flex-wrap: wrap-reverse; 502 | } 503 | 504 | .u-jc#{$SEPARATOR_VALUE_START}flex-start#{$SEPARATOR_VALUE_END}#{$suffix} { 505 | justify-content: flex-start; 506 | } 507 | 508 | .u-jc#{$SEPARATOR_VALUE_START}flex-end#{$SEPARATOR_VALUE_END}#{$suffix} { 509 | justify-content: flex-end; 510 | } 511 | 512 | .u-jc#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 513 | justify-content: center; 514 | } 515 | 516 | .u-jc#{$SEPARATOR_VALUE_START}space-between#{$SEPARATOR_VALUE_END}#{$suffix} { 517 | justify-content: space-between; 518 | } 519 | 520 | .u-jc#{$SEPARATOR_VALUE_START}space-around#{$SEPARATOR_VALUE_END}#{$suffix} { 521 | justify-content: space-around; 522 | } 523 | 524 | .u-jc#{$SEPARATOR_VALUE_START}space-evenly#{$SEPARATOR_VALUE_END}#{$suffix} { 525 | justify-content: space-evenly; 526 | } 527 | 528 | .u-ac#{$SEPARATOR_VALUE_START}flex-start#{$SEPARATOR_VALUE_END}#{$suffix} { 529 | align-content: flex-start; 530 | } 531 | 532 | .u-ac#{$SEPARATOR_VALUE_START}flex-end#{$SEPARATOR_VALUE_END}#{$suffix} { 533 | align-content: flex-end; 534 | } 535 | 536 | .u-ac#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 537 | align-content: center; 538 | } 539 | 540 | .u-ac#{$SEPARATOR_VALUE_START}space-between#{$SEPARATOR_VALUE_END}#{$suffix} { 541 | align-content: space-between; 542 | } 543 | 544 | .u-ac#{$SEPARATOR_VALUE_START}space-around#{$SEPARATOR_VALUE_END}#{$suffix} { 545 | align-content: space-around; 546 | } 547 | 548 | .u-ac#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 549 | align-content: stretch; 550 | } 551 | 552 | .u-ai#{$SEPARATOR_VALUE_START}flex-start#{$SEPARATOR_VALUE_END}#{$suffix} { 553 | align-items: flex-start; 554 | } 555 | 556 | .u-ai#{$SEPARATOR_VALUE_START}flex-end#{$SEPARATOR_VALUE_END}#{$suffix} { 557 | align-items: flex-end; 558 | } 559 | 560 | .u-ai#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 561 | align-items: center; 562 | } 563 | 564 | .u-ai#{$SEPARATOR_VALUE_START}baseline#{$SEPARATOR_VALUE_END}#{$suffix} { 565 | align-items: baseline; 566 | } 567 | 568 | .u-ai#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 569 | align-items: stretch; 570 | } 571 | 572 | .u-as#{$SEPARATOR_VALUE_START}flex-start#{$SEPARATOR_VALUE_END}#{$suffix} { 573 | align-self: flex-start; 574 | } 575 | 576 | .u-as#{$SEPARATOR_VALUE_START}flex-end#{$SEPARATOR_VALUE_END}#{$suffix} { 577 | align-self: flex-end; 578 | } 579 | 580 | .u-as#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 581 | align-self: center; 582 | } 583 | 584 | .u-as#{$SEPARATOR_VALUE_START}baseline#{$SEPARATOR_VALUE_END}#{$suffix} { 585 | align-self: baseline; 586 | } 587 | 588 | .u-as#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 589 | align-self: stretch; 590 | } 591 | 592 | .u-fx#{$SEPARATOR_VALUE_START}initial#{$SEPARATOR_VALUE_END}#{$suffix} { 593 | flex: initial; 594 | } 595 | 596 | .u-fx#{$SEPARATOR_VALUE_START}auto#{$SEPARATOR_VALUE_END}#{$suffix} { 597 | flex: auto; 598 | } 599 | 600 | .u-fx#{$SEPARATOR_VALUE_START}1#{$SEPARATOR_VALUE_END}#{$suffix} { 601 | flex: 1; 602 | } 603 | 604 | .u-fx#{$SEPARATOR_VALUE_START}none#{$SEPARATOR_VALUE_END}#{$suffix} { 605 | flex: none; 606 | } 607 | 608 | .u-fxg#{$SEPARATOR_VALUE_START}1#{$SEPARATOR_VALUE_END}#{$suffix} { 609 | flex-grow: 1; 610 | } 611 | 612 | .u-fxg#{$SEPARATOR_VALUE_START}0#{$SEPARATOR_VALUE_END}#{$suffix} { 613 | flex-grow: 0; 614 | } 615 | 616 | .u-fxs#{$SEPARATOR_VALUE_START}1#{$SEPARATOR_VALUE_END}#{$suffix} { 617 | flex-shrink: 1; 618 | } 619 | 620 | .u-fxs#{$SEPARATOR_VALUE_START}0#{$SEPARATOR_VALUE_END}#{$suffix} { 621 | flex-shrink: 0; 622 | } 623 | 624 | .u-fxb#{$SEPARATOR_VALUE_START}0#{$SEPARATOR_VALUE_END}#{$suffix} { 625 | flex-basis: 0; 626 | } 627 | 628 | .u-or#{$SEPARATOR_VALUE_START}-1#{$SEPARATOR_VALUE_END}#{$suffix} { 629 | order: -1; 630 | } 631 | 632 | .u-or#{$SEPARATOR_VALUE_START}0#{$SEPARATOR_VALUE_END}#{$suffix} { 633 | order: 0; 634 | } 635 | 636 | .u-or#{$SEPARATOR_VALUE_START}1#{$SEPARATOR_VALUE_END}#{$suffix} { 637 | order: 1; 638 | } 639 | } 640 | 641 | /// Mixin to output responsive flex utilities. 642 | /// @access private 643 | /// @requires {mixin} breakpoint 644 | /// @requires {mixin} flex 645 | /// @requires {variable} breakpoints 646 | /// @requires {variable} SEPARATOR_MEDIA 647 | @mixin responsive-flex { 648 | @each $key, $value in $breakpoints { 649 | @include breakpoint($key) { 650 | @include flex(#{$SEPARATOR_MEDIA}#{$key}); 651 | } 652 | } 653 | } 654 | 655 | /// Mixin to output alignment utilities. 656 | /// @access private 657 | /// @requires {variable} SEPARATOR_VALUE_START 658 | /// @requires {variable} SEPARATOR_VALUE_END 659 | /// @param {String} $suffix [null] - Responsive suffix 660 | @mixin alignment($suffix: null) { 661 | .u-jc#{$SEPARATOR_VALUE_START}start#{$SEPARATOR_VALUE_END}#{$suffix} { 662 | justify-content: start; 663 | } 664 | 665 | .u-jc#{$SEPARATOR_VALUE_START}end#{$SEPARATOR_VALUE_END}#{$suffix} { 666 | justify-content: end; 667 | } 668 | 669 | .u-jc#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 670 | justify-content: center; 671 | } 672 | 673 | .u-jc#{$SEPARATOR_VALUE_START}space-between#{$SEPARATOR_VALUE_END}#{$suffix} { 674 | justify-content: space-between; 675 | } 676 | 677 | .u-jc#{$SEPARATOR_VALUE_START}space-around#{$SEPARATOR_VALUE_END}#{$suffix} { 678 | justify-content: space-around; 679 | } 680 | 681 | .u-jc#{$SEPARATOR_VALUE_START}space-evenly#{$SEPARATOR_VALUE_END}#{$suffix} { 682 | justify-content: space-evenly; 683 | } 684 | 685 | .u-jc#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 686 | justify-content: stretch; 687 | } 688 | 689 | .u-ac#{$SEPARATOR_VALUE_START}start#{$SEPARATOR_VALUE_END}#{$suffix} { 690 | align-content: start; 691 | } 692 | 693 | .u-ac#{$SEPARATOR_VALUE_START}end#{$SEPARATOR_VALUE_END}#{$suffix} { 694 | align-content: end; 695 | } 696 | 697 | .u-ac#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 698 | align-content: center; 699 | } 700 | 701 | .u-ac#{$SEPARATOR_VALUE_START}baseline#{$SEPARATOR_VALUE_END}#{$suffix} { 702 | align-content: baseline; 703 | } 704 | 705 | .u-ac#{$SEPARATOR_VALUE_START}space-between#{$SEPARATOR_VALUE_END}#{$suffix} { 706 | align-content: space-between; 707 | } 708 | 709 | .u-ac#{$SEPARATOR_VALUE_START}space-around#{$SEPARATOR_VALUE_END}#{$suffix} { 710 | align-content: space-around; 711 | } 712 | 713 | .u-ac#{$SEPARATOR_VALUE_START}space-evenly#{$SEPARATOR_VALUE_END}#{$suffix} { 714 | align-content: space-evenly; 715 | } 716 | 717 | .u-ac#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 718 | align-content: stretch; 719 | } 720 | 721 | .u-ji#{$SEPARATOR_VALUE_START}start#{$SEPARATOR_VALUE_END}#{$suffix} { 722 | justify-items: start; 723 | } 724 | 725 | .u-ji#{$SEPARATOR_VALUE_START}end#{$SEPARATOR_VALUE_END}#{$suffix} { 726 | justify-items: end; 727 | } 728 | 729 | .u-ji#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 730 | justify-items: center; 731 | } 732 | 733 | .u-ji#{$SEPARATOR_VALUE_START}baseline#{$SEPARATOR_VALUE_END}#{$suffix} { 734 | justify-items: baseline; 735 | } 736 | 737 | .u-ji#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 738 | justify-items: stretch; 739 | } 740 | 741 | .u-ai#{$SEPARATOR_VALUE_START}start#{$SEPARATOR_VALUE_END}#{$suffix} { 742 | align-items: start; 743 | } 744 | 745 | .u-ai#{$SEPARATOR_VALUE_START}end#{$SEPARATOR_VALUE_END}#{$suffix} { 746 | align-items: end; 747 | } 748 | 749 | .u-ai#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 750 | align-items: center; 751 | } 752 | 753 | .u-ai#{$SEPARATOR_VALUE_START}baseline#{$SEPARATOR_VALUE_END}#{$suffix} { 754 | align-items: baseline; 755 | } 756 | 757 | .u-ai#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 758 | align-items: stretch; 759 | } 760 | 761 | .u-js#{$SEPARATOR_VALUE_START}start#{$SEPARATOR_VALUE_END}#{$suffix} { 762 | justify-self: start; 763 | } 764 | 765 | .u-js#{$SEPARATOR_VALUE_START}end#{$SEPARATOR_VALUE_END}#{$suffix} { 766 | justify-self: end; 767 | } 768 | 769 | .u-js#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 770 | justify-self: center; 771 | } 772 | 773 | .u-js#{$SEPARATOR_VALUE_START}baseline#{$SEPARATOR_VALUE_END}#{$suffix} { 774 | justify-self: baseline; 775 | } 776 | 777 | .u-js#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 778 | justify-self: stretch; 779 | } 780 | 781 | .u-as#{$SEPARATOR_VALUE_START}start#{$SEPARATOR_VALUE_END}#{$suffix} { 782 | align-self: start; 783 | } 784 | 785 | .u-as#{$SEPARATOR_VALUE_START}end#{$SEPARATOR_VALUE_END}#{$suffix} { 786 | align-self: end; 787 | } 788 | 789 | .u-as#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 790 | align-self: center; 791 | } 792 | 793 | .u-as#{$SEPARATOR_VALUE_START}baseline#{$SEPARATOR_VALUE_END}#{$suffix} { 794 | align-self: baseline; 795 | } 796 | 797 | .u-as#{$SEPARATOR_VALUE_START}stretch#{$SEPARATOR_VALUE_END}#{$suffix} { 798 | align-self: stretch; 799 | } 800 | } 801 | 802 | /// Mixin to output responsive alignment utilities. 803 | /// @access private 804 | /// @requires {mixin} breakpoint 805 | /// @requires {mixin} alignment 806 | /// @requires {variable} breakpoints 807 | /// @requires {variable} SEPARATOR_MEDIA 808 | @mixin responsive-alignment { 809 | @each $key, $value in $breakpoints { 810 | @include breakpoint($key) { 811 | @include alignment(#{$SEPARATOR_MEDIA}#{$key}); 812 | } 813 | } 814 | } 815 | 816 | /// Mixin to output float utilities. 817 | /// @access private 818 | /// @requires {variable} SEPARATOR_VALUE_START 819 | /// @requires {variable} SEPARATOR_VALUE_END 820 | /// @param {String} $suffix [null] - Responsive suffix 821 | @mixin float($suffix: null) { 822 | .u-fl#{$SEPARATOR_VALUE_START}left#{$SEPARATOR_VALUE_END}#{$suffix} { 823 | float: left; 824 | } 825 | 826 | .u-fl#{$SEPARATOR_VALUE_START}right#{$SEPARATOR_VALUE_END}#{$suffix} { 827 | float: right; 828 | } 829 | 830 | .u-fl#{$SEPARATOR_VALUE_START}none#{$SEPARATOR_VALUE_END}#{$suffix} { 831 | float: none; 832 | } 833 | } 834 | 835 | /// Mixin to output responsive float utilities. 836 | /// @access private 837 | /// @requires {mixin} breakpoint 838 | /// @requires {mixin} float 839 | /// @requires {variable} breakpoints 840 | /// @requires {variable} SEPARATOR_MEDIA 841 | @mixin responsive-float { 842 | @each $key, $value in $breakpoints { 843 | @include breakpoint($key) { 844 | @include float(#{$SEPARATOR_MEDIA}#{$key}); 845 | } 846 | } 847 | } 848 | 849 | /// Mixin to output clear utilities. 850 | /// @access private 851 | /// @requires {variable} SEPARATOR_VALUE_START 852 | /// @requires {variable} SEPARATOR_VALUE_END 853 | /// @param {String} $suffix [null] - Responsive suffix 854 | @mixin clear($suffix: null) { 855 | .u-cl#{$SEPARATOR_VALUE_START}left#{$SEPARATOR_VALUE_END}#{$suffix} { 856 | clear: left; 857 | } 858 | 859 | .u-cl#{$SEPARATOR_VALUE_START}right#{$SEPARATOR_VALUE_END}#{$suffix} { 860 | clear: right; 861 | } 862 | 863 | .u-cl#{$SEPARATOR_VALUE_START}both#{$SEPARATOR_VALUE_END}#{$suffix} { 864 | clear: both; 865 | } 866 | 867 | .u-cl#{$SEPARATOR_VALUE_START}none#{$SEPARATOR_VALUE_END}#{$suffix} { 868 | clear: none; 869 | } 870 | } 871 | 872 | /// Mixin to output responsive clear utilities. 873 | /// @access private 874 | /// @requires {mixin} breakpoint 875 | /// @requires {mixin} clear 876 | /// @requires {variable} breakpoints 877 | /// @requires {variable} SEPARATOR_MEDIA 878 | @mixin responsive-clear { 879 | @each $key, $value in $breakpoints { 880 | @include breakpoint($key) { 881 | @include clear(#{$SEPARATOR_MEDIA}#{$key}); 882 | } 883 | } 884 | } 885 | 886 | /// Mixin to output sizing utilities. 887 | /// @access private 888 | /// @requires {variable} sizes 889 | /// @requires {variable} SEPARATOR_VALUE_START 890 | /// @requires {variable} SEPARATOR_VALUE_END 891 | /// @param {String} $suffix [null] - Responsive suffix 892 | @mixin sizing($suffix: null) { 893 | @each $key, $value in $sizes { 894 | @if type-of($value) == 'number' or $value == 'auto' or (type-of($value) == 'string' and str-index($value, 'var(--')) 895 | { 896 | .u-w#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 897 | width: var(--size-#{$key}); 898 | } 899 | 900 | .u-h#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 901 | height: var(--size-#{$key}); 902 | } 903 | } 904 | } 905 | } 906 | 907 | /// Mixin to output responsive sizing utilities. 908 | /// @access private 909 | /// @requires {mixin} breakpoint 910 | /// @requires {mixin} sizing 911 | /// @requires {variable} breakpoints 912 | /// @requires {variable} SEPARATOR_MEDIA 913 | @mixin responsive-sizing { 914 | @each $key, $value in $breakpoints { 915 | @include breakpoint($key) { 916 | @include sizing(#{$SEPARATOR_MEDIA}#{$key}); 917 | } 918 | } 919 | } 920 | 921 | /// Mixin to output spacing utilities. 922 | /// @access private 923 | /// @requires {variable} spacers 924 | /// @requires {variable} SEPARATOR_VALUE_START 925 | /// @requires {variable} SEPARATOR_VALUE_END 926 | /// @param {String} $suffix [null] - Responsive suffix 927 | @mixin spacing($suffix: null) { 928 | @each $key, $value in $spacers { 929 | @if type-of($value) == 'number' or $value == 'auto' or (type-of($value) == 'string' and str-index($value, 'var(--')) 930 | { 931 | .u-m#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 932 | margin: var(--spacer-#{$key}); 933 | } 934 | 935 | .u-mx#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 936 | margin-right: var(--spacer-#{$key}); 937 | margin-left: var(--spacer-#{$key}); 938 | } 939 | 940 | .u-my#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 941 | margin-top: var(--spacer-#{$key}); 942 | margin-bottom: var(--spacer-#{$key}); 943 | } 944 | 945 | .u-mt#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 946 | margin-top: var(--spacer-#{$key}); 947 | } 948 | 949 | .u-mr#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 950 | margin-right: var(--spacer-#{$key}); 951 | } 952 | 953 | .u-mb#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 954 | margin-bottom: var(--spacer-#{$key}); 955 | } 956 | 957 | .u-ml#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 958 | margin-left: var(--spacer-#{$key}); 959 | } 960 | 961 | @if type-of($value) == 'number' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 962 | .u-p#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 963 | padding: var(--spacer-#{$key}); 964 | } 965 | 966 | .u-px#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 967 | padding-right: var(--spacer-#{$key}); 968 | padding-left: var(--spacer-#{$key}); 969 | } 970 | 971 | .u-py#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 972 | padding-top: var(--spacer-#{$key}); 973 | padding-bottom: var(--spacer-#{$key}); 974 | } 975 | 976 | .u-pt#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 977 | padding-top: var(--spacer-#{$key}); 978 | } 979 | 980 | .u-pr#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 981 | padding-right: var(--spacer-#{$key}); 982 | } 983 | 984 | .u-pb#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 985 | padding-bottom: var(--spacer-#{$key}); 986 | } 987 | 988 | .u-pl#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 989 | padding-left: var(--spacer-#{$key}); 990 | } 991 | } 992 | } 993 | } 994 | } 995 | 996 | /// Mixin to output responsive spacing utilities. 997 | /// @access private 998 | /// @requires {mixin} breakpoint 999 | /// @requires {mixin} spacing 1000 | /// @requires {variable} breakpoints 1001 | /// @requires {variable} SEPARATOR_MEDIA 1002 | @mixin responsive-spacing { 1003 | @each $key, $value in $breakpoints { 1004 | @include breakpoint($key) { 1005 | @include spacing(#{$SEPARATOR_MEDIA}#{$key}); 1006 | } 1007 | } 1008 | } 1009 | 1010 | /// Mixin to output overflow utilities. 1011 | /// @access private 1012 | /// @requires {variable} SEPARATOR_VALUE_START 1013 | /// @requires {variable} SEPARATOR_VALUE_END 1014 | /// @param {String} $suffix [null] - Responsive suffix 1015 | @mixin overflow($suffix: null) { 1016 | .u-ov#{$SEPARATOR_VALUE_START}visible#{$SEPARATOR_VALUE_END}#{$suffix} { 1017 | overflow: visible; 1018 | } 1019 | 1020 | .u-ov#{$SEPARATOR_VALUE_START}hidden#{$SEPARATOR_VALUE_END}#{$suffix} { 1021 | overflow: hidden; 1022 | } 1023 | 1024 | .u-ov#{$SEPARATOR_VALUE_START}scroll#{$SEPARATOR_VALUE_END}#{$suffix} { 1025 | overflow: scroll; 1026 | } 1027 | 1028 | .u-ov#{$SEPARATOR_VALUE_START}auto#{$SEPARATOR_VALUE_END}#{$suffix} { 1029 | overflow: auto; 1030 | } 1031 | } 1032 | 1033 | /// Mixin to output responsive overflow utilities. 1034 | /// @access private 1035 | /// @requires {mixin} breakpoint 1036 | /// @requires {mixin} overflow 1037 | /// @requires {variable} breakpoints 1038 | /// @requires {variable} SEPARATOR_MEDIA 1039 | @mixin responsive-overflow { 1040 | @each $key, $value in $breakpoints { 1041 | @include breakpoint($key) { 1042 | @include overflow(#{$SEPARATOR_MEDIA}#{$key}); 1043 | } 1044 | } 1045 | } 1046 | 1047 | /// Mixin to output color utilities. 1048 | /// @access private 1049 | /// @requires {variable} colors 1050 | /// @requires {variable} SEPARATOR_VALUE_START 1051 | /// @requires {variable} SEPARATOR_VALUE_END 1052 | /// @param {String} $suffix [null] - Responsive suffix 1053 | @mixin colors($suffix: null) { 1054 | @each $key, $value in $colors { 1055 | @if type-of($value) == 'color' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 1056 | .u-c#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 1057 | color: var(--color-#{$key}); 1058 | } 1059 | } 1060 | } 1061 | } 1062 | 1063 | /// Mixin to output responsive color utilities. 1064 | /// @access private 1065 | /// @requires {mixin} breakpoint 1066 | /// @requires {mixin} colors 1067 | /// @requires {variable} breakpoints 1068 | /// @requires {variable} SEPARATOR_MEDIA 1069 | @mixin responsive-colors { 1070 | @each $key, $value in $breakpoints { 1071 | @include breakpoint($key) { 1072 | @include colors(#{$SEPARATOR_MEDIA}#{$key}); 1073 | } 1074 | } 1075 | } 1076 | 1077 | /// Mixin to output background color utilities. 1078 | /// @access private 1079 | /// @requires {variable} colors 1080 | /// @requires {variable} SEPARATOR_VALUE_START 1081 | /// @requires {variable} SEPARATOR_VALUE_END 1082 | /// @param {String} $suffix [null] - Responsive suffix 1083 | @mixin background-colors($suffix: null) { 1084 | @each $key, $value in $colors { 1085 | @if type-of($value) == 'color' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 1086 | .u-bgc#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 1087 | background-color: var(--color-#{$key}); 1088 | } 1089 | } 1090 | } 1091 | } 1092 | 1093 | /// Mixin to output responsive background color utilities. 1094 | /// @access private 1095 | /// @requires {mixin} breakpoint 1096 | /// @requires {mixin} background-colors 1097 | /// @requires {variable} breakpoints 1098 | /// @requires {variable} SEPARATOR_MEDIA 1099 | @mixin responsive-background-colors { 1100 | @each $key, $value in $breakpoints { 1101 | @include breakpoint($key) { 1102 | @include background-colors(#{$SEPARATOR_MEDIA}#{$key}); 1103 | } 1104 | } 1105 | } 1106 | 1107 | /// Mixin to output font weight utilities. 1108 | /// @access private 1109 | /// @requires {variable} font-weights 1110 | /// @requires {variable} SEPARATOR_VALUE_START 1111 | /// @requires {variable} SEPARATOR_VALUE_END 1112 | /// @param {String} $suffix [null] - Responsive suffix 1113 | @mixin font-weights($suffix: null) { 1114 | @each $key, $value in $font-weights { 1115 | @if type-of($value) == 'number' or (type-of($value) == 'string' and str-index($value, 'var(--')) { 1116 | .u-fw#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 1117 | font-weight: var(--font-weight-#{$key}); 1118 | } 1119 | } 1120 | } 1121 | } 1122 | 1123 | /// Mixin to output responsive font weight utilities. 1124 | /// @access private 1125 | /// @requires {mixin} breakpoint 1126 | /// @requires {mixin} font-weights 1127 | /// @requires {variable} breakpoints 1128 | /// @requires {variable} SEPARATOR_MEDIA 1129 | @mixin responsive-font-weights { 1130 | @each $key, $value in $breakpoints { 1131 | @include breakpoint($key) { 1132 | @include font-weights(#{$SEPARATOR_MEDIA}#{$key}); 1133 | } 1134 | } 1135 | } 1136 | 1137 | /// Mixin to output font size utilities. 1138 | /// @access private 1139 | /// @requires {variable} font-sizes 1140 | /// @requires {variable} SEPARATOR_VALUE_START 1141 | /// @requires {variable} SEPARATOR_VALUE_END 1142 | /// @param {String} $suffix [null] - Responsive suffix 1143 | @mixin font-sizes($suffix: null) { 1144 | @each $key, $value in $font-sizes { 1145 | @if type-of($value) == 1146 | 'number' or 1147 | (type-of($value) == 'string' and str-index($value, 'var(--')) or 1148 | type-of($value) == 1149 | 'list' or 1150 | type-of($value) == 1151 | 'map' 1152 | { 1153 | .u-fz#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 1154 | font-size: var(--font-size-#{$key}); 1155 | line-height: var(--line-height-#{$key}); 1156 | } 1157 | } 1158 | } 1159 | } 1160 | 1161 | /// Mixin to output responsive font size utilities. 1162 | /// @access private 1163 | /// @requires {mixin} breakpoint 1164 | /// @requires {mixin} font-sizes 1165 | /// @requires {variable} breakpoints 1166 | /// @requires {variable} SEPARATOR_MEDIA 1167 | @mixin responsive-font-sizes { 1168 | @each $key, $value in $breakpoints { 1169 | @include breakpoint($key) { 1170 | @include font-sizes(#{$SEPARATOR_MEDIA}#{$key}); 1171 | } 1172 | } 1173 | } 1174 | 1175 | /// Mixin to output font family utilities. 1176 | /// @access private 1177 | /// @requires {variable} font-families 1178 | /// @requires {variable} SEPARATOR_VALUE_START 1179 | /// @requires {variable} SEPARATOR_VALUE_END 1180 | /// @param {String} $suffix [null] - Responsive suffix 1181 | @mixin font-families($suffix: null) { 1182 | @each $key, $value in $font-families { 1183 | @if type-of($value) == 'string' { 1184 | .u-ff#{$SEPARATOR_VALUE_START}#{$key}#{$SEPARATOR_VALUE_END}#{$suffix} { 1185 | font-family: var(--font-family-#{$key}); 1186 | } 1187 | } 1188 | } 1189 | } 1190 | 1191 | /// Mixin to output responsive font family utilities. 1192 | /// @access private 1193 | /// @requires {mixin} breakpoint 1194 | /// @requires {mixin} font-families 1195 | /// @requires {variable} breakpoints 1196 | /// @requires {variable} SEPARATOR_MEDIA 1197 | @mixin responsive-font-families { 1198 | @each $key, $value in $breakpoints { 1199 | @include breakpoint($key) { 1200 | @include font-families(#{$SEPARATOR_MEDIA}#{$key}); 1201 | } 1202 | } 1203 | } 1204 | 1205 | /// Mixin to output text alignment utilities. 1206 | /// @access private 1207 | /// @requires {variable} SEPARATOR_VALUE_START 1208 | /// @requires {variable} SEPARATOR_VALUE_END 1209 | /// @param {String} $suffix [null] - Responsive suffix 1210 | @mixin text-alignment($suffix: null) { 1211 | .u-ta#{$SEPARATOR_VALUE_START}left#{$SEPARATOR_VALUE_END}#{$suffix} { 1212 | text-align: left; 1213 | } 1214 | 1215 | .u-ta#{$SEPARATOR_VALUE_START}right#{$SEPARATOR_VALUE_END}#{$suffix} { 1216 | text-align: right; 1217 | } 1218 | 1219 | .u-ta#{$SEPARATOR_VALUE_START}center#{$SEPARATOR_VALUE_END}#{$suffix} { 1220 | text-align: center; 1221 | } 1222 | 1223 | .u-ta#{$SEPARATOR_VALUE_START}justify#{$SEPARATOR_VALUE_END}#{$suffix} { 1224 | text-align: justify; 1225 | } 1226 | } 1227 | 1228 | /// Mixin to output responsive text alignment utilities. 1229 | /// @access private 1230 | /// @requires {mixin} breakpoint 1231 | /// @requires {mixin} text-alignment 1232 | /// @requires {variable} breakpoints 1233 | /// @requires {variable} SEPARATOR_MEDIA 1234 | @mixin responsive-text-alignment { 1235 | @each $key, $value in $breakpoints { 1236 | @include breakpoint($key) { 1237 | @include text-alignment(#{$SEPARATOR_MEDIA}#{$key}); 1238 | } 1239 | } 1240 | } 1241 | 1242 | /// Mixin to output text transform utilities. 1243 | /// @access private 1244 | /// @requires {variable} SEPARATOR_VALUE_START 1245 | /// @requires {variable} SEPARATOR_VALUE_END 1246 | /// @param {String} $suffix [null] - Responsive suffix 1247 | @mixin text-transform($suffix: null) { 1248 | .u-tt#{$SEPARATOR_VALUE_START}lowercase#{$SEPARATOR_VALUE_END}#{$suffix} { 1249 | text-transform: lowercase; 1250 | } 1251 | 1252 | .u-tt#{$SEPARATOR_VALUE_START}uppercase#{$SEPARATOR_VALUE_END}#{$suffix} { 1253 | text-transform: uppercase; 1254 | } 1255 | 1256 | .u-tt#{$SEPARATOR_VALUE_START}capitalize#{$SEPARATOR_VALUE_END}#{$suffix} { 1257 | text-transform: capitalize; 1258 | } 1259 | 1260 | .u-tt#{$SEPARATOR_VALUE_START}none#{$SEPARATOR_VALUE_END}#{$suffix} { 1261 | text-transform: none; 1262 | } 1263 | } 1264 | 1265 | /// Mixin to output responsive text transform utilities. 1266 | /// @access private 1267 | /// @requires {mixin} breakpoint 1268 | /// @requires {mixin} text-transform 1269 | /// @requires {variable} breakpoints 1270 | /// @requires {variable} SEPARATOR_MEDIA 1271 | @mixin responsive-text-transform { 1272 | @each $key, $value in $breakpoints { 1273 | @include breakpoint($key) { 1274 | @include text-transform(#{$SEPARATOR_MEDIA}#{$key}); 1275 | } 1276 | } 1277 | } 1278 | 1279 | /// Mixin to output vertical alignment utilities. 1280 | /// @access private 1281 | /// @requires {variable} SEPARATOR_VALUE_START 1282 | /// @requires {variable} SEPARATOR_VALUE_END 1283 | /// @param {String} $suffix [null] - Responsive suffix 1284 | @mixin vertical-alignment($suffix: null) { 1285 | .u-va#{$SEPARATOR_VALUE_START}baseline#{$SEPARATOR_VALUE_END}#{$suffix} { 1286 | vertical-align: baseline; 1287 | } 1288 | 1289 | .u-va#{$SEPARATOR_VALUE_START}top#{$SEPARATOR_VALUE_END}#{$suffix} { 1290 | vertical-align: top; 1291 | } 1292 | 1293 | .u-va#{$SEPARATOR_VALUE_START}bottom#{$SEPARATOR_VALUE_END}#{$suffix} { 1294 | vertical-align: bottom; 1295 | } 1296 | 1297 | .u-va#{$SEPARATOR_VALUE_START}middle#{$SEPARATOR_VALUE_END}#{$suffix} { 1298 | vertical-align: middle; 1299 | } 1300 | 1301 | .u-va#{$SEPARATOR_VALUE_START}text-top#{$SEPARATOR_VALUE_END}#{$suffix} { 1302 | vertical-align: text-top; 1303 | } 1304 | 1305 | .u-va#{$SEPARATOR_VALUE_START}text-bottom#{$SEPARATOR_VALUE_END}#{$suffix} { 1306 | vertical-align: text-bottom; 1307 | } 1308 | 1309 | .u-va#{$SEPARATOR_VALUE_START}sub#{$SEPARATOR_VALUE_END}#{$suffix} { 1310 | vertical-align: sub; 1311 | } 1312 | 1313 | .u-va#{$SEPARATOR_VALUE_START}super#{$SEPARATOR_VALUE_END}#{$suffix} { 1314 | vertical-align: super; 1315 | } 1316 | } 1317 | 1318 | /// Mixin to output responsive vertical alignment utilities. 1319 | /// @access private 1320 | /// @requires {mixin} breakpoint 1321 | /// @requires {mixin} vertical-alignment 1322 | /// @requires {variable} breakpoints 1323 | /// @requires {variable} SEPARATOR_MEDIA 1324 | @mixin responsive-vertical-alignment { 1325 | @each $key, $value in $breakpoints { 1326 | @include breakpoint($key) { 1327 | @include vertical-alignment(#{$SEPARATOR_MEDIA}#{$key}); 1328 | } 1329 | } 1330 | } 1331 | 1332 | /// Mixin to output visibility utilities. 1333 | /// @access private 1334 | /// @requires {variable} SEPARATOR_VALUE_START 1335 | /// @requires {variable} SEPARATOR_VALUE_END 1336 | /// @param {String} $suffix [null] - Responsive suffix 1337 | @mixin visibility($suffix: null) { 1338 | .u-v#{$SEPARATOR_VALUE_START}visible#{$SEPARATOR_VALUE_END}#{$suffix} { 1339 | visibility: visible; 1340 | } 1341 | 1342 | .u-v#{$SEPARATOR_VALUE_START}hidden#{$SEPARATOR_VALUE_END}#{$suffix} { 1343 | visibility: hidden; 1344 | } 1345 | } 1346 | 1347 | /// Mixin to output responsive visibility utilities. 1348 | /// @access private 1349 | /// @requires {mixin} breakpoint 1350 | /// @requires {mixin} visibility 1351 | /// @requires {variable} breakpoints 1352 | /// @requires {variable} SEPARATOR_MEDIA 1353 | @mixin responsive-visibility { 1354 | @each $key, $value in $breakpoints { 1355 | @include breakpoint($key) { 1356 | @include visibility(#{$SEPARATOR_MEDIA}#{$key}); 1357 | } 1358 | } 1359 | } 1360 | 1361 | /// Mixin to output cursor utilities. 1362 | /// @access private 1363 | /// @requires {variable} SEPARATOR_VALUE_START 1364 | /// @requires {variable} SEPARATOR_VALUE_END 1365 | /// @param {String} $suffix [null] - Responsive suffix 1366 | @mixin cursors($suffix: null) { 1367 | .u-cur#{$SEPARATOR_VALUE_START}auto#{$SEPARATOR_VALUE_END}#{$suffix} { 1368 | cursor: auto; 1369 | } 1370 | 1371 | .u-cur#{$SEPARATOR_VALUE_START}pointer#{$SEPARATOR_VALUE_END}#{$suffix} { 1372 | cursor: pointer; 1373 | } 1374 | } 1375 | 1376 | /// Mixin to output responsive cursor utilities. 1377 | /// @access private 1378 | /// @requires {mixin} breakpoint 1379 | /// @requires {mixin} cursors 1380 | /// @requires {variable} breakpoints 1381 | /// @requires {variable} SEPARATOR_MEDIA 1382 | @mixin responsive-cursors { 1383 | @each $key, $value in $breakpoints { 1384 | @include breakpoint($key) { 1385 | @include cursors(#{$SEPARATOR_MEDIA}#{$key}); 1386 | } 1387 | } 1388 | } 1389 | 1390 | /// Mixin to output reset utilities. 1391 | /// @access private 1392 | /// @requires {variable} SEPARATOR_VALUE_START 1393 | /// @requires {variable} SEPARATOR_VALUE_END 1394 | /// @param {String} $suffix [null] - Responsive suffix 1395 | @mixin reset($suffix: null) { 1396 | .u-res#{$SEPARATOR_VALUE_START}link#{$SEPARATOR_VALUE_END}#{$suffix} { 1397 | color: inherit; 1398 | text-decoration: none; 1399 | } 1400 | 1401 | .u-res#{$SEPARATOR_VALUE_START}list#{$SEPARATOR_VALUE_END}#{$suffix} { 1402 | padding-left: 0; 1403 | list-style: none; 1404 | } 1405 | 1406 | .u-res#{$SEPARATOR_VALUE_START}button#{$SEPARATOR_VALUE_END}#{$suffix} { 1407 | padding: 0; 1408 | color: inherit; 1409 | font: inherit; 1410 | letter-spacing: inherit; 1411 | text-align: inherit; 1412 | background-color: transparent; 1413 | border: 0; 1414 | } 1415 | } 1416 | 1417 | /// Mixin to output responsive reset utilities. 1418 | /// @access private 1419 | /// @requires {mixin} breakpoint 1420 | /// @requires {mixin} reset 1421 | /// @requires {variable} breakpoints 1422 | /// @requires {variable} SEPARATOR_MEDIA 1423 | @mixin responsive-reset { 1424 | @each $key, $value in $breakpoints { 1425 | @include breakpoint($key) { 1426 | @include reset(#{$SEPARATOR_MEDIA}#{$key}); 1427 | } 1428 | } 1429 | } 1430 | 1431 | /// Mixin to output helper utilities. 1432 | /// @access private 1433 | /// @param {String} $suffix [null] - Responsive suffix 1434 | @mixin helper($suffix: null) { 1435 | .u-cf#{$suffix} { 1436 | &::after { 1437 | display: table; 1438 | clear: both; 1439 | content: ''; 1440 | } 1441 | } 1442 | 1443 | .u-ell#{$suffix} { 1444 | overflow: hidden; 1445 | white-space: nowrap; 1446 | text-overflow: ellipsis; 1447 | } 1448 | 1449 | .u-hidden#{$suffix} { 1450 | position: absolute; 1451 | width: 1px; 1452 | height: 1px; 1453 | margin: -1px; 1454 | padding: 0; 1455 | overflow: hidden; 1456 | white-space: nowrap; 1457 | border: 0; 1458 | clip: rect(0 0 0 0); 1459 | clip-path: inset(50%); 1460 | } 1461 | 1462 | .u-h1#{$suffix} { 1463 | font-size: var(--font-size-h1); 1464 | line-height: var(--line-height-h1); 1465 | } 1466 | 1467 | .u-h2#{$suffix} { 1468 | font-size: var(--font-size-h2); 1469 | line-height: var(--line-height-h2); 1470 | } 1471 | 1472 | .u-h3#{$suffix} { 1473 | font-size: var(--font-size-h3); 1474 | line-height: var(--line-height-h3); 1475 | } 1476 | 1477 | .u-h4#{$suffix} { 1478 | font-size: var(--font-size-h4); 1479 | line-height: var(--line-height-h4); 1480 | } 1481 | 1482 | .u-h5#{$suffix} { 1483 | font-size: var(--font-size-h5); 1484 | line-height: var(--line-height-h5); 1485 | } 1486 | 1487 | .u-h6#{$suffix} { 1488 | font-size: var(--font-size-h6); 1489 | line-height: var(--line-height-h6); 1490 | } 1491 | } 1492 | 1493 | /// Mixin to output responsive helper utilities. 1494 | /// @access private 1495 | /// @requires {mixin} breakpoint 1496 | /// @requires {mixin} helper 1497 | /// @requires {variable} breakpoints 1498 | /// @requires {variable} SEPARATOR_MEDIA 1499 | @mixin responsive-helper { 1500 | @each $key, $value in $breakpoints { 1501 | @include breakpoint($key) { 1502 | @include helper(#{$SEPARATOR_MEDIA}#{$key}); 1503 | } 1504 | } 1505 | } 1506 | 1507 | //* Public mixins 1508 | // ======================================================================== */ 1509 | 1510 | /// Mixin to output media queries. 1511 | /// @access public 1512 | /// @requires {mixin} breakpoint 1513 | /// @param {ArgList} $keys - Breakpoint key(s) 1514 | @mixin media($keys...) { 1515 | @each $value in $keys { 1516 | @include breakpoint($value) { 1517 | @content; 1518 | } 1519 | } 1520 | } 1521 | -------------------------------------------------------------------------------- /scss/utilities/_alignment.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #ALIGNMENT 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Alignment utilities builder. 9 | @include alignment; 10 | 11 | // Responsive alignment utilities builder. 12 | @if $enable-responsive-alignment { 13 | @include responsive-alignment; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_clear.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #CLEAR 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Clear utilities builder. 9 | @include clear; 10 | 11 | // Responsive clear utilities builder. 12 | @if $enable-responsive-clear { 13 | @include responsive-clear; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_colors.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #COLORS 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Color utilities builder. 9 | @include colors; 10 | 11 | // Background color utilities builder. 12 | @include background-colors; 13 | 14 | // Responsive color utilities builder. 15 | @if $enable-responsive-colors { 16 | @include responsive-colors; 17 | @include responsive-background-colors; 18 | } 19 | -------------------------------------------------------------------------------- /scss/utilities/_cursors.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #CURSORS 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Cursor utilities builder. 9 | @include cursors; 10 | 11 | // Responsive cursor utilities builder. 12 | @if $enable-responsive-cursors { 13 | @include responsive-cursors; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_display.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #DISPLAY 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Display utilities builder. 9 | @include display; 10 | 11 | // Responsive display utilities builder. 12 | @if $enable-responsive-display { 13 | @include responsive-display; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_flex.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #FLEX 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Flex utilities builder. 9 | @include flex; 10 | 11 | // Responsive flex utilities builder. 12 | @if $enable-responsive-flex { 13 | @include responsive-flex; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_float.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #FLOAT 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Float utilities builder. 9 | @include float; 10 | 11 | // Responsive float utilities builder. 12 | @if $enable-responsive-float { 13 | @include responsive-float; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_helper.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #HELPER 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Helper utilities builder. 9 | @include helper; 10 | 11 | // Responsive helper utilities builder. 12 | @if $enable-responsive-helper { 13 | @include responsive-helper; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_overflow.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #OVERFLOW 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Overflow utilities builder. 9 | @include overflow; 10 | 11 | // Responsive overflow utilities builder. 12 | @if $enable-responsive-overflow { 13 | @include responsive-overflow; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_position.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #POSITION 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Position utilities builder. 9 | @include position; 10 | 11 | // Responsive position utilities builder. 12 | @if $enable-responsive-position { 13 | @include responsive-position; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_reset.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #RESET 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Reset utilities builder. 9 | @include reset; 10 | 11 | // Responsive reset utilities builder. 12 | @if $enable-responsive-reset { 13 | @include responsive-reset; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_sizing.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #SIZING 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Sizing utilities builder. 9 | @include sizing; 10 | 11 | // Responsive sizing utilities builder. 12 | @if $enable-responsive-sizing { 13 | @include responsive-sizing; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_spacing.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #SPACING 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Spacing utilities builder. 9 | @include spacing; 10 | 11 | // Responsive spacing utilities builder. 12 | @if $enable-responsive-spacing { 13 | @include responsive-spacing; 14 | } 15 | -------------------------------------------------------------------------------- /scss/utilities/_text.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #TEXT 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Font weight utilities builder. 9 | @include font-weights; 10 | 11 | // Font size utilities builder. 12 | @include font-sizes; 13 | 14 | // Font family utilities builder. 15 | @include font-families; 16 | 17 | // Text alignment utilities builder. 18 | @include text-alignment; 19 | 20 | // Text transform utilities builder. 21 | @include text-transform; 22 | 23 | // Vertical alignment utilities builder. 24 | @include vertical-alignment; 25 | 26 | // Responsive text utilities builder. 27 | @if $enable-responsive-text { 28 | @include responsive-font-weights; 29 | @include responsive-font-sizes; 30 | @include responsive-font-families; 31 | @include responsive-text-alignment; 32 | @include responsive-text-transform; 33 | @include responsive-vertical-alignment; 34 | } 35 | -------------------------------------------------------------------------------- /scss/utilities/_visibility.scss: -------------------------------------------------------------------------------- 1 | /* ========================================================================== 2 | #VISIBILITY 3 | ========================================================================== */ 4 | 5 | /* Declarative rules 6 | ========================================================================== */ 7 | 8 | // Visibility utilities builder. 9 | @include visibility; 10 | 11 | // Responsive visibility utilities builder. 12 | @if $enable-responsive-visibility { 13 | @include responsive-visibility; 14 | } 15 | --------------------------------------------------------------------------------