colourgarden / avalanche

Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

📣 Avalanche 2 coming soon with Custom Properties.

Avalanche CSS grid system

Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

Why use Avalanche?

• No bloat. Only create the selectors you'll actually use
• No duplication. 1/2 == 2/4 so why create two selectors?
• No floats. No clears. No .last
• Flexible, configurable naming conventions
• Nesting to infinity and beyond
• Real-world breakpoint naming. 'thumb', 'handheld' and 'desk'; not 'xs', 'md' and 'xl'
• Integrated media query mixin. Connect your media queries to your grid breakpoints

Demo

View the demo to see Avalanche in action!

Installation

1. Import _avalanche.scss to your project via npm or manual copy
2. Override settings to fit your requirements or simply use the minimal defaults
3. Compile!

NPM

npm install --save avalanche-css

Usage

Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers.

<div class="grid grid--center">
  <div class="3/4 1/2--thumb grid__cell"></div>
  <div class="1/4 1/2--thumb grid__cell"></div>
</div>

Settings

$av-namespace Global prefix for layout and cell class names. Default: grid.

$av-element-name Element (in a BEM context) or grid cell name. Default: cell.

$av-element-class-chain Chain characters/separator between BEM block and element. Default: __.

$av-modifier-class-chain Chain characters/separator between BEM block and modifier. Default: --.

$av-breakpoint-class-chain Chain characters/separator between width class and breakpoint. Default: --.

$av-gutter Gutter width between cells. Default: 20px.

$av-width-class-namespace Prefix for width class names. Default: ''.

$av-width-class-style Naming 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.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.

$av-widths Sass 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.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the numbers you'll use.

$av-enable-responsive Enable/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.

$av-breakpoints Sass map of responsive breakpoint aliases and associated media queries (in key-value pairs). 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. Default:

(
  "thumb":            "screen and (max-width: 499px)",
  "handheld":         "screen and (min-width: 500px) and (max-width: 800px)",
  "handheld-and-up":  "screen and (min-width: 500px)",
  "pocket":           "screen and (max-width: 800px)",
  "lap":              "screen and (min-width: 801px) and (max-width: 1024px)",
  "lap-and-up":       "screen and (min-width: 801px)",
  "portable":         "screen and (max-width: 1024px)",
  "desk":             "screen and (min-width: 1025px)",
  "widescreen":       "screen and (min-width: 1160px)",
  "retina":           "screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)"
)

Grid layouts

Apply as modifier classes to your base grid element. For example; <div class="grid grid--center">.

All optionable grid layouts listed below are switched off by default. Set to true to enable.

$av-enable-grid-center All cells are horizontally centered within the container.

$av-enable-grid-cell-center Center an individual grid cell within the container. N.B. Class should be applied to an individual cell, not the grid container. For example; <div class="grid__cell grid__cell--center">.

$av-enable-grid-right All cells are horizontally aligned to the right within the container.

$av-enable-grid-middle All cells are vertically centered within in the container.

$av-enable-grid-bottom All cells are vertically aligned to the bottom of the container.

$av-enable-grid-flush Gutters removed between cells.

$av-enable-grid-tiny Gutters between cells set to a quarter of the global gutter value. Default: 5px.

$av-enable-grid-small Gutters between cells set to half of the global gutter value. Default: 10px.

$av-enable-grid-large Gutters between cells set to double the global gutter value. Default: 40px.

$av-enable-grid-huge Gutters between cells set to quadruple the global gutter value. Default: 80px.

$av-enable-grid-auto All cells take up an unspecified width set by their content.

$av-enable-grid-rev Grid cells are displayed in the opposite of their source order.

Media query

Avalanche 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.

@include av-mq(pocket){
  .content-item{
    /* responsive CSS */
  }
}

Browser support

All 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.

Contributing

When issuing a pull request to improve this project, please:

1. Rigourously comment your code, particularly where new concepts are introduced
2. Ensure your work passes the stylelint linter (sample gulpfile)
3. Be as descriptive as possible in your commit message

Questions

If you have any questions or need some help then feel free to tweet me at @colourgarden or open an issue.

avalanche's Issues

Add option to 'reset' grid at breakpoints

Hey,

While working with the grid I ran into a situation where toggling from a width-based grid to an automatic grid at a breakpoint made sense.

Would you be interested in a PR for this functionality? Or do you think it might open up the floodgates for the use case of switching from an automatic grid to a width-based grid?

