{"id":17095478,"url":"https://github.com/cosanca/adaptable","last_synced_at":"2026-02-06T11:10:23.597Z","repository":{"id":44131618,"uuid":"141602153","full_name":"CosAnca/adaptable","owner":"CosAnca","description":"SCSS mixins collection for flexbox based grid layouts","archived":false,"fork":false,"pushed_at":"2022-12-03T12:44:57.000Z","size":750,"stargazers_count":1,"open_issues_count":10,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-02T05:58:04.483Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CosAnca.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-19T15:59:29.000Z","updated_at":"2022-06-05T16:20:35.000Z","dependencies_parsed_at":"2023-01-23T05:01:07.233Z","dependency_job_id":null,"html_url":"https://github.com/CosAnca/adaptable","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CosAnca%2Fadaptable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CosAnca%2Fadaptable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CosAnca%2Fadaptable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CosAnca%2Fadaptable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CosAnca","download_url":"https://codeload.github.com/CosAnca/adaptable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245143990,"owners_count":20568049,"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":[],"created_at":"2024-10-14T14:42:53.074Z","updated_at":"2026-02-06T11:10:23.562Z","avatar_url":"https://github.com/CosAnca.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Adaptable\n\n**Adaptable** is a Sass (SCSS) mixins library for building flexbox based grids.\n\n## Installation\n\nWith yarn:\n\n```zsh\nyarn add adaptable\n```\n\nWith npm:\n\n```zsh\nnpm install adaptable\n```\n\nThen just import `@import \"adaptable/core/adaptable\";` at the top of your main sass file.\n\n**Note:** your Sass configuration **must** be set to access certain dependencies or installation will fail. Either:\n\n- include [Eyeglass](https://github.com/sass-eyeglass/eyeglass) in your [build tools](https://github.com/sass-eyeglass/eyeglass#building-sass-files-with-eyeglass-support), or;\n- set `node_modules` in your `includePaths`.\n\n## Usage\n\n### Settings\n\n**Adaptable** is build around two configuration units in the form of sass maps, that can be overwritten depending on each project needs or grid requirements.\n\n#### `$adaptable-grid`\n\nThis variable is a sass map that overrides Adaptable's default grid settings. Use this to define your project's grid properties including column-gaps, total column count or grid debugging color.\n\n_Default settings:_\n\n```scss\n$adaptable-grid: (\n  columns: 12,\n  column-gap: 1.5rem,\n  row-gap: 1.5rem,\n  color: rgba(#00d4ff, 0.25),\n);\n```\n\n##### Properties\n\n| Name       | Type               | Default             | Description                                    |\n| ---------- | ------------------ | ------------------- | ---------------------------------------------- |\n| columns    | number (unitless)  | 12                  | Default number of the total grid columns.      |\n| column-gap | number (with unit) | 1.5rem              | Default grid column-gap width between columns. |\n| row-gap    | number (with unit) | 1.5rem              | Default grid row-gap width between grid cells. |\n| color      | HEX, RGBA          | rgba(#00d4ff, 0.25) | Default grid debug color.                      |\n\n### Mixins\n\n#### Grid container\n\nCreates a grid container with flexbox properties.\n\n##### Example\n\n_SCSS_\n\n```scss\n.element {\n  @include grid-container;\n}\n```\n\n_CSS Output_\n\n```css\n.element {\n  display: flex;\n  flex: 1 0 calc(100% + 1.5rem);\n  flex-wrap: wrap;\n  margin-left: -1.5rem;\n  margin-right: -1.5rem;\n}\n```\n\n#### Grid column\n\nCreates a grid column of requested size.\n\n##### Example\n\n_SCSS_\n\n```scss\n.element {\n  @include grid-column(3);\n}\n```\n\n_CSS Output_\n\n```css\n.element {\n  flex-shrink: 0;\n  width: calc(25% - 30px);\n  max-width: calc(100% - 1.5rem);\n  margin-left: 1.5rem;\n}\n```\n\n#### Grid span\n\nSpans an element across the width of specified columns.\nSimilar to `grid-column` but without setting a margin-left. Useful for nested grids or when only the width of the element is desired for the output.\n\n##### Example\n\n_SCSS_\n\n```scss\n.element {\n  @include grid-span(3);\n}\n```\n\n_CSS Output_\n\n```css\n.element {\n  flex: 0 0 auto;\n  width: calc(25% - 30px);\n}\n```\n\n#### Grid breakout\n\nCreates negative left and right margins dictated by the specified number of columns.\nUseful to break out of a smaller parent grid.\n\n##### Example\n\n_SCSS_\n\n```scss\n.element {\n  @include grid-breakout(1 of 8);\n}\n```\n\n_CSS Output_\n\n```css\n.element {\n  min-width: 100%;\n  margin-right: calc(-12.5% - 1.6875rem + 1.5rem);\n  margin-left: calc(-12.5% - 1.6875rem + 1.5rem);\n}\n```\n\n#### Grid push\n\nPush or pull a grid column by manipulating its left margin.\n\n##### Example\n\n_SCSS_\n\n```scss\n.element {\n  @include grid-push(3);\n}\n```\n\n_CSS Output_\n\n```css\n.element {\n  margin-left: calc(25% - 30px + 1.5rem);\n}\n```\n\n#### Grid shift\n\nShift columns and reorder them within their container using relative positioning.\n\n##### Example\n\n_SCSS_\n\n```scss\n.element {\n  @include grid-shift(3);\n}\n```\n\n_CSS Output_\n\n```css\n.element {\n  position: relative;\n  left: calc(25% - 30px + 1.5rem);\n}\n```\n\n#### Grid debug\n\nCreates a series of guide lines using the `background-image` property on a grid container to visualise the columns and column-gaps of the grid.\n\n##### Example\n\n_SCSS_\n\n```scss\n.element {\n  @include grid-debug;\n}\n```\n\n_CSS Output_\n\n```css\n.element {\n  background-image: repeating-linear-gradient(...);\n}\n```\n\n#### Media queries\n\nAdaptable comes with [sass-mq](https://github.com/sass-mq/sass-mq) under the hood to allow you for easier media query manipulation.\n\n##### Example\n\n_SCSS_\n\n```scss\n// sass-mq configuration\n$mq-breakpoints: (\n  md: 640px,\n  lg: 960px,\n);\n\n// Usage\n.element {\n  @include grid-column(6);\n\n  @include mq($from: md) {\n    @include grid-span(4);\n  }\n}\n```\n\n_CSS Output_\n\n```css\n.element {\n  flex-shrink: 0;\n  width: calc(50% - 36px);\n  max-width: calc(100% - 1.5rem);\n  margin-left: 1.5rem;\n}\n\n@media (min-width: 40em) {\n  .element {\n    flex: 0 0 auto;\n    width: calc(33.333333% - 32px);\n  }\n}\n```\n\n## Contributing\n\nSee the [contributing](./CONTRIBUTING.md) documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosanca%2Fadaptable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcosanca%2Fadaptable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcosanca%2Fadaptable/lists"}