flexy - Flexy is minimal CSS framework made with Flex

  •        12

Flexy is minimal CSS framework made with Flex




Related Projects

grd - A CSS grid framework using Flexbox. Only 321 bytes (Gzipped).

  •    HTML

A CSS grid framework using Flexbox. Flexible Box Layout Module and calc() as CSS unit value used in Grd are available on modern browsers (Chrome, Firefox, Safari, Opera, Edge and IE11).

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.


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

driveway - pure CSS masonry layouts

  •    HTML

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.

flexboxgrid - Grid based on CSS3 flexbox

  •    HTML

Grid based on the flex display property. Add the flexboxgrid.css development or flexboxgrid.min.css production to your html page.

bulma-templates - free flexbox templates built with the bulma css framework

  •    HTML

The original bulma templates were made with version 0.1.1 and can be found in the 0.1.1 branch. The newest templates are made with version 0.6.0 and can be found in the master branch until they are finished and will be tagged in a 0.6.x branch once complete. The templates on dansup.github.io are based on the master branch. Code released under the MIT license.

react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules

  •    Javascript

react-flexbox-grid is a set of React components that implement flexboxgrid.css. It even has an optional support for CSS Modules with some extra configuration.react-flexbox-grid imports the styles from flexboxgrid, that's why we're configuring the loader for it.

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.

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.

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.

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.

Singularity - Grids without limits

  •    CSS

Singularity is a next generation grid framework built from the ground up to be responsive. What makes Singularity different? Well, a lot of things. Singularity is based on internal ratios instead of context based which allows for better gutter consistency across breakpoints. Ratio based math also allows for non-uniform grids in any unit you want to use. Layout on the web has changed significantly since Scott's first push back on March 7, 2012. First came Flexbox, then CSS Grid. CSS Grid provides layout functionality that covers all of Singularity's usecases and then quite a few more that we were never really able to support.

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.

reflexbox - React flexbox layout and grid system

  •    Javascript

Primitive for controlling width, margin, padding and more. Both <Flex /> and <Box /> share the same props.

spaceBase - A Sass-based responsive CSS framework.

  •    CSS

Many CSS frameworks are meant to be included and left alone. But spaceBase is a boilerplate layer that can be built upon and tailored for your needs. It combines best practices for today’s responsive web with the core components we use on every project. Consider it the launch pad for your adventures into cyberspace. spaceBase is the front-end starter files for any new web project. It sets up your Sass architecture and normalizes your CSS and native HTML elements. It provides the structural groundwork for your application.