feat(grid): add grid system about material HOT 14 CLOSED

http://www.google.com/design/spec/components/grids.html

from material.

Hey just wanted to let you know I am also trying to work on cleaning up some of the css. I've added variables for the vertical keylines and incremental heights and have also cleaned up some css for the demos. I've started styling for mobile first only.

Some thoughts I had about responding to breakpoints and adjusting the width of elements:
http://www.google.com/design/spec/layout/metrics-and-keylines.html#metrics-and-keylines-ratio-keylines

1. Add css classes for incremental keylines...inc-1, inc-2, inc-3...then these styles could be applied with ng-class based on breakpoints. The framework would automatically handle state breakpoints.
2. Or would it be better/more performant to address adjusting the widths via JS? Each directive, for example material-item, material-content, etc would have some attributes for declaring incremental width values at different breakpoints.

from material.

The core layout system has been added: 2baa157

@thienedits We'll be improving the new layout/grid to follow the spec. We're hoping to accomplish much of the grid with pure css and use JS as needed. What I've added is just the core, but please feel free to pick it apart and let us know what it needs yet. I'll be posting the docs soon. Thanks

from material.

Hi haven't had time to look at this fully but initial thought would be to add classes for setting widths with Incremental Keylines:
http://www.google.com/design/spec/layout/metrics-and-keylines.html#metrics-and-keylines-keylines-and-spacing

I think the increment is 64px based on the AI Desktop Layout file. My feeling is there should be some css classes to let you set static widths based on the increment value. If you look at the spec site, their main content area width is statically set and uses margin: auto to align it to the middle.

I think their should also be classes for vertical sizing of elements based on the Illustrator Layout files they provided.

Also from the Desktop Illustrator file it seems they have layouts sized at widths of 360, 704, 1024, and 1280. Also I think the vertical gutters should be 16px for mobile and 24px for all else.

from material.

Links to Illustrator Layout temples

http://www.google.com/design/spec/resources/layout-templates.html#

In the Layers Palette you can turn on layers that show you vertical keylines, vertical sizing of elements, etc.

from material.

I already played around with the vertical sizing. I will submit pull request with variables and some initial classes.

Here are some screenshots using some vertical sizing classes.

from material.

@thienedits I just added some docs and demos:
https://material.angularjs.org/#/layout/cells
https://material.angularjs.org/#/layout/grid

So I think the basics of aligning cells and responsive changes are there, now the next step is to make it easier to follow the spec. What do you think so far?

from material.

Wow this looks pretty cool. Only thing I can think of currently is adding classes for the static increment values for width sizing and classes for vertical sizing. You can possible make utility classes called like "one-line", "two-line", "three-line" to denote how many lines of text the container element should hold. These classes mainly serve for static sizing of the vertical heights as to maintain vertical rhythm This is useful in List items that have Headings, subhead and paragraphs". For example:

<material-item layout="vertical" main-axis="center" class="three-line divider">
  <h2 class="text-subhead1-dev">Brunch this weekend?</h2>
  <h3 class="text-body1-dev">Min Li Chan</h3>
  <p> I'll be in your neighborhood doing errands this weekend. Do you want to meet me for brunch around 2pm?</p>
</material-item>

.divider class just set bottom border for list items. You could also just name the classes like "height-56" but one and two line lists items based on the AI templates are taller in desktop layouts versus mobile layouts so for responsive purposes one-line seems more semantically correct.

from material.

example scss using set variables for height:

material-item, material-checkbox {

  &.one-line { 
    height: $height-56;

    @media (min-width: 704px)  { 
      height: $height-64;
    }

  }

  &.two-line { 
    height: $height-72;

    @media (min-width: 704px)  { 
      height: $height-88;
    }

  }

  &.three-line { 
    height: $height-88;
  }

  &.divider {

    .material-tile-content {
      border-bottom: 1px solid #eee;
      margin-right: -$vert-keyline-16;

      @media (min-width: 704px)  { 
        margin-right: -$vert-keyline-24;
      }

    }

  }

}

from material.

example for setting vertical paddings on content. I put it on material-content element.

material-content {

  display: block;
  padding: 0 $vert-keyline-16;
  margin: 0 auto;

  @media (min-width: 704px)  { 
    padding: 0 $vert-keyline-24;
  }

  &.no-padding {
    padding: 0;
  }

  .material-tile-left {
    width: 56px;
    text-align: left;
  }

}

from material.

Yeah I like this approach, just not sure on the class names yet. I'd like to keep it generic enough so the sizes could easily be customized, and so media queries could change the sizes of the classes, along with not mapping a specific size to the classname. Also, I'll probably keep it out of the material-content selector mainly to keep things short and easily overridable, and to keep it generic that they can be reused anywhere. Thanks for the help!

from material.

I was playing with the new flex layouts and they seem to work pretty nice. Was able to do a nice grid layout using the cards component. Let me know if you guys need help with the HTML/CSS for the components.

So for the vertical keyline, you would just place that in some class called "vert-keylines" or whatever and then just declare it within the html? I guess my thinking was to place it directly on specific elements within the css file where you know its going to need the padding such as in toolbars, sidenav, main content area so you don't have to declare it within the html for these specific elements. One thing it does is reduce the classes in the html file and hides it in the css. I guess you could do both. Have it declared in css on elements you know will always need it and then make a utility class that you can declare in the html.

Screenshots using new flex layout for cards:

from material.

@thienedits Hi, I'm having a difficulties to make my layout responsive in the same way as you have on this pics. I'm using divs in flex layout and I have like 6 boxes in a row. What I need is to make it "break" the boxes in more rows to fit them in different resolutions.... Now it just re-sizes them and the only break what it makes is that every box is in the separate row. How can I make it break like yours?
Thanks.

from material.

@Blackmoonx I think the key is to set the css property flex-wrap:wrap to the container div

http://jsfiddle.net/thienedits/dnzn0455/

Here's a decent guide on flexbox
http://css-tricks.com/snippets/css/a-guide-to-flexbox/

from material.