A lightweight, scalable, mobile-first CSS framework

Related tags

Learning resource css design mobile postcss cssnext flexbox css-framework mobile-first mobi-css
Overview

Mobi.css Logo

Mobi.css

Build Status npm package npm downloads CDNJS version

A lightweight, scalable, mobile-first CSS framework

Homepage

Features

Lightweight

The default bundle of Mobi.css provides the basic styles to build clean and elegant webpages. It's only 3kb after gzipped, and it's very easy to get started.

Scalable

Plugin system makes CSS scalable. You can import plugins to enhance Mobi.css, or use the plugin as a standalone CSS library. It's even possible to use a plugin without Mobi.css.

Mobile-first

Mobi.css focus on the details and provides the best user experience, especially for content-rich webpage. It's designed for mobile, but also works awesome on desktop.

Contributing

Please checkout CONTRIBUTING.md

Community

Like Mobi.css? Please join the community to discuss new features, open an issue or create pull requests!

License

MIT

Comments
  • Suggest to rename mt-15 and mt-30

    Suggest to rename mt-15 and mt-30

    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.

    task 
    opened by J-F-Liu 6
  • Plugins and themes for Mobi.css@2.0.0

    Plugins and themes for [email protected]

    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?

    enhancement 
    opened by xcatliu 6
  • iphone5(s) 下阅读官方文档有一个横向滚动条

    iphone5(s) 下阅读官方文档有一个横向滚动条

    以下内容是基于老版的 Mobi.css 官方网站的，已过时了。但是 bug 是存在的，请看后面的讨论内容。

    使用的 Responsive Web Design Tester 测试。

    不过手头没有 iphone5(s) 真机，不知道真机实测下是什么样的。

    按理说横向不该出现滚动条，否则很影响滑动手感。

    测试效果如下图：

    如果图片无法正常显示请点击外链查看

    opened by ghost 5
  • Collapse columns

    Collapse columns

    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.

    question 
    opened by subversivo58 5
  • Communities for Mobi.css

    Communities for Mobi.css

    opened by xcatliu 4
  • Improve docs, add examples

    Improve docs, add examples

    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.

    task 
    opened by subversivo58 4
  • Issue about row, col and flex-left

    Issue about row, col and flex-left

    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.

    task 
    opened by xcatliu 3
  • Fixed PR failed

    Fixed PR failed

    解决以下几个问题：

    1、Pull Request失败。原因是fork和pull request时Travis CI不会定义openssl参数中使用的那两个变量，所以我把openssl那行移到deploy.sh中，只有不是pull request时，才执行openssl和deploy。

    2、ESLint警告。由于在gulpfile.js中使用了console，所以我添加了no-console: off以避免警告。

    3、[readonly]焦点问题。我认为拥有readonly属性的控件不应该拥有焦点，并且我试了Chrome浏览器的默认readonly行为，控件也是没有焦点的。所以重载了[readonly]的焦点样式。

    opened by pixcai 2
  • no longer centered

    no longer centered

    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.

    question 
    opened by gjtyler 2
  • col will overflow row

    col will overflow row

    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>
    bug 
    opened by guyskk 2
  • Container and padding

    Container and padding

    Container's this correct? I do not know the purpose in having padding. padding: 0 0.9375rem 0.9375rem;

    In moments I have to correct with padding: 0.375rem 0.9375rem 0.375rem;

    opened by edica 0
  • Using CSS variables in Mobi.css v3

    Using CSS variables in Mobi.css v3

    After some investigating, I think maybe it's time to use css variables in [email protected]

    First of all, css variables is the future of css. It's already drafted three years ago, and most of modern browsers supports it. There is a demo here.

    Secondly, for me, the most useful feature of SASS is variables. Css variables not only extends the all function of SASS variables, but also has some exciting features. Such as scoping, calculating and re-rendering in time.

    Last, using css variables can bring us a comfortable way to customizing themes, just need to override some variables. No more compiling!

    enhancement 
    opened by xcatliu 2
