suitcss / components-grid Goto Github PK

Include a test.html file (like normalize.css) to act as a test suite.

looks like the tag was forgotten

hei,

i'm having this markup

<div class="Grid Grid--fit Grid--withGutter Grid--equalHeight">
    <div class="Grid-cell u-sizeFull">
        content
    </div>

    <div class="Grid-cell u-size1of2">
        content
    </div>

    <div class="Grid-cell u-size1of2">
        content     
    </div>
</div>  

this is what i get

this is the result expected

Add the Makefile to take care of multiple commands, and update the test docs (see generator-suit templates).

I've been working with SUIT for a while and have noticed that while using the old Grid (inline-block) and the new Grid (flexbox) with "Grid--withGutter" modifier a horizontal scroll appears due to the negative margin. I can set the body to overflow-x: hidden but that seems kind of hacky. Do you have any suggestions?

Setting the two --Grid- variables at the top of grid.css makes it impossible to override them without editing a copy of the source.

The default values should be defined when the variables are used. For instance, Line 101 could become:

font-size: var(--Grid-font-size, 1rem);

Placing the defaults at the usage sites will allow for the :root declaration at the top of the file to be removed.

Personally, I dislike the lack of DRYness that this scheme forces upon us, but—to my knowledge—there is no other way to make these values configurable.

It's been reported that font-size:0 on android doesn't work as android. http://codepen.io/stowball/details/LsICH

Just wondering what are your thoughts on supporting android browsers?

Don't need to rely on rem support.

font-size: var(Grid-font-size, 1rem);

As far as the doc says the grids should be compatible with

• Google Chrome (latest)
• Opera (latest)
• Firefox 4+
• Safari 5+
• Internet Explorer 9+

But it uses variables and support is still very limited: http://caniuse.com/#feat=css-variables

So i don't understand how the grids respect the compatibility specified in the docs.

This is because Grid-cell explicitly specifies a text-align: left property here.

When I include the ^3.0.3 realase from NPM i don't get the latest features, this can be seen here:

Github source:
https://github.com/suitcss/components-grid/blob/master/lib/grid.css

NPM package:
https://npm.runkit.com/suitcss-components-grid/lib/grid.css?t=1516873254277

As you can see Grid--fill is missing and selectors are different (> * is missing) etc.

Grid--fit's name can be a bit misleading, particularly because of the name of u-sizeFit.

One might think Grid--fit might be equivalent to:

    <div class="Grid">
      <div class="Grid-cell u-sizeFit">
        <div class="fixture-Box">1</div>
      </div>
      <div class="Grid-cell u-sizeFit">
        <div class="fixture-Box">2</div>
      </div>
      <div class="Grid-cell u-sizeFit">
        <div class="fixture-Box">3</div>
      </div>
    </div>

But it isn't.
Grid--fit distributes cell widths to occupy an entire row equally.

I'm thinking maybe Grid--distribute would be more appropriate? If we wanted to support a "shirinkwrap" grid like the above example, we could repurpose Grid--fit for that.

Otherwise maybe Grid--collapse, or just dropping it all together. It's basically if you were using a standard flexbox, but still wanted your grid gutters (think horizontal list).

Thoughts @simonsmith @giuseppeg?

WebKit-based browsers prove problematic with certain fonts. The current hack is no longer a robust solution. Probably go back to collapsing the whitespace in the source templates.

Maybe I'm not thinking about this correctly but I have a base font size:

html {
  font-size: 10px;
}
body {
  font-size: 1.3rem;
}

Because .Grid-cell has font-size: 1rem it sets everything to 10px how can I have a nicer way for it to inherit my base font sizing?

Is there a way (or can there be) to order columns irrespective of source order, much like Bootstrap here - http://getbootstrap.com/css/#grid-column-ordering

Would be very useful for sidebar and content situations

on the .Grid--withGutter class since there is a negative margin it actually draws the container to be larger than it would be without it. by doing this, each grid cell ends up rendering larger than they would without the negative margin.

anyway to fix this?

value configured with variables

Hola,

First of all, this grid is very good, so thank you in advance for creating it 🎩

Being said that, I recently discovered a bug using Internet Explorer 11 (Windows10), in conjunction with the Grid--withGutter modifier class. When using <div class="Grid Grid--withGutter"> within an inner, the last column falls apart.

The problem

Given this code...

HTML

