9 ms·

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

91 points by xcatliu 10y ago

sotojuan 10y ago
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?
- franciscop 10y ago
  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.
  - JusticeJuice 10y ago
    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.
- Kequc 10y ago
  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 10y ago
    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 10y ago
      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.
- szensius 10y ago
  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.
- cel1ne 10y ago
  I use http://tachyons.io/ 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/ http://tachyons.io/docs/layout/spacing/ and for typography: http://tachyons.io/docs/typography/scale/ 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 https://github.com/tachyons-css/react-native-style-tachyons
Scarbutt 10y ago
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?
- xcatliu 10y ago
  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.
- kingkool68 10y ago
  Responsive design is the norm so I guess the answer to your question is "all the code together"
brudgers 10y ago
Project home: http://getmobicss.com/ http://getmobicss.com/
huphtur 10y ago
QR Code on that web page... "Scan to view on mobile". Because typing getmobicss.com on your mobile is too difficult?
- xcatliu 10y ago
  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/mythbusters_build_team_get_their_own_netflix_show/ https://www.reddit.com/r/television/comments/511qv7/mythbust...
simplify 10y ago
Are there any CSS frameworks nowadays that use flexbox instead of the float-grid model?
- jazoom 10y ago
  I believe Foundation has a flexbox mode. There's also this: http://flexboxgrid.com http://flexboxgrid.com I just use whatever I want and use LostGrid in flexbox mode for my grids.
- xcatliu 10y ago
  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/
sleazebreeze 10y ago
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 10y ago
  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 10y ago
    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.
- fizzbatter 10y ago
  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.
rhabarba 10y ago
When has development degraded to "just use a framework"?
- supercoder 10y ago
  Since when people don't want to solve the same boring problem repeatedly.
  - naasking 10y ago
    s/boring/annoying/
watchdogtimer 10y ago
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 10y ago
  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
pritambarhate 10y ago
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 10y ago
  Also IE9, which is used by many people, especially at work, who's computers are stuck on Windows 7.
  - carc1n0gen 10y ago
    This is targeting mobile specifically
  - ergo14 10y ago
    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.
pritambarhate 10y ago
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 owner, flexbox only is still not an option.
chowes 10y ago
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.

91 points by xcatliu 10y ago

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?

franciscop 10y ago
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.
- JusticeJuice 10y ago
  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.
Kequc 10y ago
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 10y ago
  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 10y ago
    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.
szensius 10y ago
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.
cel1ne 10y ago
I use http://tachyons.io/ 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/ http://tachyons.io/docs/layout/spacing/ and for typography: http://tachyons.io/docs/typography/scale/ 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 https://github.com/tachyons-css/react-native-style-tachyons

Scarbutt 10y ago

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?

xcatliu 10y ago
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.
kingkool68 10y ago
Responsive design is the norm so I guess the answer to your question is "all the code together"

brudgers 10y ago

Project home: http://getmobicss.com/ http://getmobicss.com/

huphtur 10y ago

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

xcatliu 10y ago
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/mythbusters_build_team_get_their_own_netflix_show/ https://www.reddit.com/r/television/comments/511qv7/mythbust...

simplify 10y ago

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

jazoom 10y ago
I believe Foundation has a flexbox mode. There's also this: http://flexboxgrid.com http://flexboxgrid.com I just use whatever I want and use LostGrid in flexbox mode for my grids.
xcatliu 10y ago
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/

sleazebreeze 10y ago

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 10y ago
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 10y ago
  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.
fizzbatter 10y ago
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.

rhabarba 10y ago

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

supercoder 10y ago
Since when people don't want to solve the same boring problem repeatedly.
- naasking 10y ago
  s/boring/annoying/

watchdogtimer 10y ago

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 10y ago
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

pritambarhate 10y ago

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 10y ago
Also IE9, which is used by many people, especially at work, who's computers are stuck on Windows 7.
- carc1n0gen 10y ago
  This is targeting mobile specifically
- ergo14 10y ago
  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.

pritambarhate 10y ago

chowes 10y ago

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.