Let me know and I'd happily submit the PR to you.

Fractions like 10/12 or 11/12 do not work

I saw that this was previously a bug that was fixed however I can report that it doesn't work on my setup. I am using Laravel Mix to compile sass which is using "node-sass": "^4.5.3", "sass-loader": "^6.0.5" and "webpack": "^3.5.0" (those would be the key packages that would effect this I would have thought).

I copied the _avalanche.scss directly into my code so I could debug it a bit - it seems that the class names are being generated correctly DEBUG: \31\31\/12 (from line 138) but the \ between the two 31s is missing when it is rendered as CSS so it becomes .\3131\/12.

I am using MacOS Sierra and node v8.9.1

BEVM syntax

Hi, this looks like a great flexbox grid! We'd love to use it in a more BEVM-way (like eg. described by envato) so you could write the HTML like this:

<div class="grid -flush -bottom">
    <div class="grid__cell -width-1/3 -center">
        ...
    </div>
</div>

This helps us a lot to keep our markup non-verbose.
In fact, it seems like something you started doing already for cell widths by not writing grid__cell--1/3 explicitly but keeping it short.

Would you accept a PR that makes this behaviour configurable? Eg. by setting some vars

 $av-modifier-class-chain: '--' !default;
 $av-child-class-chain: '__' !default;

which would allow us to overwrite $av-modifier-class-chain with '.-'.

Curious about your thoughts on this!

New SASS compiling issue

It seems that there is a new problem when compiling the scss.
When using the fraction the result of classes is: .\3 6\/12 {
Before it was: \36\/12 {
It means we can't use e.g. <div class="6/12 grid__cell">

Can you please check that?

grid 12 is not working at above 9/12

need your help, grid 12 is not working at 2 digits like class 10/12 and 11/12
but 9 and below is working fine
exp:

        <div class="grid">
          <div class="1/12 grid__cell">
            <div class="box">.1/12</div>
          </div>
          <div class="11/12 grid__cell">
            <div class="box">.1/12</div>
          </div>
       </div
        <div class="grid">
          <div class="2/12 grid__cell">
            <div class="box">.2/12</div>
          </div>
          <div class="110/12 grid__cell">
            <div class="box">.10/12</div>
          </div>
       </div>

thanks

IE8 support: use 0rem instead of 0px

Right now in IE8 it's likely that all grid content will vanish into thin air because of the font-size:0px; (we're using this technique a lot at work and blocks where all the text disappears because of that is a common occurrence).

A simple solution would be to use font-size:0rem; instead. That way, IE8 will ignore the zero font-size, and content will be displayed, even though the last item in a row or grid will often wrap.
In my book, visible content with broken layout is a better degradation than invisible content. :)

Post-processors might still convert it to font-size: 0px; font-size: 0rem; which would fix the layout as well.

LESS Version?

Apologies if you've already considered or this has already been asked, but have you considered making a LESS version of this at any point? I realize LESS plays second fiddle to SASS, but LESS is a little easier to get up and running on Windows.

Just curious, really. Thanks for open-sourcing the logic behind your grid system!

Set font-size for element with .grid class

Hi guys, I have been trying avalanche but have a little problem. So I want to set font-size properties to element that use .grid class. But when I try, the result is not like I expected.

I use avalanche demo for example. Let say below is my HTML:

<div class="grid">
  <div class="1/2 grid__cell">
    <div class="box">.1/2</div>
  </div>
  <div class="1/2 grid__cell">
    <div class="box">.1/2</div>
  </div>
  ...
</div>

And here is the result:

Then, I set font-size properties to element with .grid class:

<div class="grid" style="font-size: 2rem;">
  <div class="1/2 grid__cell">
    <div class="box">.1/2</div>
  </div>
  <div class="1/2 grid__cell">
    <div class="box">.1/2</div>
  </div>
  ...
</div>

And then the result become like this:

Am I use it wrong? Is there a way to achieve this? Thanks

Add 'show breakpoint' option

Add an optional dev feature where the current breakpoint is shown in the corner of the browser window to aid understanding of grid condition. Inspired by sass-mq.

Responsive examples please

Hey this grid looks really great. Thanks for the work you put into it. I cant wrap my head around responsive behaviour though. Can you provide and example of a responsive grid please?

Responsiveness

Hi there,

i'm just testing this powerful grid system. what is meant by responsiveness in case of avalanche?
thanks in advance for support.

sascha

Browser support and fallbacks