<div class="Wrapper">
  <div class="u-inner">
    <div class="Grid Grid--withGutter">
      <div class="Grid-cell u-lg-size4of12">
        <p>Lorem</p>
      </div>
      <div class="Grid-cell u-lg-size4of12">
        <p>Ipsum</p>
      </div>
      <div class="Grid-cell u-lg-size4of12">
        <p>Dolor</p>
      </div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.Wrapper {
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
}

.u-inner {
  padding: 64px 16px;
}

p {
  background-color: gold;
}

This is what happens...

The cause

To be more specific, the problem seems to occur with the width: calc(100% * 1 / 3) !important; calculation (remember, IE11 only):

@media (min-width: 768px) {
  .u-lg-size1of3, .u-lg-size2of6, .u-lg-size4of12 {
    -ms-flex-preferred-size: auto !important;
    flex-basis: auto !important;
    width: calc(100% * 1 / 3) !important;
  }
}

If you take a look at the computed width in Chrome, it results in:

width: 394.656px

On the other hand, IE11 seems to compute this calc in a different way, so it results in:

width: 378.67px;

After some research, I realized IE have some troubles with sub-pixel rounding (just take a look at the "Known issues" tab in Can I use site), so more than likely this could be the cause of the issue.

Have you thought in doing this calculation with a CSS pre-processor (Sass, PostCSS...), to return always the same pixel value?

Cheers

I'm attempting to use suitcss with react. I used npm to intstall
"suitcss-components": "^0.3.0", "suitcss-components-grid": "^2.0.2",

I create a base.css that looks like

@import '../../node_modules/suitcss-base';
@import '../../node_modules/suitcss-components-grid';

:root {
  --Grid-font-size: 1em;
  --base-font-size: 16px;
}

Even with the Grid-font-size the default font-size is 0. Therefore, when the grid renders it's not visible. Here is a sample of my react element

var React = require('react');
require('../suit/base.css');
var SuitCss = React.createClass({
  render: function() {
    return (
      <div>
        <div className="Grid [Grid--alignCenter|Grid--alignRight|Grid--alignMiddle|Grid--alignBottom]">
          <div className="Grid-cell u-size1of2 u-lg-size6of12">column 1</div>
          <div className="Grid-cell u-size1of2 u-lg-size4of12">column 2</div>
          <div className="Grid-cell u-size1of3 u-lg-size2of12">column 3</div>
          <div className="Grid-cell u-size1of3"></div>
        </div>
      </div>
    );
  }

});

Even when I change the font-size in dev tools the grid is still not working as I would expect. Is this a bug or something I don't understand about suit?

The units (percentage widths) could be broken out into their own component because they can be used independently of the grid component.

Is there any reason there ain't one ?
Would you mind if I add one ?

Hi @necolas,

I know that you are using rework-npm or similar, but using a simpler thing like rework-import make unable to parse index.css since the extension is missing (I know I can eventually add automatically the ext, but not sure if I want to ^^).
Why don't you just put the grid in index.css (I try to do that when I get a "small" lib) ?

what would be the correct aproach in order to get the following fluid markup, over the main layout ?

[ aside (containing ad) 300px ] [ fluid (rest of the space) ]

Just wanted to let you know the link to the utility SUIT dimensions in your README.md is pointing to an old (and nonexistent?) repo. I believe it should be pointing to: SUIT dimensions

Didn't think it was worth the overhead of a fork and pull request.

I'm a big fan of Normalize.css and find the development of these SUIT utilities quite interesting.

Cheers

This stuff looks like it is generic and simple enough to add to the core component rather than it needing to be included at the app-level.

--Grid-gutterSize is --Grid-gutter-size

I tend to think we should drop .Grid-cell and just use .Grid > *, since the nature of flexbox requires that it be a direct child.

Grid-cell--center could then also be dropped in favor of u-flexExpand/u-flexExpandLeft/u-flexRight, which gives you greater flexibility anyway.

Thoughts @simonsmith @giuseppeg?

would be nice so that the version maps directly to the tag name

Remove the units now that there is a separate component that handles dimensions. Not sure about including it as a dependency, since people might want to use a different dimension component. But can't hurt, I suppose. Just don't import it.

The cell centering example uses the wrong class. Should be Grid-cell--center

Maybe port the "modifiers" from griddle as optional "plugins" that can be sourced if you need to modify the grid for mobile (if starting at desktop) or vice-versa.

It's overriding the width of the size utilities, so they don't work with the grid anymore.

Could you please change the code for gutter calculation in .Grid--withGutter to support variables set in em or rem values:

calc(0.5 * var(--Grid-gutter-size))