mobi-css / mobi.css Goto Github PK

http://getmobicss.com/

The ids are changed to capital letters. why? can't figure it out.

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?

sup, highlight, etc

May broke third party libraries

726332269：你的那只猫在手机上看起来很大，让上面的文字都没法看了，不是做的自适应吗？
726332269：小米 5 ， uc 浏览器
726332269：我用 chrome 看起来就正常，大小合适。

From https://www.v2ex.com/t/302356#reply53

It's easier to write

I know the main purpose of this css file is for mobile and that's why I started using it. However, with the new alpha releases, my web site is no longer centered in the browser window.

I now have a large right margin on my desktop and a small right margin on my mobile phone.
I would like no margin on my mobile phone and centered on my desktop.

Let me know if you think I am using this wrong.

建议增加一个处理文本溢出的mixin，因为项目中各种title的溢出简直要命;

Your site is unavaliable for reference docs, guides or examples about this framwork.

Sugest:

demo path in project folder

Docs.md for reference framework

GitHub Page for project and documentation examples

I like the idea of this framework it is very succinct.

Those classes is a little confused because people don't know they affects their child elements, not themselves.

Will think for another way to implement those.

v1.0.0 is 9.3kb after gziped. We need to figure out how to reduce the size

打成engligh了

How to make item in container display in vertical??
if we want to make item in container dispaly in vertical and item can wrap when the height of container is limited .
but uc browser for android can not perform true!!
because uc browser for android only supports the old flexbox specification and does not support wrapping.

eg: <.ul><.li class="first item":>1 <./li><.li>2<./li><.li>3<./li><.li>4<./li><.li>5<./li><.li>6<./li><.li>7<./li><.li>8<./li><.li>9<./li><./ul>
ul {display:flex;flex-flow:column wrap;justify-content:flex-start;height:100px;overflow-x:auto}
li {width:50px;height:50px}
.first item {width:80px; 100px;}

即父元素高度限定，宽度根据子元素数量自适应。子元素从上到下竖直排列，当父元素高度不够的时候换下一列。这种布局在uc 浏览器 安卓版本无法实现，原因是安卓UC内核不支持flex布局的wrap。请问这个项目有针对这个垂直布局进行UC安卓端的适配吗？

Hello,

http://getmobicss.com/ show a landing page due to domain name not renewed.

Need to find a solution

Collapse columns in small screens (e.g: < 500px) ?

The visibility in mobile devices is affected since the columns do not automatically expand into a single row.

alerts is not the primary functions for mobile, will be removed in the next version

There is already have hide-on-mobile, I plan to add show-on-mobile class.

https://travis-ci.org/xcatliu/mobi.css/builds/158198786

Path ./id_rsa.enc and ./ssh_config is wrong in deploy.sh, it shoud be ./.travis/id_rsa.enc and ./.travis/ssh_config. My mistake...

If the width of col content is large, it'll break the page

Latest 微信 and Chrome on Android

Container and container-side not direct in body cause container-side not on the side, it's on the top.

<body>
    <div id="app">
        <div class="container-side">
            <p>Scan to view on mobile</p>
            <img src="path/to/qrcode.png" />
        </div>
        <div class="container">
            <h1>Mobi.css</h1>
        </div>
    </div>
</body>

感觉尺寸单位并不是很统一吖，既然是用在Mobile上，为什么不把所有的尺寸单位统一使用vw呐。
还有 html 定义个font-size: 10px 是什么用的呐，老白菜表示不堪其用吖。。。。

Header

• Home
• Docs
• More
• GitHub

Home

• Brief introduction

Docs

• Design
• API

More

• Themes
• Plugins
• Examples

GitHub

• A Link

row and flex-left is kind of overlap.
And it's not convenient to use col in flex-left.

Why row need to have margin-left: -15px?

Maybe we need to redesign it.

cndjs => cdnjs

https://github.com/xcatliu/mobi.css/blob/gh-pages/index.html#L104

Use gap, double-gag or small-gap, big-gap. This is easier to understand and consistent with naming style of other class names. Furthermore, the gap height can be changed in variable and not equal to 15px.

rem layout is a popular and modern way to deal with mobile pages layout.
Is there any plan to support it?

In the indexes of the documentation, there is an alert class, it shouldn't be there.

Chrome 53, El Capitan

I'm thinking about to add plugins and themes system for Mobi.css.

But the idea is not very mature, so [email protected] will only include the basic styles. For now I think it's better if we can think over how we can implement plugins and themes. Maybe it's helpful to [email protected]

Here is something I've thought:

Why plugins

There are too many components a css framework could have. Mobi.css only focus on mobile, but it's still a lot of components we may need. It's redundant if every developers need to develop their own components. So maybe a plugins system is useful.

What should be includes in a plugin

• css files that people can directly use, like dist/mobi-plugin-toast.min.css
• scss files that people can import it to build their own css files. like src/mobi-plugin-toast.scss
• (optional) js files that people can directly use, like dist/mobi-plugin-toast.min.js
• (optional) js files that people can require it to build their own bundled js file. like src/mobi-plugin-toast.js

Some points

• js is optional, components can only have css files.
• js should be separated from Mobi.css, it should work fine even if people don't use Mobi.css. It's a independent component.

Why themes

Mobi.css is easily to customize, we can provide a standard way to help people create their own themes, and share it to the community.

A question, how theme works together with plugins?

表单中对iphone4兼容性不太好，如果能够解决一下就更好了

Now it's not convenient to set width for col-custom.

col and the pre element will overflow row

<body>
    <div class="flex-center">
        <div class="container">
            <nav>
                <button class="btn" type="button" name="button">Header</button>
            </nav>
            <div class="row">
                <div class="col-1-4 hide-on-mobile" style="padding:0 30px;">
                    <p>Scan to view on mobile</p>
                    <img src="path/to/qrcode.png" />
                </div>
                <div class="col">
<pre>Mobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi.cssMobi</pre>
                </div>
            </div>
        </div>
    </div>
</body>

无法访问了，为啥不用github，而用coding，coding多久没人访问就自动关闭了

It's easier to write