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?
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.
Actually Bootstrap v4 provides an opinion to use flex box instead of the traditional grid.
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?
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.
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.
However as per:
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.
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?
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
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.
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.
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.
But if you make your own framework, it's much easier because you know it all.
But I don't like the idea of having to install both Ruby and node just to work with a simple scss file. :-(
In this case Mobi.css is a choice. You can show a QRCode to guide people to mobile.
There's also this: http://flexboxgrid.com
I just use whatever I want and use LostGrid in flexbox mode for my grids.