{"id":29574848,"url":"https://github.com/pocketsize/bolts-lib","last_synced_at":"2025-07-19T09:01:54.739Z","repository":{"id":34776942,"uuid":"183617481","full_name":"pocketsize/bolts-lib","owner":"pocketsize","description":"Front-end helper library","archived":false,"fork":false,"pushed_at":"2024-02-02T09:59:16.000Z","size":37,"stargazers_count":6,"open_issues_count":22,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-06-12T06:24:21.430Z","etag":null,"topics":["bolts","es6","front-end","helper","javascript","js","library","sass","scss","toolkit"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pocketsize.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null},"funding":{"github":"andreekeberg"}},"created_at":"2019-04-26T11:33:25.000Z","updated_at":"2022-05-19T00:49:12.000Z","dependencies_parsed_at":"2024-02-02T10:52:23.948Z","dependency_job_id":"1cfc2f7a-2b0b-4c6a-bb4e-6db276a6ed1c","html_url":"https://github.com/pocketsize/bolts-lib","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/pocketsize/bolts-lib","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fbolts-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fbolts-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fbolts-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fbolts-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pocketsize","download_url":"https://codeload.github.com/pocketsize/bolts-lib/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pocketsize%2Fbolts-lib/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265685983,"owners_count":23811201,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bolts","es6","front-end","helper","javascript","js","library","sass","scss","toolkit"],"created_at":"2025-07-19T09:01:35.492Z","updated_at":"2025-07-19T09:01:54.725Z","avatar_url":"https://github.com/pocketsize.png","language":"SCSS","funding_links":["https://github.com/sponsors/andreekeberg"],"categories":[],"sub_categories":[],"readme":"# Bolts \n\n[![Version](https://img.shields.io/npm/v/bolts-lib)](https://www.npmjs.com/package/bolts-lib) [![Total Downloads](https://img.shields.io/npm/dt/bolts-lib)](https://www.npmjs.com/package/bolts-lib) [![License](https://img.shields.io/npm/l/bolts-lib)](https://www.npmjs.com/package/bolts-lib)\n\nBolts is a front-end helper library, consisting of practical Sass mixins and functions, along with a collection of JavaScript functions, helping you deal with all the mundane website building and styling tasks, so that you can focus on creating something new. It aims to be a toolkit that takes care of the things you're tired of doing.\n\nBolts doesn't output any unnecessary styles, and all JavaScript functions can be loaded separately through ES6+ imports, making its footprint as tiny as possible.\n\n## Installation\n\n### npm\n\n`npm i bolts-lib`\n\n### yarn\n\n`yarn add bolts-lib`\n\n## Sass\n\n### Usage\n\n#### Including Bolts in your Sass files\n\n`@import '~bolts-lib/src/sass/bolts';`\n\n#### Configuration variables\n\nDefine any of the following variables before including Bolts to set default options for many of the mixins and functions.\n\n| Variable name                                 | Example value                                 | Description                                                                                     |\n| --------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------- |\n| $bolts-reset-focus-styles                     | `true`                                        | Removes outline on `:focus` state                                                               |\n| $bolts-reset-list-styles                      | `true`                                        | Resets `list-style` on all `\u003cul\u003e` and `\u003col\u003e` elements                                           |\n| $bolts-reset-legacy-element-styles            | `true`                                        | Resets styles on some deprecated elements (such as font, marquee, blink, nobr and more          |\n| $bolts-default-sticky-footer-wrapper-selector | `'\u003e *:first-child'`                           | Selector for wrapper (content without footer) used by sticky-footer mixin                       |\n| $bolts-default-sticky-footer-footer-selector  | `'\u003e footer'`                                  | Selector for footer used by sticky-footer mixin                                                 |\n| $bolts-default-pseudo                         | `before`                                      | Pseudo selector used by aspect-ratio, clear and vertical-align mixins if argument is not passed |\n| $bolts-default-font-path                      | `'../fonts'`                                  | `$path` used by font mixin if argument is not passed                                            |\n| $bolts-default-container-width                | `90%`                                         | `$width` used by container mixin if argument is not passed                                      |\n| $bolts-default-container-max-width            | `1080px`                                      | `$max-width` used by container mixin if argument is not passed                                  |\n| $bolts-default-container-align                | `center`                                      | '$align' used by container mixin if argument is not passed                                      |\n| $bolts-default-inline-layout-align            | `top`                                         | `$align` used by inline-layout mixin if argument is not passed                                  |\n| $bolts-default-inline-layout-gutters          | `20px`                                        | `$gutters` used by inline-layout mixin if argument is not passed                                |\n| $bolts-default-flex-layout-align              | `top`                                         | `$align` used by flex-layout mixin if argument is not passed                                    |\n| $bolts-default-flex-layout-gutters            | `20px`                                        | `$gutters` used by flex-layout mixin if argument is not passed                                  |\n| $bolts-default-background-image               | `'../images/bg.jpg'`                          | `$image` used by background mixin if argument is not passed                                     |\n| $bolts-default-background-size                | `cover`                                       | `$size` used by backgound mixin if argument is not passed                                       |\n| $bolts-default-background-position            | `50% 50%`                                     | `$position` used by backgound mixin if argument is not passed                                   |\n| $bolts-default-background-repeat              | `repeat`                                      | `$repeat` used by backgound mixin if argument is not passed                                     |\n| $bolts-default-background-attachment          | `fixed`                                       | `$attachment` used by backgound mixin if argument is not passed                                 |\n| $bolts-default-background-color               | `#ddd`                                        | `$color` used by backgound mixin if argument is not passed                                      |\n| $bolts-default-transition-property            | `opacity`                                     | `$property` used by transition mixin if argument is not passed                                  |\n| $bolts-default-transition-duration            | `0.2s`                                        | `$duration` used by transition mixin if argument is not passed                                  |\n| $bolts-default-transition-easing              | `ease-in-out`                                 | `$easing` used by transition mixin if argument is not passed                                    |\n| $bolts-default-transition-delay               | `0.1s`                                        | `$delay` used by transition mixin if argument is not passed                                     |\n| $bolts-default-transition-queue               | `true`                                        | Enables queue with default property on transition mixin unless overwritten                      |\n| $bolts-default-transition-queue-property      | `visibility`                                  | `$queue` (property) used by transition mixin if argument is not passed                          |\n| $bolts-default-transition-queue-duration      | `0s`                                          | `$queue-duration` used by transition mixin if argument is not passed                            |\n| $bolts-default-transition-queue-easing        | `linear`                                      | `$queue-easing` used by transition mixin if argument is not passed                              |\n| $bolts-default-auto-col-min                   | 1                                             | `$min` (minimum amount of columns) used by auto-col mixin if argument is not passed             |\n| $bolts-default-auto-col-max                   | 12                                            | `$max` (maximum amount of columns) used by auto-col mixin if argument is not passed             |\n| $bolts-default-responsive-font-size-ratio     | 1.6                                           | `$ratio` used by responsive-font-size mixin if argument is not passed                           |\n| $bolts-breakpoints                            | `(medium: 500px)`                             | Breakpoints that can be accessed by the width and height functions when writing media queries   |\n| $bolts-selectors                              | `(headings: 'h1, h2')`                        | Map containing element collections that can be accessed by the `select` mixin                   |\n| $bolts-easings                                | `( ease-in-quad: '0.55, 0.085, 0.68, 0.53' )` | Map containing element collections that can be accessed by the `select` mixin                   |\n\n\u003cbr\u003e\n\n------------\n\n\u003cbr\u003e\n\n## Functions\n\n### Breakpoint\n\n- `width()`\n- `width-from()`\n- `width-to()`\n- `height()`\n- `height-from()`\n- `height-to()`\n\nFunctions to run inside your `@media` queries that lets you access your defined breakpoints. It automatically compensates your pixel values to prevent duplicate properties being set.\n\n**Usage**:\n\n```scss\n.columns {\n  @include inline-layout;\n\n  .column {\n    @media ( width-to(small) )      { width: 100%; }\n    @media ( width(small, medium) ) { width: 50%; }\n    @media ( width(medium, large) ) { width: 25%; }\n    @media ( width-from(large) )    { width: 12.5%; }\n  }\n}\n```\n\n**Arguments:**\n\n| Name  | Accepted values                                                | Description                                              |\n| ----- | -------------------------------------------------------------- | -------------------------------------------------------- |\n| $from | CSS length unit or key name from the `$bolts-breakpoints` map  | Sets the `min-width` or `min-height` in the media query. |\n| $to   | CSS length unit or key name from the `$bolts-breakpoints` map  | Sets the `max-width` or `max-height` in the media query. |\n\n\n\u003cbr\u003e\n\n\n### Retina\n\n- `retina()`\n\nFunction to run in your `@media` queries to target retina screens.\n\n\u003cbr\u003e\n\n**Usage**:\n\n```scss\n.icon {\n  @media ( retina() ) { background-image: url('icon@2x.jpg'); }\n}\n```\n\n\n\u003cbr\u003e\n\n\n### Easings\n\n- `ease()`\n\nReturns a cubic-bezier with the specified easing.\nIf a named easing if supplied, it looks for easings defined in $bolts-easings, otherwise the supplied value is used directly.\n\n| Name    | Accepted values                                                                     | Description     |\n| ------- | ----------------------------------------------------------------------------------- | --------------- |\n| $easing | CSS standard named easings, cubic-bezier, or key name from the `$bolts-easings` map | Desired easing  |\n\n\u003cbr\u003e\n\n------------\n\n\u003cbr\u003e\n\n## Mixins\n\n### Reset\n\n- `reset`\n\n*This mixin currently has no description*\n\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Sticky footer\n\n- `sticky-footer()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n.page {\n  @include sticky-footer(\n    '.page-wrapper',\n    '.page-footer'\n  );\n}\n```\n\n**Arguments:**\n\n| Name              | Accepted values | Default value | Description |\n| ----------------- | ----------------| ------------- | ----------- |\n| $wrapper-selector | -               | -             | -           |\n| $footer-selector  | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Fonts\n\n- `font()`\n\nSimpler declaration of `@font-face`s (include this before any output, including the reset and boilerplate).\n\n**Usage**:\n\n```scss\n@include font(\n  $family:   FontAwesome,\n  $filename: fontawesome-webfont,\n  $formats:  ( eot, woff2, woff, ttf, svg ),\n  $svg-id:   fontawesomeregular\n);\n\n@include font(\n  $family: 'Lato',\n  $formats: ( woff ),\n  $variations: (\n    ( filename: 'Lato-Regular' ),\n    ( filename: 'Lato-Italic', style: italic ),\n    ( filename: 'Lato-Bold', weight: 700 ),\n    ( filename: 'Lato-BoldItalic', weight: 700, style: italic )\n  )\n)\n```\n\n**Arguments:**\n\n| Name        | Example values                                                     | Description                                                                                                              |\n| ----------- | ------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ |\n| $family     | `'Lato'`                                                           | Font family name                                                                                                         |\n| $weight     | `400`                                                              | `font-weight`                                                                                                            |\n| $style      | `normal`                                                           | `font-style`                                                                                                             |\n| $filename   | `Lato-Regular`                                                     | Font filename without extension                                                                                          |\n| $formats    | `(ttf, otf, woff, woff2, svg)`                                     | List of the available formats of your font                                                                               |\n| $path       | `'../fonts'`                                                       | Defaults to `$bolts-font-path`                                                                                           |\n| $svg-id     | `latoregular`                                                      | Defaults to filename                                                                                                     |\n| $variations | `( (filename: Lato-Regular), (filename: Lato-Bold, weight: 700) )` | List of maps with font variations. You only need to enter the properties that deviate from the defaults.                 |\n\n\n\u003cbr\u003e\n\n\n### Responsive font size\n\n- `responsive-font-size()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name   | Accepted values | Default value | Description |\n| ------ | ----------------| ------------- | ----------- |\n| $ratio | -               | -             | -           |\n| $min   | -               | -             | -           |\n| $max   | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Container\n\n- `container()`\n\nSets basic container styling on element.\n\n**Usage:**\n\n```scss\n.page {\n  .page-inner {\n    @include container(90%, 1080px);\n  }\n}\n```\n\n**Arguments:**\n\n| Name        | Accepted values                   | Default value                                 | Description                                           |\n| ----------- | --------------------------------- | --------------------------------------------  | ----------------------------------------------------- |\n| $width      | CSS length unit                   | Value of `$bolts-default-container-width`     | Width of container                                    |\n| $max-width  | CSS length unit                   | Value of `$bolts-default-container-max-width` | Max width of container                                |\n| align       | `left`, `center`, `right`         | Value of `$bolts-default-container-align`     | Container alignment                                   |\n\n\n\u003cbr\u003e\n\n\n### Clearing whitespace\n\n- `clear-whitespace()`\n\nEliminates the space between `inline-block` elements using `font-size: 0`.\n\n**Usage:**\n\n```scss\n.header {\n  @include clear-whitespace($font-size: 12px);\n\n  .header-logo {\n    display: inline-block;\n    width: 120px;\n    height: 60px;\n  }\n}\n```\n\n**Arguments:**\n\n| Name       | Accepted values | Default value | Description                                         |\n| ---------- | --------------- | ------------- |  -------------------------------------------------- |\n| $font-size | CSS length unit | `1rem`        | Font size to reset child elements to (can't use em) |\n\n\n\u003cbr\u003e\n\n\n### Overlay\n\n- `overlay()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n.hero {\n    position relative;\n    height: 100vh;\n\n    \u0026:before {\n        content: '';\n        @include overlay;\n        background-color: rgba(black, 0.5);\n    }\n}\n```\n\n**Arguments:**\n\n| Name         | Accepted values | Description                                                       |\n| ------------ | --------------- | ----------------------------------------------------------------- |\n| $force-size  | Bool            | sets width and height to 100% (necessary when applied to iframes) |\n\n\n\u003cbr\u003e\n\n\n### Backgrounds\n\n- `background()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n.icon {\n  @include background(\n    '../images/icon.png',\n    $size: contain,\n    $position: 50% 50%\n  );\n  width: 40px;\n  height: 40px;\n}\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Transitions\n\n- `transition()`\n\nSets transition with pre set vales for duration and easing. Second argument queues a second transition after the initial transition is done.\n\n**Usage:**\n\n```scss\n.button {\n    background-color: black;\n    @include transition(background-color);\n\n    \u0026:hover {\n      background-color: red;\n    }\n}\n```\n\n**Usage with $queue:**\n\n```scss\n.header-icon {\n    visibility: hidden;\n    opacity: 0;\n    @include transition(opacity, $queue: visibility);\n\n    @include state('menu-open') {\n      visibility: visible;\n      opacity: 1;\n      @include transition(opacity);\n    }\n}\n```\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Transition height\n\n- `transition-height()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Element aspect ratio\n\n- `aspect-ratio()`\n\nSet an aspect ratio for a block element.\n\n**Usage:**\n\n```scss\n.hero {\n  @include background('../images/background.jpg');\n  @include aspect-ratio(16, 9);\n}\n```\n\n**Arguments:**\n\n| Name         | Accepted values | Description                                        |\n| ------------ | --------------- | -------------------------------------------------- |\n| $x           | Number          | What width value to base the ratio calculation on  |\n| $y           | Number          | What height value to base the ratio calculation on |\n\n\n\u003cbr\u003e\n\n\n### Classic clearfix\n\n- `clear()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Element centering\n\n- `center()`\n\nCenter an element inside it's closest relatively positioned parent in either, or both direction (vertical/horizontal)\n\n\u003e **Known issue:** Some browsers positions the element \"between pixels\", making it appear blurred. Use `transform-style: preserve-3d` on the parent to avoid this. \n\n**Usage:**\n\n```scss\n.hero {\n  position: relative;\n\n  .hero-text {\n    @include center(vertical);\n    left: 0;\n    right: 0;\n  }\n}\n```\n\n**Arguments:**\n\n| Name         | Accepted values                  | Default value | Description                        |\n| ------------ | -------------------------------- | ------------- | ---------------------------------- |\n| $direction   | `both`, `vertical`, `horizontal` | `both`        | What axis to center the element on |\n\n\n\u003cbr\u003e\n\n\n### Vertical alignment\n\n- `vertical-align()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n.hero {\n  @include vertical-align(middle);\n  min-height: 100vh;\n  text-align: center;\n\n  .hero-inner {\n    width: 90%;\n    max-width: 1080px;\n    text-align: left;\n\n    .hero-title {\n      @extend %title-large;\n    }\n\n    .hero-subtitle {\n      @extend %title-medium;\n    }\n  }\n}\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n### Line clamp\n\n- `line-clamp()`\n\n*Truncate text at the selected number of lines.*\n\n**Usage:**\n\n```scss\n.excerpt {\n  @include line-clamp(3);\n}\n```\n\n**Arguments:**\n\n| Name  | Accepted values | Default value | Description                                         |\n| ----- | --------------- | ------------- | --------------------------------------------------- |                                      \n| $rows | `integer`       | 0             | If no number is specified the text is not truncated |\n\n\n\u003cbr\u003e\n\n\n### Visually hidden\n\n- `visually-hidden()`\n\n*This mixin currently has no description*\n\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Antialiasing\n\n- `antialias()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n.hero-text {\n  color: white;\n  @include antialias;\n}\n```\n\n**Arguments:**\n\n| Name    | Accepted values       | Description                                                                  |\n| ------- | --------------------- | ---------------------------------------------------------------------------- |\n| $method | default, none, reset  | Sets font smoothing (webkit and moz-osx), defaults to antialiased/grayscale  |\n\n\n\u003cbr\u003e\n\n\n### Scrollable content\n\n- `scroll()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n.modal-inner {\n  @include scroll;\n}\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Viewport\n\n- `viewport()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n.page {\n  @include viewport;\n}\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Grayscale\n\n- `grayscale()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n.photo {\n  @include transition(filter -webkit-filter);\n\n  \u0026:hover {\n    @include grayscale;\n  }\n}\n```\n\n\n\u003cbr\u003e\n\n\n### Layouting with inline blocks\n\n- `inline-layout()`\n- `inline-row()`\n- `inline-column()`\n\nThe inline-layout component is another take on layouts, where the columns are `inline-block` elements, which eliminates the need for rows, and makes them respond to text-align. This is especially useful for dynamic content.\n\n**Usage:**\n\nHTML\n\n```html\n\u003cdiv class=\"items\"\u003e\n  \u003cdiv class=\"item is-small\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"item is-medium\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"item is-small\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"item is-large\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"item is-small\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\nSCSS\n\n```scss\n.items {\n  @include inline-layout;\n\n  .item {\n    @media ( width-to(medium) ) {\n      \u0026.is-small { width: 50%; }\n      \u0026.is-medium, \u0026.is-large { width: 100%; }\n    }\n\n    @media ( width-from(medium) ) {\n      \u0026.is-small  { width: 25%; }\n      \u0026.is-medium { width: 50%; }\n      \u0026.is-large  { width: 75%; }\n    }\n  }\n}\n```\n\n**Arguments:**\n\n| Name     | Accepted values                   | Default value | Description            |\n| -------- | --------------------------------- | ------------  | ---------------------- |\n| $gutters | CSS length unit                   | `0`           | Size of gutters        |\n| $col     | String                            | `'\u003e *'`       | Selector used to find a direct descendant column element |\n\n\n\n\u003cbr\u003e\n\n\n### Layouting with flex\n\n- `flex-layout()`\n- `flex-row()`\n- `flex-column()`\n\n\n*Sets element to display: flex and set behaviour of child elements*\n\n**Usage:**\n\n```scss\n.is-columns-4 {\n  @include flex-layout(1 1 1 1, 20px);          \n}\n```\n\n\u003cbr\u003e\n\n**Arguments:**\n\n| Name     | Accepted values | Default value | Description                                                     |\n| -------- | ----------------| ------------- | --------------------------------------------------------------- |\n| $columns | numbers         | `false`       | Set amount of columns per row and how much space they will take |\n| $gutters | px              | `false`       | Set gutters between child elements - ex `20px`                  |\n| $align   | string          | `false`       | Set the alignment of child elements                             |\n\n\n\u003cbr\u003e\n\n\n### Auto columns\n\n- `auto-col()`\n\nSets widths to dynamically fit all columns in one row\n\n**Usage:**\n\n```scss\n.columns {\n  @include inline-layout;\n\n  .column {\n    // 5 columns = width: 20%\n    // 2 columns = width: 50%\n    @include auto-col;\n  }\n}\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Reversing columns\n\n- `reverse()`\n\nReverse the order of an element's children without the need for duplicate markup.\n\n**Usage:**\n\n```scss\n.items {\n  @include inline-layout;\n\n  .item { width: 25%; }\n\n  @media ( width-to(medium) ) {\n    @include reverse;\n  }\n}\n```\n\n\n\u003cbr\u003e\n\n\n### States\n\n- `state()`\n\n*Matches elements based on current state.*\n\n**Usage:**\n\n```scss\n.menu {\n  @include state('menu', false) { \n    display: none; \n  }  \n  @include state('menu') { \n    display: block; \n  }\n}\n```\n\n**Arguments:**\n\n| Name   | Accepted values  | Default value | Description                                                                     |\n| ------ | ---------------- | ------------- | ------------------------------------------------------------------------------- |\n| $key   | `string`         | `false`       | The state to match, ex `menu`                                                   |\n| $value | `bool`, `string` | `true`        | State value to match                                                            |\n| $local | `bool`           | `false`       | If true, based on the state of the current element. If false, the global state  |\n\n\n\u003cbr\u003e\n\n\n### Selecting elements\n\n- `select()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Styling input placeholders\n\n- `placeholder()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Select elements of a given amount\n\n- `count()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Selector mathing a resizing window\n\n- `resizing()`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n\n### Match image orientation\n\n- `orientation()`\n\n*Matches elements based on detected orientation state*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name         | Accepted values                   | Default value | Description                          |\n| ------------ | --------------------------------- | ------------- | ------------------------------------ |\n| $orientation | `portrait`, `landscape`, `square` | `false`       | Match the orientation of the element |\n\n\n\u003cbr\u003e\n\n\n### Hover\n\n- `hover`\n- `no-hover`\n\n*This mixin currently has no description*\n\n**Usage:**\n\n```scss\n// This mixin currently has no example\n```\n\n**Arguments:**\n\n| Name | Accepted values | Default value | Description |\n| ---- | ----------------| ------------- | ----------- |\n| -    | -               | -             | -           |\n\n\n\u003cbr\u003e\n\n------------\n\n\u003cbr\u003e\n\n## JavaScript\n\n### Setup\n\n*JavaScript setup currently has no documentation.*\n\n### Functions\n\n*JavaScript functionality currently has no documentation*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocketsize%2Fbolts-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpocketsize%2Fbolts-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpocketsize%2Fbolts-lib/lists"}