CSS Flexbox Resources: Grid Systems, Frameworks, Tools & Apps

By: on July 20, 2017 1 Comment

CSS Flexbox Resources
Web Development

CSS Flexbox Resources: Grid Systems, Frameworks, Tools & Apps

Flexbox allows us as CSS developers a new and very useful control method over layouts which was previously difficult to achieve, it allows us to create grids which are flexible in nature meaning that they are aware of content within them so will stretch to accommodate the content. This allows us to focus more on the creation process instead of having to worry about employing hacks such as floats to achieve the same result.

As of today, most modern browsers now support the Flexbox spec so its safe to go ahead and start using it within your projects.

To help you get ahead with this new feature, we have put together this collection of resources to help you make the most of it. We have listed some CSS grid systems which make use of Flexbox, some online tools and apps which will help you create your grid and also some complete CSS frameworks which incorporate Flexbox.

Flexbox Grid Less

Flexbox Grid Less is a flex-based CSS grid system according to the BEM standard. This tool will automatically compute the desired width according to items. And it will automatically fill up the space and possible to make the grid full width. This tool is created by Vivid Websolutions.


More Info & Download

Flexbox Grid

This is another flex grid system which is created by Clare o’neill. By using this awesome tool, you can easily create grid based layouts without having any coding knowledge. Very easy to use and it supports all modern devices.


More Info & Download

Flexbox App

Flexbox helps you to easily construct complex layouts within very short time. This flexbox app is an interactive cheat sheet built with React. It allows you to use all the flexbox attribute with visual feedback. This flexbox app is created by railslove.


More Info & Download

Flexbox in 5 minutes

By using it, you can take a step-by-step tour through the main properties of flexbox. You can easily change the properties of the flexible container and individual flex items. You can also copy and paste live code samples from whatever you create.


More Info & Download

Fibonacci

Fibonacci is a comfortable tool that makes CSS flexbox easy to use. This is an internal tool created to let non-developers to design page layouts using Flexbox, without having to learn HTML or CSS. This awesome tool is created by Ioanni Mitsakis.


More Info & Download

Flexplorer

Flexplorer helps you to play with the new syntax for flexbox with this one-page app. This awesome and useful tool is created by Bennett Feely. You can change the number of items, direction, wrap, etc. This tool helps you to visualize and create layouts for your next web projects.


More Info & Download

Flexy Boxes

This is a CSS flexbox playground and code generation tool and it supports all existing flexbox implementations. Just set the options for your flexboxes, preview them, and then output the code. This exclusive tool is created by Pete Boere.


More Info & Download

Flex Layout Attribute (FLA)

FLA is based on CSS flexbox specification designed to serve you as quickly flexbox shorthand by using two custom html attributes. Those are ‘layout’ and ‘self’. No need to write CSS for layout if you use this tool. This exclusive tool is created by StefanKovac.


More Info & Download

Flexbox Tester

Flexbox tester helps you to understand how to calculate the width of flex items. This tool is very easy to use and helps you to create super complex and and a super flexible layout with CSS. This useful tool is created by MadeByMike.


More Info & Download

Flexbox Defense

In this game, you’ll use common flexbox layouts to position cannons and thwart oncoming waves of enemies. Very useful to understand how flexbox works. Check it now! This game is created by Channing Allen.


More Info & Download

Flexbox Froggy

Flexbox Froggy is a game where you help Froggy and friends by writing CSS code. By using this, You can learn to flexibly align and wrap items with the CSS flex box. Flexbox Froggy is created by Codepip.


More Info & Download

Feather Flex

This is an ultralight flexbox based grid system. If you are looking for an ultralight flexbox based grid system tool, then you can check out this free tool. By using this grid system, you can easily create responsive, modern layouts by some easy process. This tool is created by Sachiv.


More Info & Download

Gridlex

Gridley is a very simple CSS grid system and it helps you to quickly create modern layouts and submodules within very short time. It adjusts column width automatically, no need to add the size of cells, that’s a pretty cool feature of flex. The gridlex tool is created by Webdevlint.


More Info & Download

Batch

This is a simple but responsive, flexbox gird system. Batch takes advantage of the flexbox layout mode. Providing cell ordering, vertical alignment and equal cell heights. This free tool is created by Martin Hofmann.


