geoffreycrofte / Flexbox.ninja
Demonstration content of Flexbox.ninja website. See https://flexbox.ninja/
Projects that are alternatives of or similar to Flexbox.ninja
LayoutSingle-file library for calculating 2D UI layouts using stacking boxes. Compiles as C99 or C++.
Stars: ✭ 551 (+1389.19%)
Mutual labels: flexbox
FormstoneLibrary of modular front end components.
Stars: ✭ 823 (+2124.32%)
Mutual labels: flexbox
Flex Cheatsheet📖 Flexbox cheatsheet
Stars: ✭ 850 (+2197.3%)
Mutual labels: flexbox
Waffle GridAn easy to use flexbox grid system.
Stars: ✭ 602 (+1527.03%)
Mutual labels: flexbox
ParalayoutParalayout is a set of simple, useful, and straightforward utilities that enable pixel-perfect layout in iOS. Your designers will love you.
Stars: ✭ 742 (+1905.41%)
Mutual labels: flexbox
FlexboxCSS library for easier work with flex boxes
Stars: ✭ 17 (-54.05%)
Mutual labels: flexbox
SplitUnopinionated utilities for resizeable split views
Stars: ✭ 5,176 (+13889.19%)
Mutual labels: flexbox
Sprite Flex Layoutgrid-layout is a layout engine which implements flex, can use in canvas/node-canvas
Stars: ✭ 15 (-59.46%)
Mutual labels: flexbox
React Three Flex💪📦 Flexbox for react-three-fiber
Stars: ✭ 764 (+1964.86%)
Mutual labels: flexbox
HedronA no-frills flexbox grid system for React, powered by styled-components.
Stars: ✭ 847 (+2189.19%)
Mutual labels: flexbox
Flex LayoutProvides HTML UI layout for Angular applications; using Flexbox and a Responsive API
Stars: ✭ 5,705 (+15318.92%)
Mutual labels: flexbox
Cirrus☁️ The CSS framework for the modern web.
Stars: ✭ 716 (+1835.14%)
Mutual labels: flexbox
React Flex ReadyA Flexbox grid ready, easy to implement and customize
Stars: ✭ 23 (-37.84%)
Mutual labels: flexbox
Angular Split🍌 Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
Stars: ✭ 582 (+1472.97%)
Mutual labels: flexbox
Feather FlexUltralight flexbox based grid system.
Stars: ✭ 11 (-70.27%)
Mutual labels: flexbox
FlexboxfroggyA game for learning CSS flexbox 🐸
Stars: ✭ 5,334 (+14316.22%)
Mutual labels: flexbox
FlexboxI ♥ Flexbox. Forever.
Stars: ✭ 6 (-83.78%)
Mutual labels: flexbox
Fe前端 100 天，帮助 10W 人入门并进阶前端。
Stars: ✭ 907 (+2351.35%)
Mutual labels: flexbox
AscollectionflexlayoutA custom collection layout that allows to use Texture layout specs in ASCollectionNode.
Stars: ✭ 24 (-35.14%)
Mutual labels: flexbox
Flexbox.ninja
Flexbox.ninja is a website made and hosted by Geoffrey Crofte to help you better understand CSS Flexbox Layout Module.
How to contribute
The fact that those demonstration folders are available on Github is because you are very welcome to contribute to show how you use Flexbox to solve CSS issue, advanced layout or even little CSS tricks.
Pick one of the folder as example. All I need to run your demo is:
- 1
index.html file containing the explanation of your code.
- 1
demo.html file containing the entire independant demonstration of your code. Feel free to do whatever you want in that file.
- 3 images named
[nice-name]-big.png (1086×648), [nice-name].png (362×226) and [nice-name].svg (362×226). If you don't know how to “iconified” your demo, leave those empty, I'll work on it for you.
Drop your name and your URL on your demo, I'll arrange the footer for you, because mentions are due.
Roadmap
Some ideas are already on my to-do list. Among those:
- Vertical-Align Content
- Flexible Sidebar
- Stepper Input
- Card Group
- Flexible Gallery (Masonry)
- Grid Gallery
- Pricing Table
If you've got any idea or need, contact me on Twitter.
Website Next Steps
The Website is a PWA. This step is finally done.
The next step will be better handling the cache for offline usage. You can already visit the demos when you ar offline, if you visited those been online.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at
[email protected].
