FlexLib - FlexLib is a framework for creating native iOS applications using xml file, similar to Android and

•    Objective-C

---

FlexLib is an Objective-C layout framework for iOS. It's based on flexbox model which is standard for web layout. So the layout capability is powerful and easy to use. With FlexLib, you can write iOS UI much faster than before, and there are better adaptability.

autolayout flexbox yoga ios flexbox-model layout framework iphonex hot-reload screenshot masonry flexlib xml iphone-x livereload facebook css xml-layout intellisense

Fibonacci - Flexbox page layout composer

•    Javascript

---

Fibonacci is an offshoot of an internal tool created to let non-developers design page layouts using Flexbox, without having to learn HTML or CSS. Live demo here. Fibonacci starts with a blank <div> , which you can then split to your heart's content. It generates both the HTML and CSS needed to recreate the layout in your own pages. After you've made your horizontal or vertical split, you can then add a new sibling, shrink or expand, give it a fixed width/height, remove or split it again. Remember to add a unit when you enter a fixed width or height! Once you're happy with the layout, hit the export icons to copy the generated code and paste it wherever you need it in your own code.

Sketch-Flex-Layout - Plugin for Sketch allowing for CSS Flexbox layouts using stylesheets and prototypes

•    Javascript

---

A Plugin for Sketch allowing for CSS Flexbox layouts using stylesheets and prototypes. Here's a Medium article with some background. To install the plugin download this repository as a ZIP and double click the Flex-Layout.sketchplugin file. Important note : This is a very work in progress version for early testing. A lot of things are subject to change and using it on critical projects is not yet recommended. Flex Layout allows you to use both a stylesheet text layer and 'prototypes'. Prototypes are layer groups with added style layers - their sizes work as base for establishing paddings, margins, sizes etc. There's an example file included in the repository that shows examples of working with both.

react-native-masonry - :raised_hands: A pure JS react-native component to render a masonry~ish layout for images with support for dynamic columns, progressive image loading, device rotation, on-press handlers, and headers/captions

•    Javascript

---

"Bricks" are the basic building block of the masonry and are passed into the props.bricks. They essentially represent the items within each column and require a uri property at a minimum. However, you can freely add additional properties to the data property if you need access to certain data within your brick.onPress handler and footer/header renderer. The following properties are available.

react-native masonry-layout masonry-grid react pinterest-like masonry pinterest grid layout

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.

flexbox awesome css css3 css-flexbox flexbox-layout flexbox-grid w3c-specification

FlexLayout - FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation

•    Swift

---

FlexLayout adds a nice Swift interface to the highly optimized Yoga flexbox implementation. Concise, intuitive & chainable syntax. Flexbox is an incredible improvement over UIStackView. It is simpler to use, much more versatile and amazingly performant.

ios ios-swift layout layout-engine flexbox flex-layout flexbox-container css-flexbox flex-container flexbox-layout yoga flex-items ios-lib ios-ui swift-3 swift-framework flexbox-properties

salvattore - A jQuery Masonry alternative with CSS-driven configuration.

•    Javascript

---

Salvattore is a library agnostic JS script that will help you organize your HTML elements according to the number of columns you specify, like jQuery Masonry. To find out more and see it in action, please visit our website.

grid layout browser masonry

proteus - Proteus : A JSON based LayoutInflater for Android

•    Java

---

Proteus is meant to be a drop-in replacement for Android’s LayoutInflater; but unlike the compiled XML layouts bundled in the APK, Proteus inflates layouts at runtime. With Proteus, you can control your Apps layout from the backend (no WebViews). Forget the boilerplate code to findViewById, cast it to a TextView, and then setText(). Proteus has runtime data bindings and formatters. Plugin in your own custom views and attributes and functions to flavour proteus to your requirements. Instead of writing layouts in XML, in proteus layouts are described in JSON, which can be used to inflate native Android UI at runtime. The JSON layouts can be hosted anywhere (on the device, on servers, etc.).

proteus android data-binding json layout-engine data binding functions dynamic-layout proteus-demo proteus-demo-server

Masonry - Harness the power of AutoLayout NSLayoutConstraints with a simplified, chainable and expressive syntax

•    Objective-C

---

