search

mobi-css / mobi.css

A lightweight, scalable, mobile-first CSS framework
http://getmobicss.com/
MIT License
2.34k stars 145 forks source link

Remove `container-side` and add `hide-on-mobile` #19

Closed xcatliu closed 7 years ago

xcatliu commented 7 years ago

I'm considering to remove constainer-side and add hide-on-mobile

Background: as @sleazebreeze said in https://news.ycombinator.com/item?id=12421804

sleazebreeze:

Now that flexbox is widely supported, I don't really see a huge reason to bother with a framework like this. Bootstrap and other frameworks had a reason to exist several years ago; now I just don't get it. The main draw for me and my team was the consistent row and column layouts. Also, the container-side thing is baffling. Why is that part of the framework? It seems like such a narrow focus. What kind of content is never visible on mobile? Why does it have to be on the side?

xcatliu:

Thanks for your feedback. Actually Bootstrap v4 provides an opinion to use flex box instead of the traditional grid. http://v4-alpha.getbootstrap.com/getting-started/flexbox/ I would say your suggestion is good. I don't have a convincing reason that container-side being a part of the framework. I'll consider to remove it. What kind of content is never visible on mobile? Scan the QRCode to view on mobile and Go to top is a kind of this content. Why does it have to be on the side? I think it's a good design to guide people to view on mobile. Or where do you think it can be? Thanks!

Any thoughts?

thiodordelis commented 7 years ago

Well, it's a matter of taste so here is my opinion: Today i redesigned my personal site and used Mobi and to be honest the container-side was the one feature that got me(I used it for avatart and contact info) But, it's a matter of taste and purely my opinion.

xcatliu commented 7 years ago

Hi @thiodordelis glad to hear that you like it. But there are some limit to use container-side:

I've thought a better and more flexible way to implement it.

<body>
  <div class="flex-center">
    <div class="container">
      <h1>Mobi.css</h1>
    </div>
    <div class="hide-on-mobile" style="padding:0 30px;">
      <p>Scan to view on mobile</p>
      <img src="path/to/qrcode.png"/>
    </div>
  </div>
</body>

You can see the document in the current version of http://getmobicss.com/#layout

What do you think about this change?