mobi.css - A lightweight, scalable, mobile-first CSS framework

  •        1

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

http://getmobicss.com/
https://github.com/mobi-css/mobi.css

Tags
Implementation
License
Platform

   




Related Projects

postcss-cssnext - :cyclone: PostCSS plugin to use tomorrow's CSS syntax, today.

  •    Javascript

PostCSS plugin to use tomorrow’s CSS syntax, today. PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.

concise

  •    CSS

Concise CSS is a lightweight CSS framework that provides a number of great features without the bloat. Concise CSS provides a solid foundation to stylize your website. It offers an alternative to frameworks like Bootstrap and Foundation, with the difference that Concise only includes the minimum styles required. That does not mean that the features are limited; is possible to use add-ons on top of the core to extend the functionality as required.

spectre - Spectre.css - A Lightweight, Responsive and Modern CSS Framework

  •    CSS

Spectre.css is a lightweight, responsive and modern CSS framework. Spectre is a side project based on years of CSS development work on a large web service project. Spectre only includes modern base styles, responsive layout system, CSS components and utilities, and it can be modified for your project with Sass/Scss compiler.

OnsenUI - Cross-Platform HTML5 Hybrid App Framework

  •    Javascript

Onsen UI is a library of UI components to help you create beautiful hybrid and mobile web apps for both Android and iOS using Javascript. It enriches the user’s experience for mobile web apps with natively designed UI elements.


flexbox-patterns - Patterns for using flexbox CSS to build awesome UI components.

  •    CSS

Assuming you have Node installed, you can install the project dependencies with npm install. This will install PostCSS and Autoprefixer; two critical tools for making your CSS cross-browser compatible. This command will concatenate the source CSS files into a single CSS file, and then use PostCSS to add various vendor-prefixed properties. Open up dist/index.html to see a demo page of the various flexbox patterns in the browser.

mini.css - A minimal, responsive, style-agnostic CSS framework!

  •    CSS

mini.css is a lightweight CSS framework (under 7KB gzipped) designed with mobile devices and modern browsers in mind. Responsiveness, ease of use and customization are some of the main features of the framework, while accessibility and extensive documentation are some of the secondary focuses of the project. The framework is written using Sass, while most of its components are based on Flexbox. For instructions on how to use, best practices, templates and other usage information, please visit the framework's documentation.

bootstrap-material-design - Material design theme for Bootstrap 3 and 4

  •    CSS

Material Design for Bootstrap is the best way to use Material Design guidelines by Google in your Bootstrap 4 based application. Since this is a fully customizable version of Bootstrap, just include Material Design for Bootstrap CSS instead of Bootstrap CSS, and include the JavaScript at the end of your document (just before the </body> tag), and everything will be converted to Material Design.The things to do are a lot and the time is little, if you are a passionate developer with experience with Bootstrap and Material Design for Bootstrap and you have some spare time, please consider becoming a contributor of this project! If you are interested contact @FezVrasta or just adopt one of our issues.

teutonic-css - A modern CSS framework — versatile, well documented.

  •    CSS

Teutonic CSS is a modern web design system to develop responsive, accessible websites and web applications. It's based on CSS Variables for easy customization and extension. It features cool tech like CSS Grid. The source is a collection of SCSS modules, but you can use the minified version, as it can be modified using CSS Vars. This repo only contains the pure SCSS files to build the CSS from, also check out the Teutonic Docs.

css-gridish - Automatically build your grid design’s CSS Grid code, CSS Flexbox fallback code, Sketch artboards, and Chrome extension

  •    CSS

This tool is not a grid system with a grid already designed for you. Instead, CSS Gridish builds all of the resources for the grid your team designed. We hope it helps teams adapt CSS Grid sooner and enables more complex layouts. To show how versatile the tool is, we have examples of grids from Bootstrap, Carbon Design System, and Material Design.

maxmertkit - Maxmertkit, powerful, most customizable and easiest for usage mobile first front-end framework for web-development

  •    CSS

Maxmertkit, powerful, most customizable and easiest for usage mobile first front-end framework for web-development, created by Vetrenko Maxim, and maintained by the core team with the support and involvement of the community. Read the Start page for information on the framework contents, howto videos, examples, and more.

Metro-UI-CSS - Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style

  •    CSS

Metro 4 is an MIT-licensed open source project. It's an independent project with its ongoing development made possible entirely thanks to the support by these awesome Backers. Documentation and Demo for v4: getmetroui.com or metroui.org.ua.

awesome-flexbox - :eyeglasses: A curated list of CSS Flexible Box Layout Module or only Flexbox.

  •    

A curated list of CSS Flexible Box Layout Module or only Flexbox. Inspired by awesome-webcomponents and awesome-svg. The specification describes a CSS box model optimized for user interface design.

tailwindcss - A utility-first CSS framework for rapid UI development.

  •    CSS

A utility-first CSS framework for rapidly building custom user interfaces. For full documentation, visit tailwindcss.com.

wenk - :wink: Lightweight pure CSS tooltip for the greater good

  •    CSS

Wenk is a Lightweight tooltip available in pure CSS, cssnext using PostCSS, Less or SCSS. Simply add the data-wenk attribute to your HTML with the text you want to display.

mustard-ui - A starter CSS framework that actually looks good.

  •    CSS

Mustard is a starter CSS framework that actually looks good. You can start configuring the colors to suit your needs by first changing the $brand-color variable located in src/scss/base/base.scss from $color-green-500 to $color-indigo-500 or any other color you'd like. There are lots of colors that can be found in the src/scss/vars/colors.scss file.

react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules

  •    Javascript

React Toolbox uses CSS Modules by default to import stylesheets written using PostCSS & postcss-preset-env features. In case you want to import the components already bundled with CSS, your module bundler should be able to require these PostCSS modules. Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require PostCSS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

User-Interface

  •    HTML

Being able to create a user interface from scratch based on a design file is considered a basic necessity for front end developers. We will be building a single page website using HTML and CSS. Given this design file, use HTML and CSS to build the web page layout. Remember, you can only use display:inline-block and box model CSS properties for this project. Note: you are NOT permitted to use Flexbox or CSS Grid. This is an exercise in basic layout techniques.