{"id":15041287,"url":"https://github.com/colourgarden/avalanche","last_synced_at":"2025-04-12T16:36:11.884Z","repository":{"id":43551011,"uuid":"46807795","full_name":"colourgarden/avalanche","owner":"colourgarden","description":"Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system","archived":false,"fork":false,"pushed_at":"2021-06-24T10:25:44.000Z","size":88,"stargazers_count":626,"open_issues_count":8,"forks_count":39,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-03T17:13:00.035Z","etag":null,"topics":["bem","css","grid-layout","sass","scss"],"latest_commit_sha":null,"homepage":"http://colourgarden.github.io/avalanche/","language":"CSS","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/colourgarden.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-11-24T17:35:17.000Z","updated_at":"2025-03-09T06:16:24.000Z","dependencies_parsed_at":"2022-08-31T04:22:57.425Z","dependency_job_id":null,"html_url":"https://github.com/colourgarden/avalanche","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colourgarden%2Favalanche","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colourgarden%2Favalanche/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colourgarden%2Favalanche/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/colourgarden%2Favalanche/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/colourgarden","download_url":"https://codeload.github.com/colourgarden/avalanche/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248597234,"owners_count":21130840,"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":["bem","css","grid-layout","sass","scss"],"created_at":"2024-09-24T20:45:53.271Z","updated_at":"2025-04-12T16:36:11.832Z","avatar_url":"https://github.com/colourgarden.png","language":"CSS","readme":"\u003e :mega: Avalanche 2 coming soon with Custom Properties.\n\n# Avalanche CSS grid system\n\n**Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system**\n\n## Why use Avalanche?\n\n- No bloat. Only create the selectors you'll actually use\n- No duplication. 1/2 == 2/4 so why create two selectors?\n- No floats. No clears. No .last\n- Flexible, configurable naming conventions\n- Nesting to infinity and beyond\n- Real-world breakpoint naming. 'thumb', 'handheld' and 'desk'; not 'xs', 'md' and 'xl'\n- Integrated media query mixin. Connect your media queries to your grid breakpoints\n\n## Demo\n\nView \u003ca href=\"http://colourgarden.github.io/avalanche/\"\u003ethe demo\u003c/a\u003e to see Avalanche in action!\n\n## Installation\n\n1. Import `_avalanche.scss` to your project via npm or manual copy\n2. Override settings to fit your requirements or simply use the minimal defaults\n3. Compile!\n\n### NPM\n\n`npm install --save avalanche-css`\n\n## Usage\n\nExample of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers.\n\n```\n\u003cdiv class=\"grid grid--center\"\u003e\n  \u003cdiv class=\"3/4 1/2--thumb grid__cell\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"1/4 1/2--thumb grid__cell\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Settings\n\n**`$av-namespace`**\nGlobal prefix for layout and cell class names. Default: `grid`.\n\n**`$av-element-name`**\nElement (in a BEM context) or grid cell name. Default: `cell`.\n\n**`$av-element-class-chain`**\nChain characters/separator between BEM block and element. Default: `__`.\n\n**`$av-modifier-class-chain`**\nChain characters/separator between BEM block and modifier. Default: `--`.\n\n**`$av-breakpoint-class-chain`**\nChain characters/separator between width class and breakpoint. Default: `--`.\n\n**`$av-gutter`**\nGutter width between cells. Default: `20px`.\n\n**`$av-width-class-namespace`**\nPrefix for width class names. Default: `''`.\n\n**`$av-width-class-style`**\nNaming style of width classes. Default: `'fraction'`. Options: `fraction` (1/2, 3/4 etc), `percentage` (25, 50 etc), `fragment` (1-of-3, 4-of-5 etc).\n*N.B. If using percentage then `$av-width-class-namespace` above cannot be null. Avalanche escapes leading integers for fraction and fragment naming styles but this isn't possible with percentage style as Sass attempts to escape the whole number (e.g. 50 instead of just 5 or 30 instead of just 3) so fails*.\n\n**`$av-widths`**\nSass list of width denominator values (when expressed as a fraction). For example, 2 produces 1/2 width class, 3 produces 1/3 and 2/3 width classes etc. Default: `( 2, 3, 4 )`.\n*N.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the numbers you'll use.*\n\n**`$av-enable-responsive`**\nEnable/disable the inclusion of responsive width classes. With this enabled, class names (for denominators set above) will be created for each of your breakpoint aliases (set below). Default: `true`.\n\n**`$av-breakpoints`**\nSass map of responsive breakpoint aliases and associated media queries (in key-value pairs).\n*N.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the breakpoints you'll use.*\nDefault:\n```\n(\n  \"thumb\":            \"screen and (max-width: 499px)\",\n  \"handheld\":         \"screen and (min-width: 500px) and (max-width: 800px)\",\n  \"handheld-and-up\":  \"screen and (min-width: 500px)\",\n  \"pocket\":           \"screen and (max-width: 800px)\",\n  \"lap\":              \"screen and (min-width: 801px) and (max-width: 1024px)\",\n  \"lap-and-up\":       \"screen and (min-width: 801px)\",\n  \"portable\":         \"screen and (max-width: 1024px)\",\n  \"desk\":             \"screen and (min-width: 1025px)\",\n  \"widescreen\":       \"screen and (min-width: 1160px)\",\n  \"retina\":           \"screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)\"\n)\n```\n\n## Grid layouts\n\nApply as modifier classes to your base `grid` element. For example; `\u003cdiv class=\"grid grid--center\"\u003e`.\n\nAll optionable grid layouts listed below are switched off by default. Set to `true` to enable.\n\n**`$av-enable-grid-center`**\nAll cells are horizontally centered within the container.\n\n**`$av-enable-grid-cell-center`**\nCenter an individual grid cell within the container.\n*N.B. Class should be applied to an individual cell, not the grid container. For example; `\u003cdiv class=\"grid__cell grid__cell--center\"\u003e`.*\n\n**`$av-enable-grid-right`**\nAll cells are horizontally aligned to the right within the container.\n\n**`$av-enable-grid-middle`**\nAll cells are vertically centered within in the container.\n\n**`$av-enable-grid-bottom`**\nAll cells are vertically aligned to the bottom of the container.\n\n**`$av-enable-grid-flush`**\nGutters removed between cells.\n\n**`$av-enable-grid-tiny`**\nGutters between cells set to a quarter of the global gutter value. Default: `5px`.\n\n**`$av-enable-grid-small`**\nGutters between cells set to half of the global gutter value. Default: `10px`.\n\n**`$av-enable-grid-large`**\nGutters between cells set to double the global gutter value. Default: `40px`.\n\n**`$av-enable-grid-huge`**\nGutters between cells set to quadruple the global gutter value. Default: `80px`.\n\n**`$av-enable-grid-auto`**\nAll cells take up an unspecified width set by their content.\n\n**`$av-enable-grid-rev`**\nGrid cells are displayed in the opposite of their source order.\n\n## Media query\n\nAvalanche includes a media query mixin that makes use of the breakpoint aliases you set. This enables better coupling between your grid and other responsive content items. Usage as follows.\n\n```\n@include av-mq(pocket){\n  .content-item{\n    /* responsive CSS */\n  }\n}\n```\n\n## Browser support\n\nAll modern browsers are supported and Internet Explorer from IE9 upwards. If IE8 support is required then all that is needed is a pixel-value to be set for `font-size` on `.grid__cell`. This is due to IE8 not supporting rem units. Use of a 'rem-to-px' check during build is recommended.\n\n## Contributing\n\nWhen issuing a pull request to improve this project, please:\n\n1. Rigourously comment your code, particularly where new concepts are introduced\n2. Ensure your work passes the stylelint linter ([sample gulpfile](https://gist.github.com/colourgarden/e9f82816db3f971f9da73053b0eb83af))\n3. Be as descriptive as possible in your commit message\n\n## Questions\n\nIf you have any questions or need some help then feel free to tweet me at [@colourgarden](http://twitter.com/colourgarden) or [open an issue](https://github.com/colourgarden/avalanche/issues/new).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolourgarden%2Favalanche","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcolourgarden%2Favalanche","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcolourgarden%2Favalanche/lists"}