colourgarden / avalanche Goto Github PK

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

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

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!

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

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

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

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 :)

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%; }

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.

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);
        }
      }
    }
  }
}

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

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

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?

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?

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!

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.

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

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.

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.

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.

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

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

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

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

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

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?

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 :)

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.

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?

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

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

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.

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.

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

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}