Hi,
Avalanche looks really promising, but apart from features and the small footprint it will be useful to know what is the actual browsers support and possible fallbacks.

Package managers?

It would be great if this could be published on things like Bower and NPM!

add pre-built file on npm

hi, recently we want to add your lib on https://cdnjs.com, could you please also consider adding pre-built file on npm package so that we can use npm auto-update config to add every released version.
thank you very much!

cdnjs/cdnjs#6680

fractions with double figures

i'm using a 12 column grid with fractions, when i use .10/12 or .11/12 the class name is not found,

this is how they are outputted

.\310/12 { width: 83.33333%; }

.\311/12 { width: 91.66667%; }

but they need to be like this

.\31\30/12 { width: 83.33333%; }

.\31\31/12 { width: 91.66667%; }

Is there an option for inserting a blank space between grid cells?

Hi,

My design is based on a 12 column grid, and I had no issue of extending the divider to 12.
The only problem is that in my design, I sometimes have:

• A column of 8/12
• A space of 1/12
• A box of 3/12

My question is: does Avalanche support pushing a grid cell 1/12?

Thanks in advance.

responsive layout

I tried
1/6 1/3--portable 1/2--thumb grid__cell

it works well till portable but for thumb it can change the column size to 1/2

Introduce CodeClimate

Enable CodeClimate (or similar service) to help sanitise PRs and automate the code review process.

CSS Selector violation

Great effort in trying to make all those bulky grid systems a bit more lightweight, however:
http://www.w3.org/TR/CSS21/syndata.html#characters

In particular:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Which means that starting your classnames with digits is not such a good idea. I have come across cases where I tried to start my classes of with digits and stuff broke or was not working as expected.
There is a reason after all that all those grid libraries have classnames like two-columns and such :)

Add example of nested grid

Can't find any nested grid samples. Confused with .grid/grid__cell usage in that scenario. Please help.

Any plans for flexbox/postcss?

Hi,

I really like your Grid Framework so far, but it left me wondering..

Do you have future plans regarding flexbox or maybe postcss?
Personally, I would love to see both of 'em 🙂

Or maybe something else in the back pocket?

Grid Cell 100

I have a use case where I need a grid cell to have a width of 50% .grid__cell--50 for small devices and reset to .grid__cell or 100% width at medium.

I didn't find any classes that were generated to handle this.

Would be nice to have class hooks for:
.grid__cell--100-at-{breakpoint}

Demo please!

Your grid system sounds cool, but a demo page would be cooler! Thanks.

Grid broken in android browser

See: http://codepen.io/stowball/details/LsICH

Source ordering?

It would be great to have the ability to push and pull items based on breakpoints

eg push-1/4--medium, pull-1/2--medium

Responsive Examples

I see that there are a few other closed issues requesting there be examples of responsive classes in your demo. It would be very useful if you provided a few of these to help newcomers.

Import avalanche to a react typescript project

Hi i try to add avalanche to my typescript react project i have install it with npm install --save avalanche-css but when i try to use it inside my components like :

<div className="grid grid--center">
  <div className="2/2 grid__cell--center">

My jsx don't apply the style to the code like it was usually do it when i was using it with Shopify i don't get why.

Should i have to import something like import {grid} from 'avalanche' or <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/avalanche-css/1.3.0/avalanche.min.css"/>

