Flexbox

Top 23 Flexbox Open-Source Projects

  • Semantic UI

    Semantic is a UI component framework based around useful principles from natural language.

    Project mention: Should you split that file? | news.ycombinator.com | 2023-12-01

    1. The author links to this file as an example: https://github.com/Semantic-Org/Semantic-UI/blob/49b9cbf47c1... . How would you structure it better than it currently is without using sections?

    2. So you have a class that has a bunch of getters and setters. Let's just assume that "generate them automatically" is not an option. You want to make it really easy to see the part of the class which is getters, and the part of the class which is setters, and then skim past that. How do you do it?

    3. So you have a file that defines 3 data structures. Each data structure has a definition, a bunch of functions for parsing it, and a bunch of functions for serializing it. The author suggests that you split the file into 3 sections for the types, with subsections each for the definition, parsing, and serializing. How would you do it? Let's say the language is Rust or Typescript.

  • Bulma

    Modern CSS framework based on Flexbox

    Project mention: Bulma CSS is now 1.0.0 | news.ycombinator.com | 2024-03-23
  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  • Ink

    🌈 React for interactive command-line apps

    Project mention: I created a simple CLI tool that helps you code FAST! | dev.to | 2024-03-12

    I've always wanted to build a CLI tool, and when I realized that you can build one using React with Ink, I converted my Python script into a CLI tool.

  • flexbox-layout

    Flexbox for Android

  • react-pdf

    📄 Create PDF files using React

    Project mention: How we improved our client-side PDF generation by 5x | dev.to | 2024-03-17

    Using react-pdf, we crafted a solution that allowed users to manipulate their reports with an impressive degree of flexibility. But, as data grew (imagine trying to cram an entire financial year's worth of invoices, up to 22,000 rows, into one PDF), our solution began to falter, especially on older PCs with limited resources.

  • Spectre.css

    Spectre.css - A Lightweight, Responsive and Modern CSS Framework

  • Milligram

    A minimalist CSS framework.

    Project mention: Concrete.css | news.ycombinator.com | 2024-02-08

    I had been using similar projects such as skeleton[0] and milligram[1] for small experiments such as repfl[2], and wanted to create something similar that I would find aesthetically pleasing and that would fit in as little space as possible. The current version of concrete.css is less than 1kb minzipped!

    [0] http://getskeleton.com/

    [1] https://milligram.io/

    [2] https://repfl.ch/

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  • CSS Layout

    A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing!

  • flexboxfroggy

    A game for learning CSS flexbox 🐸

    Project mention: 100+ FREE Resources Every Web Developer Must Try | dev.to | 2024-02-26

    Flexbox Froggy: Learn CSS Flexbox by playing this game.

  • split

    Unopinionated utilities for resizeable split views

  • flex-layout

    Provides HTML UI layout for Angular applications; using Flexbox and a Responsive API

  • react-native-styling-cheat-sheet

    Most of the React Native styling material in one page

  • bulma-templates

    free flexbox templates built with the bulma css framework

    Project mention: Bulma : Free Templates | /r/bulmacss | 2023-07-04

    If you're a beginner who wants to give it a go with bulma, or just an enthusiast who wishes to slap some content into existing template and have a web page, or maybe build some theme upon existing layout, take a look at Bulma Templates repo.

  • stretch

    High performance flexbox implementation written in rust

  • FlexLayout

    FlexLayout adds a nice Swift interface to the highly optimized facebook/yoga flexbox implementation. Concise, intuitive & chainable syntax.

    Project mention: Building Reddit’s Design System on iOS | /r/RedditEng | 2023-09-27

    We still wanted to leverage a layout engine that could be performant and easy-to-use. After doing some performance testing with native UIKit, Autolayout, and a few other third-party options, we ended up bringing FlexLayout into the mix, which is a Swift implementation of Facebook’s Yoga layout engine. All RPL components utilize FlexLayout in order to lay out content fast and efficiently. While we’ve enjoyed using it, we’ve found a few touch points to be mindful of. There are some rough edges we’ve found, such as utilizing stack views with subviews that use FlexLayout, that often come at odds with both UIKit and FlexLayout’s layout engines.

  • taffy

    A high performance rust-powered UI layout library

    Project mention: Show HN: Dropflow, a CSS layout engine for node or <canvas> | news.ycombinator.com | 2024-03-21

    I maintain a standalone web layout engine[0] (currently implementing Flexbox and CSS Grid) which has no scripting support. WPT layout tests using is a major blocker to us running WPT tests against our library. Yoga (used by React Native) is in a similar position.<p>Do you think the WPT would accept pull requests replacing such tests with equivalent tests that don't use <script> (perhaps using a build script to generate multiple tests instead - or simply writing out the tests longhand)?<p>I could run against only the ref-tests, but if I can't get full coverage then the WPT seems to provide little value over our own test suite.<p>[0]: <a href="https://github.com/DioxusLabs/taffy">https://github.com/DioxusLabs/taffy</a>

  • react-three-flex

    💪📦 Flexbox for react-three-fiber

  • css-refresher-notes

    CSS Refresher!

  • flex.css

    flex.css is declarative layout which is compatible with wechat, UC, webview and other main-stream mobile browser and surpports react, vue, angular.

  • Cirrus

    :cloud: The SCSS framework for the modern web.

  • awesome-flexbox

    :eyeglasses: A curated list of CSS Flexible Box Layout Module or only Flexbox.

  • hedron

    A no-frills flexbox grid system for React, powered by styled-components.

  • waffle-grid

    An easy to use flexbox grid system.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020). The latest post mention was on 2024-03-23.

Flexbox related posts

Index

What are some of the best open-source Flexbox projects? This list will help you:

Project Stars
1 Semantic UI 50,969
2 Bulma 48,421
3 Ink 25,663
4 flexbox-layout 18,154
5 react-pdf 13,997
6 Spectre.css 11,265
7 Milligram 10,146
8 CSS Layout 7,988
9 flexboxfroggy 6,690
10 split 5,977
11 flex-layout 5,912
12 react-native-styling-cheat-sheet 4,851
13 bulma-templates 3,224
14 stretch 1,954
15 FlexLayout 1,899
16 taffy 1,723
17 react-three-flex 1,602
18 css-refresher-notes 1,547
19 flex.css 1,547
20 Cirrus 1,318
21 awesome-flexbox 1,215
22 hedron 865
23 waffle-grid 607
The modern identity platform for B2B SaaS
The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
workos.com