nice layout example vs layout example in git

[cekvenich]

Hi, I see nice M.ui layout/slider advertised here: http://muicss.com I look in git and the closest is sidedrawer.html. It looks bad. (nothing in menu on top to show me how to do middle/center/right; and it janks the body).

So I go back, look at view source of http://muicss.com - and see http://muicss.com/static/cache/style-596b304ea6.min.css. (why you don't dogfood and use M.ui - but write few pages of code on top of your M.ui - that is point of M.ui not to write your own stuff like we all could). Also not easy to read.

Do you have your site in github in a way that can be groked so I can reproduce it? Or a layout in git w/ nice sidebar and menu? Your site should dogfood.

[cekvenich]

Just so you can see, here is the code on top of M.ui that you use to get side bar and app bar, am I wrong? Can the code I need to write be simpler?

#header, #sidedrawer { position: fixed; top: 0; z-index: 2 }

#content-wrapper { margin-left: 0; transition: margin-left .2s }

#header { right: 0; left: 0; transition: left .2s }

#sidedrawer { bottom: 0; width: 200px; left: -200px; overflow: auto; background-color: #FFF; transition: transform .2s }

#sidedrawer.active { transform: translate(200px) }

#content-wrapper { min-height: 100%; overflow-x: hidden; margin-bottom: -160px; padding-bottom: 160px }

@media (min-width:768px) { #header { left: 200px } #sidedrawer { transform: translate(200px) } #content-wrapper,

body.hide-sidedrawer #header {
    left: 0
}
body.hide-sidedrawer #sidedrawer {
    transform: translate(0)
}
body.hide-sidedrawer #content-wrapper,
body.hide-sidedrawer #footer {
    margin-left: 0
}

}

#appbar-more-vert, #appbar-sidenav-hide, #appbar-sidenav-show { width: 31px; height: 31px; line-height: 31px; display: inline-block; color: #FFF; cursor: pointer; text-align: center; border-radius: 50% }

#appbar-more-vert:hover, #appbar-sidenav-hide:hover, #appbar-sidenav-show:hover { background-color: rgba(0, 0, 0, .27); text-decoration: none }

#appbar { background-color: #78909C }

#header.active, .header-shadow { box-shadow: 0 2px 5px rgba(0, 0, 0, .26); transition: box-shadow .2s }

#appbar { color: #FFF }

#appbar .icon-keyboard-arrow-right { font-size: 20px; position: relative; top: 1px }

#appbar-sidenav-hide, #appbar-sidenav-show { position: relative; left: -2px; margin-right: 18px }

#appbar-sidenav-hide .icon-menu, #appbar-sidenav-show .icon-menu { font-size: 24px; position: relative; top: 3px }

#appbar-social-links { display: inline-block; position: relative; top: 2px }

#appbar-social-links a { margin-left: 6px }

#appbar-social-links a:first-child { margin-right: 2px }

#appbar-social-links a:hover { text-decoration: none }

#appbar-social-links i { color: #FFF; font-size: 20px }

#appbar-more-vert .icon-more-vert { font-size: 24px; position: relative; top: 3px }

.appbar-brand { font-size: 20px; color: #fff }

.appbar-brand:hover { text-decoration: none; color: #fff }

#sidenav h2 { padding-left: 22px; margin: 0 }

#sidenav h2 a { color: rgba(0, 0, 0, .38) }

#sidenav h2 a:hover { text-decoration: none }

#sidenav ul { list-style: none }

#sidenav>ul { padding-left: 0; font-size: 13px }

#sidenav>ul>li:first-child { padding-top: 15px }

#sidenav>ul a { color: rgba(0, 0, 0, .87) }

#sidenav strong { display: block; padding: 15px 22px; cursor: pointer }

#sidenav strong:hover { background-color: #E0E0E0 }

#sidenav strong+ul>li { padding: 6px 0 }

#sidenav strong:not(.active)+ul { display: none }

#sidenav a.active { color: #C51162 }

[wgehner]

+1. Would love to see muicss.com as example for appbar/sidenav.

[cekvenich]

I took the code from your landing page. Based on your site - I made this, but I should not have to, that is why we want to use a framework. I added your appbar and your sidedrawer. I notice that you also have style in the body. Anyway, I hope this helps someone, till it gets included in M.ui:

http://murder.site44.com/_sass/_muiBase.scss

[amorey]

@cekvenich @wgehner There's an example on muicss.com for a responsive side menu. You can download the code and modify the appbar/sidenav: https://www.muicss.com/docs/v1/example-layouts/responsive-side-menu

@cekvenich I genuinely appreciate your feedback but your tone sounds offensive sometimes which makes it harder to develop a friendly community here. If you have specific issues with MUI or anything else please feel free to send me a direct email - [email protected].

[cekvenich]

I doubt anyone else teaches MUI as best practice other than me, if they do, please let me know, happy to learn. As a way to grow the community. (ex: https://www.meetup.com/HackerDojo/events/235472685 )

Or has offered code, such as muisBases scss here - as a way to help the project.

My first sentence mentioned what you have in git, this: http://murder.site44.com/_sass/sass/examples/sidedrawer.html I'm sure you can see how it differs from muicss.com what that code diff is.

[amorey]

@cekvenich Thanks for your work building the community. I definitely want to encourage the sharing of more sophisticated components and layouts based on MUI so please let me know if you have some ideas on how to do that. I'd like to set aside some time to add a recipe section to muicss.com soon.

In terms of the code in the examples/ directory in the git repository, it's meant to test out MUI during development and not necessarily intended to be developer-ready. For something that is more developer-ready, I would recommend starting with the "Example Layouts" on https://www.muicss.com.

[amorey]

@wgehner The muicss.com website is based on the Responsive Side Menu example but it's a dynamic site written in Python/Flask so the source code wouldn't be very helpful. Which part of the site would you like to implement? Maybe I can help by providing some suggestions for how to accomplish your goals.