Ihave eject the project and im using :

    "@babel/core": "^7.12.3",
    "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
    "@svgr/webpack": "5.4.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react-dom": "^16.9.8",
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "avalanche-css": "^1.3.1",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.0",
    "babel-loader": "8.1.0",
    "babel-plugin-named-asset-import": "^0.3.7",
    "babel-preset-react-app": "^10.0.0",
    "bfj": "^7.0.2",
    "camelcase": "^6.1.0",
    "case-sensitive-paths-webpack-plugin": "2.3.0",
    "css-loader": "4.3.0",
    "dotenv": "8.2.0",
    "dotenv-expand": "5.1.0",
    "eslint": "^7.11.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-flowtype": "^5.2.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-testing-library": "^3.9.2",
    "eslint-webpack-plugin": "^2.1.0",
    "file-loader": "6.1.1",
    "fs-extra": "^9.0.1",
    "html-webpack-plugin": "4.5.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "26.6.0",
    "jest-circus": "26.6.0",
    "jest-resolve": "26.6.0",
    "jest-watch-typeahead": "0.6.1",
    "mini-css-extract-plugin": "0.11.3",
    "optimize-css-assets-webpack-plugin": "5.0.4",
    "pnp-webpack-plugin": "1.6.4",
    "postcss-flexbugs-fixes": "4.2.1",
    "postcss-loader": "3.0.0",
    "postcss-normalize": "8.0.1",
    "postcss-preset-env": "6.7.0",
    "postcss-safe-parser": "5.0.2",
    "react": "^17.0.1",
    "react-app-polyfill": "^2.0.0",
    "react-dev-utils": "^11.0.0",
    "react-dom": "^17.0.1",
    "react-refresh": "^0.8.3",
    "resolve": "^1.18.1",
    "resolve-url-loader": "^3.1.2",
    "sass-loader": "8.0.2",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.1",
    "semver": "^7.3.2",
    "style-loader": "1.3.0",
    "terser-webpack-plugin": "4.2.3",
    "ts-pnp": "1.2.0",
    "typescript": "^4.0.3",
    "url-loader": "4.1.1",
    "web-vitals": "^0.2.4",
    "webpack": "4.44.2",
    "webpack-dev-server": "3.11.0",
    "webpack-manifest-plugin": "2.2.0",
    "workbox-webpack-plugin": "5.1.4"

Sorry for the dumb question but i try to use it for a technic test but i find nothing for help me on the web for how implement it properly inside my project.

Automated/Visual Test Suite

Hey Tom,

The next feature I was going to develop for Grip was an automated visual test suite for the project. I'd like to bubble this feature up and make it available for your project as well.

This will be the best way to ensure that changes to the library don't bork other features. My hopes are that it will also aid in demoing the features of the project easily.

I'm a Ruby and JavaScript developer. I was curious if you had a language preference between the two.

Sorry but how do you use percentage?

Hi Tom, thank you for this great grid system.
I must have missed something but I can't get the percentage to work. I understood that i can't leave $av-width-class-namespace blank, but in the case I'd use 'col-' for exemple, let's say i want to set a div with 20% width, i have to give a 'col-20' class name to this div?

Thanks in advance for your help :)

Unable to @extend a fractional class

I used an @extend directive in order to create a single class for multiple avalanche classes, like:

.my-class {
@extend .1/4, .1/2--desk; // rest of the attrs...
}

The parser complains at the '/' character. To my understanding that's an illegal character for CSS classes, or am I missing something?

Thanks

Responsive gutter classes

In response to a tweet - would anyone find responsive gutter classes like .grid--small--portable useful?

Currently, Avalanche has .grid--small etc where the gutter width can be modified for a grid but maybe there is a need for these to be controlled at a breakpoint level as well?

To achieve this, add a new Sass map to settings for the required gutters:

$av-gutters:  (
  "tiny":   0.25,
  "small":  0.5,
  "large":  2,
  "huge":   4
);

Then loop through these and the breakpoints to create the responsive breakpoint gutter classes:

@each $alias, $query in $av-breakpoints{
  @media #{$query}{
    @each $gutter-alias, $multiplier in $av-gutters{
      .#{$av-namespace}--#{$gutter-alias}--#{$alias}{
        margin-left: -($av-gutter * $multiplier);

        > .#{$av-namespace}__cell{
          padding-left: ($av-gutter * $multiplier);
        }
      }
    }
  }
}

Grid --flush modifier

Question: Is there an option to make the grid cells flush with the grid wrapper but to keep inside gutter?

As on this picture:
http://prntscr.com/d6dxwp

Class names should not begin with a digit

I was under the impression class names could not start with a number, even though it may technically work in some browsers:
http://stackoverflow.com/questions/448981/which-characters-are-valid-in-css-class-names-selectors

Gutter problems

Hi there,

I'm working on a small-ish landing page, and figured it'd be a good opportunity to try this!

I copied _avalanche.scss and got everything running. I have a "topbar" with two half-width grid cell's. It seems to be working nicely, but as I make the browser window smaller, the gutter "disappears" right as the topbar grid touches the edge of the browser window, if that makes sense.

The left padding on the grid-cell div basically goes off the page once that grid-cell div touches the side of the browser window.

I'm not sure what I could have done wrong?

Fraction class generation not working over 9

Hello
First Thank you for your great work on avalanche!

I've a problem when using it with $av-widths equal at 12. All classes are generated exception of 10/12, 11/12, 12/12. I think it is because of the Ascii code generated by \310 => .°, \311
Do you have any idea or already know the problem?

Thank you in advance