
Show HN: Mobi.css – A lightweight, flexible CSS framework that focuses on mobile - xcatliu
https://github.com/xcatliu/mobi.css
======
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/](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!

~~~
sleazebreeze
Apologies for the tone in my previous comment. I guess it came off pretty
harsh. Good work on creating and releasing something to the public. Upon
looking again today, I like the overall approach you've taken and it seems
very reasonable.

The `container-side` thing just feels very opinionated to me. I'm not sure it
belongs in a framework, but that's totally your call.

------
pritambarhate
This depends on flexbox. As per CanIUse flexBox is fully supported only on
Android 4.4 and above.

However as per:

[https://developer.android.com/about/dashboards/index.html](https://developer.android.com/about/dashboards/index.html)

More than 20% "active" Android devices out there still don't support flexbox.
So unless you are targeting websites only for high end device owners, flexbox
only is still not an option.

Edit: Posted it too fast! On CanIUse I checked support for Android Browser.
However Google Chrome for Android is supported on 4.1 and above. So most
likely many Android users running Android 4.1 to 4.3 may be using Google
Chrome. However it's hard to know how many.

~~~
skrebbel
Also IE9, which is used by many people, especially at work, who's computers
are stuck on Windows 7.

~~~
ergo14
All browsers lower than IE11 are NOT supported by microsoft and are a security
risk. People should not support them, a lot of websites like youtube and
others will not really function correctly in them.

------
sotojuan
I see a lot of these "CSS frameworks" pop up, but which ones do people
actually use day to day?

Not criticizing the author—this looks cool and I'll give it a try, but I see a
lot of these pop up and at work I've only ever used
Bootstrap/Material/Semantic UI and for my own work I use Tachyons. Anyone use
something a bit more obscure?

~~~
Kequc
Skeleton is perfect.

[https://github.com/dhg/Skeleton/blob/master/css/skeleton.css](https://github.com/dhg/Skeleton/blob/master/css/skeleton.css)

It's tiny, simple, and so easy that if you read it and understand it, you
could write it again yourself. It's meant to be tooled and modified to suit
your needs. Bootstrap is just gigantic, it's a big unwieldily blunt instrument
that eventually needs to be removed from the project.

The framework in OP bothers me because of the way it handles margins around
components, makes unnecessary use of flexbox, and hides the entire sidebar of
the page on mobile. Which I don't think will often be very useful.

I'm very opinionated about my css frameworks.

~~~
xcatliu
Skeleton is good, but not prefect on mobile.

You can try it on your iPhone [http://getskeleton.com](http://getskeleton.com)

As I tried, scrolling in a scroll-view (the overflow:auto section) is not
smooth, <select> element is ugly, and the <pre><code> even not working
(although it might be the website's problem, not the framework's, it proved
that they didn't tested on mobile)

Skeleton has another major issue, it overrides the default styles of <input>s
and <table>s, making it very hard to set it back. This is not friendly to
third-party libraries. As far as I can see, no other frameworks did this.

~~~
Kequc
I haven't had any of those problems... but if you don't like something it does
just delete those lines. I'm not hard line about these things, it's just my
favourite one.

------
brudgers
Project home: [http://getmobicss.com/](http://getmobicss.com/)

------
watchdogtimer
I like how simple and lightweight this framework is. The idea of setting all
top margins to 0 makes it easier to adjust things, too.

But I don't like the idea of having to install both Ruby and node just to work
with a simple scss file. :-(

~~~
dqv
I felt the same way about scss until I found out about SassC. Check it out:
[https://github.com/sass/sassc](https://github.com/sass/sassc)

------
Scarbutt
What's the norm if you need a desktop and mobile version of a webpage, to have
one separate code base for each one(can be on the same repo) or all the code
together with the appropriate screen size detections?

~~~
kingkool68
Responsive design is the norm so I guess the answer to your question is "all
the code together"

------
chowes
Not sure why this seems to be getting a lot of negativity. I really like this.
I'm going to try it out with my next weekend project.

------
huphtur
QR Code on that web page... "Scan to view on mobile". Because typing
getmobicss.com on your mobile is too difficult?

~~~
xcatliu
Typing getmobicss.com is not difficult, but for other urls it may be
difficult, for example if your website has a url like this

[https://www.reddit.com/r/television/comments/511qv7/mythbust...](https://www.reddit.com/r/television/comments/511qv7/mythbusters_build_team_get_their_own_netflix_show/)

------
simplify
Are there any CSS frameworks nowadays that use flexbox instead of the float-
grid model?

~~~
xcatliu
Bootstrap v4 provides an opinion to use flex box instead of the traditional
grid.

[http://v4-alpha.getbootstrap.com/getting-
started/flexbox/](http://v4-alpha.getbootstrap.com/getting-started/flexbox/)

------
rhabarba
When has development degraded to "just use a framework"?

~~~
supercoder
Since when people don't want to solve the same boring problem repeatedly.

~~~
naasking
s/boring/annoying/