Releases(v3.1.1)

  • v3.1.1(Sep 27, 2017)

  • v3.1.0(Sep 27, 2017)

  • v3.0.4(Sep 23, 2017)

  • v3.0.3(Sep 23, 2017)

  • v3.0.2(Sep 23, 2017)

  • v3.0.1(Sep 23, 2017)

  • v3.0.0(Sep 3, 2017)

    Mobi.css 3 is coming!

    What's new in Mobi.css 3

    New classes

    • .flex-wrap, unit-1, unit-1-on-mobile, units-gap-big
    • .container-wider, .container-fluid
    • .text-primary

    New official website

    http://getmobicss.com

    Try it out on mobile and desktop!

    Scalable css

    Plugin system makes css scalable. You can import plugins to enhance Mobi.css, or use the plugin as a standalone css library. It's even possible to use a plugin without Mobi.css.

    Read more

    Communities

    Source code(tar.gz)
    Source code(zip)

  • v1.2.0(Apr 5, 2017)

  • v1.1.0(Oct 28, 2016)

  • v1.0.1(Oct 13, 2016)

  • v1.0.0(Sep 30, 2016)

    Features

    • Container for mobile
    • Margin top only
    • Flexbox layout
    • Vertically flexbox
    • Flexible grid system
    • Scroll view
    • Useful utilities

    For more information, please visit: http://getmobicss.com/

    Other changes

    • Add 简体中文 docs
    Source code(tar.gz)
    Source code(zip)

  • v1.0.0-alpha.4(Sep 17, 2016)

    Breaking changes

    • #43 Rename mt-0, mt-15 and mt-30 to top-gap-0, top-gap and top-gap-big
    • #48 Rename col to unit

    New features

    • #48 Add units-gap, unit-0, and flex-vertical
    • Fix styles of <kbd>, <samp>
    • Fix styles of abbr[title]
    • Fix styles of <audio>, <video>
    • Fix styles of <fieldset>, <legend>, <optgroup>, <option>, <progress>

    Other changes

    • Change gap-top and gap-top-big to 14px and 32px
    • Change padding of <code>
    • Change $width-gap from 15px to 14px
    • #41 Design new site, add reference
    Source code(tar.gz)
    Source code(zip)

  • v1.0.0-alpha.3(Sep 5, 2016)

  • v1.0.0-alpha.2(Sep 5, 2016)

  • v1.0.0-alpha.1(Sep 3, 2016)

    From v1.0.0-alpha.1, Mobi.css will not have breaking changes unless there are some important reasons.

    Breaking changes

    • Remove class label, you should use flex-middle instead

    New features

    • Add flex-left, flex-center, flex-right, flex-top, flex-middle, flex-bottom (revert #10)

    Other changes

    • Fixed font-family of pre code in Android
    • Update (add white shadow to black arrow-down image) the background-image of select to enhance the image when use a dark theme
    • Add two browsers support: last 5 UCAndroid versions and last 3 Edge versions
    • Changed website DNS, which cause some problem that some people cannot access the site (#16, #17), solved by adding a mirror site http://getmobicss.xcatliu.com/, will deprecate it when DNS cache is cleared
    • Published site to both GitHub pages and Coding pages, which help Chinese people view this page without the need of climbing over the GFW
    Source code(tar.gz)
    Source code(zip)

  • v0.4.1(Sep 1, 2016)

  • v0.4.0(Sep 1, 2016)

    Breaking changes

    • #11 Remove col-custom, now we can use col and max-width to achieve custom column
    • #14 Rewrite _reset.scss, so that <table> and <input>s in <form> will not be reset, we need to add class="table" to <table> and class="form" to <form>. This will let Mobi.css be more friendly to third party libraries

    Features

    • Add a new class btn, new we can make an <a> to a button by adding class="btn"
    • Add a new class label
    • Add _custom.scss so that people can easily generate their own Mobi.css
    • Add some typography styles such as <mark>, <sup>, etc

    Other changes

    • Remove pre { margin-left: "-15px", margin-right: "-15px" } when screen width larger than container, so that pre will not look odd
    • Use opacity to achieve [disabled]
    • Update <h4>, <h5>, <h6> font-size
    Source code(tar.gz)
    Source code(zip)

  • v0.3.1(Aug 30, 2016)

  • v0.3.0(Aug 30, 2016)

    Breaking changes

    • #9 Remove alerts
    • #10 Remove top middle bottom left center right
    • Change scrollable to scroll-view

    Features

    Other changes

    • Small changes to radio and checkbox
    Source code(tar.gz)
    Source code(zip)

  • v0.2.0(Aug 29, 2016)

    Breaking changes

    • #2 Change col-half, col-third, col-quarter to col-1-2, col-1-3, col-1-4
    • #3 Change section, paragraph, clear-margin-top to mt-30, mt-15, mt-0

    Features

    • #5 Add autoprefixer for compatiblity

    Other changes

    • Update font-size of pre from 1.4rem to 1.5rem
    • Small changes to alerts colors
    • Small changes to the colors of disabled buttons
    Source code(tar.gz)
    Source code(zip)

  • v0.1.0(Aug 28, 2016)

Owner
Mobi.css
A lightweight, flexible css framework that focus on mobile.
Mobi.css
GitHub http://getmobicss.com/
⚡ the first open-source redis client made with care and acessibility-first 🚀

⚡ Redis UI The first open-source project to create an awesome and accessible UI for Redis as a native desktop application. ✨ ?? ?? How to develop loca

Nicolas Lopes Aquino 14 Dec 5, 2022
Scalable Backend Framework for Node.Js

Promethium A Backend Web Framework for TypeScript/Node.js This project was generated using Nx. ?? Smart, Fast and Extensible Build System Adding capab

Alen Yohannan 6 Nov 4, 2022
Next-gen mobile first analytics server (think Mixpanel, Google Analytics) with built-in encryption supporting HTTP2 and gRPC. Node.js, headless, API-only, horizontally scaleable.

Introduction to Awacs Next-gen behavior analysis server (think Mixpanel, Google Analytics) with built-in encryption supporting HTTP2 and gRPC. Node.js

Socketkit 52 Dec 19, 2022
An ergonomic, mobile-first, Prolog playground!

Paízo Programmer Pronounced "Pay-zo Programmer". https://lf94.github.io/paizo-programmer/ Paizo is a playground for programmers. It's intended to be u

Lee 30 Aug 13, 2022
Simple, cli-first, mobile push notification across systems.

Notify.sh Simple, cli-first, mobile push notification across systems. Install In each folder, run npm install. The expected node version is 14. (Highe

David Alen 7 May 20, 2022
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. Why use Preline UI? Based on the Tailwin

Html Stream 1.1k Jan 3, 2023
This is an application that entered the market with a mobile application in real life. We wrote the backend side with node.js and the mobile side with flutter.

HAUSE TAXI API Get Started Must be installed on your computer Git Node Firebase Database Config You should read this easy documentation Firebase-Fires

Muhammet Çokyaman 4 Nov 4, 2021
Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App

iSlider iSlider is a lightweight, high-performant, no library dependencies cross-platform slide controller. It can help handling most sliding effects,

Baidu BEFE 1.7k Nov 25, 2022
Deno's first lightweight, secure distributed lock manager utilizing the Redlock algorithm

Deno-Redlock Description This is an implementation of the Redlock algorithm in Deno. It is a secure, lightweight solution to control resource access i

OSLabs Beta 223 Dec 31, 2022
Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

This simple shopping cart prototype shows how React components and Redux can be used to build a friendly user experience with instant visual updates a

Ivan Kuznietsov 3 Feb 8, 2022
Fast, deep, scalable object cloning for JavaScript

A new approach to deep cloning. A simple library with no external dependencies gives you the opportunity to customize the cloning strategy.

Egor Efimenko 3 Mar 10, 2022
Inferrd makes Machine Learning deployment easy and scalable.

Introduction ML Deployment made simple, scalable and collaborative The new open-source standard to deploy, monitor and secure Machine Learning service

Inferrd 17 Dec 16, 2022
Set up and build a Node.js REST API using Typescript, Express, Mongoose with a maintainable and scalable structure.

Introduction Create a maintainable and scalable Node.js REST API with TypeScript, Express and Mongoose. The project structure is based on MVC and foll

Adam Khomsi 16 Nov 18, 2022
Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client

TsToolbox Toolkit for building scalable web applications with TypeScript, React, Redux and Apollo-Client (inspired by ReKit) ⚠ ⚠ ⚠ Work in Progress ⚠

Daniel Nikravesh 7 Apr 14, 2022
A socially-scalable music NFT indexer.

neume-network-core installation Prerequsites neume-network-core is dependent on an Ethereum full node JSON-RPC interface. Consider running your own no

neume 25 Nov 17, 2022
Create a maintainable and scalable Node.js GraphQL API with TypeScript, Express, Mongoose and Apollo Server.

Set up and build a Node.js GraphQL API using Typescript, Express, Mongoose with a maintainable and scalable structure

Adam Khomsi 7 Nov 4, 2022
Horizontally scalable blockchain using STARK's and partitioned transactional memory

quark quark - quick STARK! A decentralized horizontally-scaled state machine that can transfer 1,000,000 unique tokens on Uniswap in a single atomic t

Liam Zebedee 56 Nov 25, 2022
A Foundation for Scalable Cross-Platform Apps

Electron React Boilerplate uses Electron, React, React Router, Webpack and React Fast Refresh. Install Clone the repo and install dependencies: git cl

Electron React Boilerplate 20.7k Jan 4, 2023
Open source infrastructure for scalable, reliable native integrations in B2B SaaS products

Open-source infrastructure for native integrations Native, customer-facing integrations for your B2B SaaS made simple, reliable and extensible. Explor

Nango 225 Jan 2, 2023