More Info & Download

Super GiGi

Super Gigi is a customizable Sass grid generator based on CSS3 Flex-box. It was developed with modern web applications in mind and perfect for designing any types of responsive layouts within very short time. This tool is created by Objectway.


More Info & Download

sGrid

This tool also helps you to create responsive grid based layouts. If you are searching for sGrid code or boilerplates take a look at these tools. This is very easy to use and full documentation comes with the download pack. This tool is created by Juliancwirko.


More Info & Download

Ginger Grid

Ginger grid is a minimal flexbox grid system named after a cute dog. It allows you to specify framework options by attaching helper classes to the container element. This exclusive tool is created by Erwstout.


More Info & Download

Flexbox Grid

Flexbox Grid is a simple grid system based on the flex display property. This grid system enables you to specify different column sizes, offsets, and distribution at xs, sm, md & lg viewport widths. This grid system is based on CSS3 flexbox and created by Kristoferjoseph.


More Info & Download

Gridder

This is another simple grid system based on Flexbox. This is a free and open source project created by Tristan White. It works in all modern browsers such as IE10+, Edge, Firefox, Chrome, Safari and Opera. It is very easy to use and setup.


More Info & Download

Waffle grid

Waffle grid is a lightweight, responsive, and fully customizable grid system was written entirely in sass. This grid systems can make your layouts responsive and you can easily customize the grid as your needs. This grid system is created by Lucasgruwez.


More Info & Download

Flexbox Framework

Flexbox Framework is a simple and effective flexbox based framework. This is a super light weight framework and very easy to use. This exclusive framework is created by Fclaussen.


More Info & Download

MyLayout

This powerful framework is implemented by Objective-C. It helps you to create complex interfaces without having any coding knowledge. You can use LinearLayout, RelativeLayout, FrameLayout, TableLayout, FlowLayout, FloatLayout, Path Layout, LayoutSizeClass to build your app. This exclusive framework is created by youngsoft.


More Info & Download

Semantic UI

Semantic is known as a powerful development framework that helps you to create beautiful and responsive layouts using HTML. It has 3000+ Theming Variables, 50+ UI Components and 5000+ Commits. By using this framework, you can easily create awesome and responsive layouts based designs in moments.


More Info & Download

Milligram

This is an ultra light weight CSS framework. Specially designed for better performance and higher productivity with fewer properties to reset resulting in cleaner code. The package size is only 2kb gzipped. This minimal framework is created by CJ Patoilo.


More Info & Download

Basis

By using the framework, you can easily build responsive design faster. This is also a lightweight framework and the grid system is flexbox based. It has incorporated the concept of vertical rhythm. So you can be a good-balanced design. This framework is developed and released by Monkey Wrench.


More Info & Download

Grd

This is another exclusive CSS grid framework using Flexbox. This is a lightweight framework and very flexible to use. The guard is available on modern browsers such as Chrome, Firefox, Safari, Opera, Edge and IE11. This framework is created by 1000ch.


More Info & Download

Tent CSS

If you are looking for a framework that helps you to create responsive layouts for a website then check out this framework. The framework is designed to be used as a foundation for building websites. Tent CSS uses autoprefixer to make most modern features compatible with many older and modern browsers.


More Info & Download

Wire

Wire is a simple and responsive flexbox based Sass framework. This framework is very simple and light weight. Wire is written by a powerful CSS processor named Sass. It is fully customizable and very flexible to use. This awesome framework is created by Pedro García.


More Info & Download

Structure

Structure is another flexbox based grid framework. You can easily create a grid based responsive layout by using this framework. It defines layout using non-standard attributes on elements. This framework is created by Kenwheeler.


More Info & Download

Juiced

Juiced is another powerful CSS flexbox framework. It has some awesome features such as better mobile targeting, custom column ordering, better alignment options, understandable HTML, and less boilerplate styles. This framework is created by Ovdojoey.


More Info & Download

1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...

Join the discussion

  1. Deepak

    Hello, Thanks for this collection of flexbox resources, bookmarked!

Leave a Reply

Your email address will not be published. Required fields are marked *