driveway - pure CSS masonry layouts

  •        22

driveway is an explorative project for developing pure CSS masonry layouts. It is developed using stylus. You may have come here from the blog post I wrote about pure CSS masonry layouts. If that's the case and you want the exact code I used in that post(with vendor prefixing), you'll be best served looking in the dist folder for driveway.blog.css and driveway.blog.min.css. Alternatively, use bower to pull in the repo.

https://github.com/jh3y/driveway

Tags
Implementation
License
Platform

   




Related Projects

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.

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.

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.


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.

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.

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

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.

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.

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.

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.

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.

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.

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.

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.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.