All Projects → html-next → Flexi

html-next / Flexi

Licence: mit
Just a layout framework. Design for cross-platform with ease.

Projects that are alternatives of or similar to Flexi

use-breakpoint
React `useBreakpoint` hook to have different values for a variable based on a breakpoints.
Stars: ✭ 17 (-92.27%)
Mutual labels:  responsive, breakpoint
react-matchmedia-connect
Higher order components for matchMedia
Stars: ✭ 49 (-77.73%)
Mutual labels:  responsive, breakpoint
breaking-point
BREAKING-POINT lets you quickly define and subscribe to screen (i.e. window) breakpoints in your re-frame application
Stars: ✭ 36 (-83.64%)
Mutual labels:  responsive, breakpoint
Mq Scss
Extremely powerful Sass media query mixin. Allows you to create almost any media query you can imagine.
Stars: ✭ 122 (-44.55%)
Mutual labels:  responsive, breakpoint
Match Media
Universal polyfill for match media API using Expo APIs on mobile
Stars: ✭ 95 (-56.82%)
Mutual labels:  responsive, breakpoint
Ember Light Table
Lightweight, contextual component based table for Ember 2.3+
Stars: ✭ 310 (+40.91%)
Mutual labels:  responsive, ember
ember-responsive-image
Automatically generate resized images at build-time, optimized for the responsive web, and using components to render them easily as <picture> elements.
Stars: ✭ 103 (-53.18%)
Mutual labels:  ember, responsive
Responsive Bootstrap Toolkit
Responsive Bootstrap Toolkit allows for easy breakpoint detection in JavaScript
Stars: ✭ 364 (+65.45%)
Mutual labels:  responsive, breakpoint
React Flexa
Responsive React Flexbox (CSS Flexible Box Layout Module) grid system based heavily on the standard CSS API.
Stars: ✭ 120 (-45.45%)
Mutual labels:  responsive, breakpoint
Flutter Web Demo
🌍 Responsive web app powered by Flutter and Dart
Stars: ✭ 173 (-21.36%)
Mutual labels:  cross-platform, responsive
Gtest Runner
A cross-platform, Qt5 based Graphical User Interface for Google Test unit tests
Stars: ✭ 207 (-5.91%)
Mutual labels:  cross-platform
Awesome Fluttercn
一份 Flutter 优秀中文资源列表,在这里能找到优质的Flutter库、工具,教程,文章等。
Stars: ✭ 208 (-5.45%)
Mutual labels:  cross-platform
Libagar
Cross-Platform GUI Toolkit (stable)
Stars: ✭ 212 (-3.64%)
Mutual labels:  cross-platform
Superherointeraction
SuperHeroInteraction
Stars: ✭ 216 (-1.82%)
Mutual labels:  cross-platform
Ember Tooltips
Easy and extendible tooltips for Ember components - http://sir-dunxalot.github.io/ember-tooltips/
Stars: ✭ 205 (-6.82%)
Mutual labels:  ember
Nitrokey App
Nitrokey's Application (Win, Linux, Mac)
Stars: ✭ 210 (-4.55%)
Mutual labels:  cross-platform
Flutterexampleapps
[Example APPS] Basic Flutter apps, for flutter devs.
Stars: ✭ 15,950 (+7150%)
Mutual labels:  cross-platform
Amazeui
Amaze UI, a mobile-first and modular front-end framework.
Stars: ✭ 13,548 (+6058.18%)
Mutual labels:  responsive
Photoviewer
🌀 A JS plugin to view images just like in Windows.
Stars: ✭ 203 (-7.73%)
Mutual labels:  responsive
Irccloud Desktop
IRCCloud Desktop App
Stars: ✭ 215 (-2.27%)
Mutual labels:  cross-platform

Flexi

Greenkeeper badge

npm version Ember Observer Score Build Status Code Climate

Flexi is a responsive-design layout framework like Bootstrap and Foundation. Flexi is focused on performance and maintainability, utilizing Ember for greater configuration and convenience than Bootstrap or Foundation can offer.

Flexi does most of it's heavy lifting at build time, happily adding very little runtime code and CSS to your project.

Learn More

Installation

ember install flexi

That's all that required if you're using the classic component layout. If you are using a pod-based structure you will also need to install the shim for ember-app. This is done by modifiying your ember-cli-build.js file. This shim makes ember-cli's template tree able to find the templates for layouts.

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var shim = require('@html-next/flexi-layouts/lib/pod-templates-shim');

shim(EmberApp);

Support, Questions, Collaboration

Join the Ember community on Discord

Status

Changelog

Build Status Code Climate Test Coverage dependencies devDependency Status

Contributing

  • Open an Issue for discussion first if you're unsure a feature/fix is wanted.
  • Branch off of master (default branch)
  • Use descriptive branch names (e.g. <type>/<short-description>)
  • Use Angular Style Commits
  • PR against master (default branch).

Commmits

Angular Style commit messages have the full form:

<type>(<scope>): <title>

<body>

<footer>

But the abbreviated form (below) is acceptable and often preferred.

<type>(<scope>): <title>

Examples:

  • chore(deps): bump deps in package.json and bower.json
  • docs(component): document the fast-action component

Thanks

A special thanks goes out to @ebryn for the inspiration to pursue a solution for explicit layouts, and IsleofCode for providing the time to built it.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].