Show HN: Mobi.css – A lightweight, flexible CSS framework that focuses on mobile | Hacker News Reader

Show HN: Mobi.css – A lightweight, flexible CSS framework that focuses on mobile

github.com

91 pointsxcatliu32 comments

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?

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!

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.

They seem useful for prototyping design decisions, but less so for structural needs. Ie, i'm pretty bad at design, i can iterate to something i like, but it's slow and not something i enjoy. If i need a design for a side project, i'm not going to want to spend much (any, really) time thinking of fonts, colors that work together, etc. Frameworks can make that easy, atleast.

Also, there are elements of design in structure, too - ie how consistent you are with spaces between elements. I don't really want to think about any of these.

I would argue that big frameworks like Bootstrap still have a reason to exist because they provide interactive, component based functionality.

It's actually small frameworks like this one that are increasingly useless. Consider that most of the provided functionality can be accomplished with 2-3 css properties.

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

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.

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

This is targeting mobile specifically

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.

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?

I use my own library extensively (which has been on HN few times), mainly because since I made it I know every bit of it. But I use it as a base to grow the style and have decent ground such as buttons/inputs/etc.

So I only need to take care of the bigger things like colors and shapes, while the library makes sure the small bits are consistent (widths and heights, box-sizing, :hover and :active, etc).

I've tried not using it but the amount of work required to make CSS work and look nicely with all those quirks just doesn't make sense. It's much easier to overwrite a background and border-radius than to write a proper button from scratch.

Next step, I'm thinking about making it all abstract with scss then I can just @extend those %placeholders.

Thats the thing right, a CSS framework with a lot of sweet features is a lot of complicated. There's so much to learn it's almost easier to just use plain css.

But if you make your own framework, it's much easier because you know it all.

Skeleton is perfect.

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.

Skeleton is good, but not prefect on mobile.

You can try it on your iPhone 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.

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.

I don't know about more obscure but I've frequently used Foundation and like it. It doesn't feel as bloated at Bootstrap. I haven't used Bootstrap in awhile, so maybe it's gotten better, but I always felt like the number of elements required even for a simple modal seemed like overkill.

I use http://tachyons.io/ for everything and couldn't be happier. It gives you lots of singe-purpose classes that you mix and match.

And most importantly it gives you a REM-relative scale for your spaces: http://tachyons.io/docs/layout/spacing/ and for typography: http://tachyons.io/docs/typography/scale/.

So everything is responsive and I don't ever have to think about pixel-values again.

I even ported it for React Native: https://github.com/tachyons-css/react-native-style-tachyons

Project home: http://getmobicss.com/

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. :-(

I felt the same way about scss until I found out about SassC. Check it out: https://github.com/sass/sassc

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?

I think the question is who is your target customer. If you are building a website that focus on mobile user, it's no need to design and test for desktop.

In this case Mobi.css is a choice. You can show a QRCode to guide people to mobile.

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

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.

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

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...

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

I believe Foundation has a flexbox mode.

There's also this: http://flexboxgrid.com

I just use whatever I want and use LostGrid in flexbox mode for my grids.

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

http://v4-alpha.getbootstrap.com/getting-started/flexbox/

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

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

s/boring/annoying/

Reply on news.ycombinator.com