Flex layout in demos

[konsumer]

I'd be happy to make a PR for flex-layout examples instead of table-layout for all the examples, if there is interest.

I think it would simplify layout, and also be more semantically correct (these things aren't tables.)

Here is an example for AppBar, in react, with branding & a menu, mostly pulled from the example layout:

.mui-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mui-appbar > * {
  margin: 0;
  padding: 0 10px;
}

.mui-appbar a {
  color: inherit;
}

import Appbar from 'muicss/lib/react/appbar'

export default () => (
  <Appbar>
    <h1 className='mui--text-title'>Sitename</h1>
    <ul className='mui-list--inline mui--text-body2'>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Pricing</a></li>
      <li><a href='#'>Login</a></li>
    </ul>
  </Appbar>
)

It might even make sense to make some little flex util-classes, but it's simple enough to do it one-off like this, in my opinion.

[amorey]

Yes please! It would be very helpful if you could do that.

On Nov 8, 2018, at 11:02 PM, David Konsumer [email protected] wrote:

I'd be happy to make a PR for flex-layout examples instead of table-layout for all the examples, if there is interest.

I think it would simplify layout, and also be more semantically correct (these things aren't tables.)

Here is an example for AppBar, in react, with branding & a menu, mostly pulled from the example layout:

.mui-appbar { display: flex; align-items: center; }

.mui-appbar > * { flex: 1; margin: 0; padding: 0 10px; }

.mui-appbar a { color: inherit; } import Appbar from 'muicss/lib/react/appbar'

export default () => ( <Appbar> <h1 className='mui--text-title'>Sitename <ul className='mui-list--inline mui--text-body2 mui--text-right'>

About

Pricing

Login

</Appbar> )

It might even make sense to make some little flex util-classes, but it's simple enough to do it one-off like this, in my opinion.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[konsumer]

I can't seem to find the source for the doc-site. Where should I make the changes?

For reference, here is the pages that should be converted to non-table layout, in my opinion:

• appbar
• react/appbar
• angular/appbar
• css-helpers? - The layout-helpers & responsive-utilities could be flex, but this is another area that maybe just one-off-styles could do it (and the examples can just stay) there are also css-helper sections for react and angular
• Landing Page Demo
• Landing Page w/ Extras

I totally agree about table-layout for HTML Emails. It's a good idea and well-supported with email-client's limited CSS support.