Masonry is still actively maintained, we are committed to fixing bugs and merging good quality PRs from the wider community. However if you're using Swift in your project, we recommend using SnapKit as it provides better type safety with a simpler API. Masonry is a light-weight layout framework which wraps AutoLayout with a nicer syntax. Masonry has its own layout DSL which provides a chainable way of describing your NSLayoutConstraints which results in layout code that is more concise and readable. Masonry supports iOS and Mac OS X.

waterfall.js - Tired of use creepy hacks or heavy ways to get a Grid based on Pinterest?

•    Javascript

---

This question has a good point. Yes, there are CSS ways to solve this, using flexbox or columns technic, but this doesn't work well when you don't know about your data/structure. So we have to use JavaScript. The challenge is create a decent algorithm where the structure doesn't matter: Waterfall will work. ⚠️ The latest stable is waterfall-1.0.2 (which is used in the website), newest versions are suffering issues from a major rewrite.

pinterest grid css waterfall layout cascading masonry columns

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.

html css user-interface flexbox

vanilla-masonry - Masonry layouts without any frameworks

•    Javascript

---

Masonry layouts without any frameworks

react-blocks - A higher-level react component to manage complex layouts using flexbox.

•    Javascript

---

A higher-level react component to manage complex layouts using flexbox. Everything is just another block. Heavily inspired by Polymer layout.html, LayoutJS and the CSSinJS pattern. Just pure layout, No more, No less.

isotope - :revolving_hearts: Filter & sort magical layouts

•    HTML

---

See isotope.metafizzy.co for complete docs and demos.Link directly to Isotope files on unpkg.

dom browser masonry layout filter sort jquery-plugin jquery

FreeFlow - A layout engine for Android that decouples layouts from the View containers that manage scrolling and view recycling

•    Java

---

A layout engine for Android that decouples layouts from the View containers that manage scrolling and view recycling. FreeFlow makes it really easy to create custom layouts and beautiful transition animations as layouts are changed. FreeFlow is a composition based approach to Android Layouts. As opposed to default Android Layouts, FreeFlow Layouts are swappable at runtime which allows views to their new states smoothly. The fundamental difference here is that FreeFlow prefers Composition over Inheritance which makes the system a lot more adaptable.

PinLayout - Fast Swift Views layouting without auto layout

•    Swift

---

Extremely Fast views layouting without auto layout. No magic, pure code, full control and blazing fast. Concise syntax, intuitive, readable & chainable. PinLayout can layouts UIView, NSView and CALayer. 📌 PinLayout is actively updated. So please come often to see latest changes. You can also Star it to be able to retrieve it easily later.

layout-engine carthage cocoapod chainable-methods swift-3 swift-library uiview-extension ios ios-swift ios-lib layout rtl left-language margin anchor ios-ui swift-framework language

material-dashboard - Material Dashboard - Open Source Bootstrap 4 Material Design Admin

•    CSS

---

Material Dashboard is a free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements. Material Dashboard makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

bootstrap-material material-dashboard creative-tim material-design material-ui material-theme bootstrap-4 bootstrap4 bootstrap-theme admin admin-dashboard admin-template bootstrap-material-admin bootstrap-material-dashboard material-design-admin html-dashboard html-css-dashboard web-dashboard freebie free-bootstrap-dashboard css3-dashboard bootstrap-admin bootstrap-dashboard frontend responsive-bootstrap-dashboard

flexibility - A JavaScript polyfill for Flexbox

•    Javascript

---

Flexibility is a polyfill for the Flexible Box Layout, commonly known as Flexbox. With Flexibility, you get to design beautiful, flexible layouts on the web without sacrificing the experience in older browsers. Flexbox lays out, aligns, and distributes elements in a container, even when their size is unknown or dynamic. To better understand Flexbox, read Chris Coyier’s excellent Complete Guide to Flexbox.

display direction wrap flow justify content align items order grow shrink basis self auto start end center baseline stretch space between around polyfill ie internet explorer layout

masonry - :love_hotel: Cascading grid layout library

•    HTML

---

Masonry works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. See masonry.desandro.com for complete docs and demos.

dom browser grid layout outlayer

Less-Framework - An adaptive CSS grid system.

•    CSS

---

Less Framework is a CSS grid system for designing adaptive web sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. Solid knowledge of HTML and CSS is recommended. You'll find the dimensions for each layout noted down in comments within the CSS files.