207 CSS Flexbox-grid Libraries

This personal portfolio website is developed using HTML5, CSS3 and JavaScript DOM. The website has contents which are past completed projects in a grid layout on the home page. And have link for the live demo and the source code.

Personal-Portfolio This project is mainly about creating personal portfolio by HTML5 and CSS3. Built With Major languages: HTML5,CSS3 Technologies use

01

This Portfolio was built entirely in HTML/CSS and JavaScript for DOM Manipulation, using technologies such as Flexbox and Grid, and applying Responsive design. It is based on a FIGMA design

Portfolio: Mobile and Desktop version This is a last milestone in the process of creating a portfolio website. Now, I'm adding the preservation of the

03

Pure CSS grid system

Pure CSS grid system Weekend project. Columns Screen Class Prefix Screen Size Mobile .m 768px Tablet .t 768px to 991px Browser .b 992px to 1199px Lar

04

mygGrid.css Framework is a simple CSS grid system for designing adaptive web sites.

mygGrid.css Framework is a simple CSS grid system for designing adaptive web sites.

05

A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock.

A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock.

Grid Layout Animation A simple layout transition where a small grid animates to a larger view, using the Flip plugin from GreenSock. Article on Codrop

06

The CSS-inspired styling and layout framework for iOS

The CSS-inspired styling and layout framework for iOS

Update: The work with a new and improved version of InterfaCSS is underway in the develop branch... 😁 The latest version (Beta2) adds support for XML

07

Free Responsive Web UI Kit & Dashboard Template bootstrap

Free Responsive Web UI Kit & Dashboard Template bootstrap

Free Responsive Web UI Kit & Dashboard Template bootstrap Theme1 Demo Theme2 Demo Theme3 Demo Theme4 Demo Theme5 Demo This repository consist of fully

08

Material Design Components, Responsive and Modern CSS Framework Built with Flexbox 🍰

Material Design Components, Responsive and Modern CSS Framework Built with Flexbox 🍰

Butter Cake v4.0.0 A Modern Lightweight Front End CSS framework for faster and easier web development. Explore Butter Cake docs » Report bug . Request

09

Alternative CSS only framework based on Flexbox

Coraline An alternative CSS only framework. Coraline comes with multiple components and class helpers. ⭐ Give me a star if you like this project :D Qu

10

Responsive and pure CSS framework built on Flexbox. 🍍

Responsive and pure CSS framework built on Flexbox. 🍍

Nanasi.CSS Nanasi.CSS is a responsive and pure CSS framework you can use as a basis for creating websites or web applications. Made with ❤️ in Tanzani

11

A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites

Responsive Boilerplate A powerful, accessible, developer friendly, framework for building responsive websites Responsive Boilerplate is the developers

12

Fluid grid for mobile, tablet, and desktop.

Unsemantic CSS Framework This is a fluid grid system for mobile, tablet, and desktop. Read more here... http://unsemantic.com This is dual-licensed th

13

Advanced CSS layout utility library

Advanced CSS layout utility library

No more unnecessary container, negative margin-padding and extra divs to make gap between rows and columns. Advanced CSS layout utility library AyoFle

14

A modern room decor with wonderful & rewarding design ideas

A modern room decor with wonderful & rewarding design ideas

Room homepage Table of contents Overview End term goal Design Links Process Built with Useful resources Contribution Issue Contributing Guidelines Con

15

CSS | Slack clone with Flexbox

 CSS | Slack clone with Flexbox

CSS | Slack clone with Flexbox Introduction You should be reaaaaally familiar with Slack at this point, but just to make it more clear, Slack is a clo

16

Starter Files + Solutions to my CSSGrid.io Course

Starter Files + Solutions to my CSSGrid.io Course

CSS Grid Video Course Hey! These are the starter files and finished solutions. Grab the full course over at CSSGrid.io. Course FAQ Q: I'm getting "Thi

17

A simple, lightweight CSS grid

Simple Grid A lightweight, responsive CSS grid Developed by Zach Cole Simple Grid and Simple Code Simple Grid is a mobile-first 12-column CSS grid sys

18

An adaptive CSS grid system.

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 gr

19

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self

Layout helper based on CSS flexbox specification designed to serve you as quick flexbox shorthand by using two custom html attributes — layout and self

20

A simple responsive CSS grid.

🚨 ⚠️ Attention ⚠️ 🚨 2017 Update: This grid system was created almost 5 years ago now, and should be considered deprecated as these days browsers let

21

Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

📣 Avalanche 2 coming soon with Custom Properties. Avalanche CSS grid system Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

22

An easy to use flexbox grid system.

Waffle grid An easy to use flexbox grid system. Getting Started To get the waffle grid system in your web page, simply paste this code into the head o

23

Simple CSS grid system using `display: table;`.

Table Grid Every grid to date uses floats or some inline-block hackery. That's so 2013 though, and seeing that it's now 2014, we need something newer,

24

A CSS survival kit. Includes only the essentials to make camp.

A CSS survival kit. Includes only the essentials to make camp.

Tent CSS TentCSS 1.x.x is not currently receiving updates. A CSS survival kit. Includes only the essentials to make camp. Website - http://css.siteten

25

A CSS grid constructor

Griddle Griddle is a CSS grid system for modern browsers. It is generated from a set of Sass functions and mixins. The grid uses inline-block and box-

26

WordPress theme featuring CSS Grid layouts via aggressive progressive enhancement

WordPress theme featuring CSS Grid layouts via aggressive progressive enhancement. Proof of concept to get the conversation about what CSS Grid means for WordPress themes started.

27

Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.

Build layout through ASCII art in Sass (and more). No pre-built CSS. No additional markup.

Grassy | Docs | Playground What you ASCII is what you get. Build layout through ASCII art in Sass (and more). Installation and Usage yarn add grassy -

28

Customisable 💪 Flexbox grid system

Pintsize A simple and modern flexible grid system Get started It's easy to get started. Just follow the steps below. 1.Download Download Pintsize. 2.

29

PocketGrid is a lightweight pure CSS grid system for Responsive Web Design

PocketGrid is a lightweight pure CSS grid system for Responsive Web Design

PocketGrid is a lightweight pure CSS grid system for Responsive Web Design. Moreover, it is semantic, mobile-first, and allows to have an unlimited number of columns and breakpoints.

30

A lightweight (3kb) micro-library, elegant and minimalistic CSS3 grid system,

A lightweight (3kb) micro-library, elegant and minimalistic CSS3 grid system, made with only one container and 12 columns. It`s very easy to use and understand, pre-packed with some extra css helpers for mobile devices.

31

Blueprint CSS is a modern responsive CSS layout library & grid built on top of CSS Grid and Flexbox.

Blueprint CSS is a modern responsive CSS layout library & grid built on top of CSS Grid and Flexbox.

A lightweight layout library for building great responsive mobile first UIs that work everywhere. Open Source, built with CSS Grid and Flexbox.

32

A CSS Grid Framework

A CSS Grid Framework

Griddle is a CSS framework created with CSS Grid and Flexbox. It's easy to get started with Griddle, especially if you are familiar with how other CSS

33

A Flexbox CSS Framework

Juiced Juiced is flexible CSS front-end framework that has many improvments over existing Grid-based CSS frameworks. It is built on the Flexible Boxes

34

Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.

Lightweight and simple to use UI Kit. Fully responsive, just 3KB gzipped.

CSS-Mint Add some "Mint" to your web pages CSS Mint is a lightweight and fully-responsive open source UI kit built to ease up layout and structuring o

35

A no-frills responsive grid layout to help you get started on your next project.

A basic, responsive grid layout to help you get started on your next project (in about 1kb 🔥 ). Setup your project Download either the spacegrid.min.

36

A bare minimum responsive framework

BareKit Visit website for full usage docs BareKit is a front-end project starter meant to be a starting point and structural guide rather than a full

37

Password Keyword Generator with Animated BackGround

 Password Keyword Generator with Animated BackGround

In this project we made a password generator using html,css,js with a animated background.

38

FlexBlog - aprimorando o Flexbox no CSS.

FlexBlog - aprimorando o Flexbox no CSS.

FlexBlog - aprimorando o Flexbox no CSS. 🎇 Tecnologias Esse projeto foi desenvolvido com as seguintes tecnologias: HTML 5 CSS 3 (Utilizando o Flexbox

39

A responsive micro-framework for the grid spec powered by CSS custom properties.

A responsive micro-framework for the grid spec powered by CSS custom properties.

Iota A responsive micro-framework for the grid spec powered by CSS custom properties. Overview 1 class – That's right, one little class is all you nee

40

An SCSS partial that builds flexible, modular hex grids using CSS Grid

Hexi-Flexi Grid Github Page Hexi-Flexi Grid is an SCSS component, built on the CSS Grid layout, that creates a hexagonal lattice. The mixin includes a

41

A CSS Grid ideal for card listing design like tiles, videos or articles listing

chewing-grid.css A CSS Grid ideal for card listing design like tiles, videos or articles listing. No media queries, yet chewing-grid will adjust the n

42

Material Design Components, Responsive and Modern CSS Framework Built with Flexbox 🍰

Material Design Components, Responsive and Modern CSS Framework Built with Flexbox 🍰

Butter Cake v4.0.0 A Modern Lightweight Front End CSS framework for faster and easier web development. Explore Butter Cake docs » Report bug . Request

43

Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)

For users who can embrace the newest of technology, Flexiblegrid comes with an flex based grid. It’s the same grid you know and love, but with even be

44

Next-generation CSS grid framework based on flexbox. Provides the same responsive 12 column fluid layout as Bootstrap 3 to most browsers. Even supports IE 6! Simple, fast, and easy.

ptb/flexgrid is a next-generation web page layout framework based on flexbox: the CSS Flexible Box Layout Module. It uses the same responsive 12 colum

45

Msdotcom/WinJS Grid Framework

A CSS grid framework built on SASS to provide an automatic responsive grid for web developers with flexibility for manual control when needed.

46

The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS

The grid and responsive utilities classes extracted from the Bootstrap 4 framework, compiled into CSS

47

Grid system built on top of flex. Heavily influenced by Bootstrap.

Flexbox Grid Grid system built on top of flex. Heavily influenced by Bootstrap. Perfect partner for Topcoat but it can be used with or without any fra

48

A simple framework for faster and beautiful responsive sites

Beauter provides a minimal range of beautiful elements and styles in pure vanilla CSS which makes it easier to start with a cleaner and faster development.

49

A Sass based CSS Grid Framework Generator

Grid Coordinates This project is unmaintained, but has some good ideas that could be tranistioned to suit RWD and new Sass features. A Sass based CSS

50

Framy - Very simple CSS Framework

Framy is a collection of basic components, you will need in every web project to develop responsive & modern interfaces and websites.

51

An Utility CSS only library. It supports css grid and many more useful css properties.

RaisinCSS An Utility CSS only library. Supports CSS Grid (Check grid section) Supports Flexbox Totally open to customization Skeleton and utility base

52

A very lightwieght XHTML/CSS framework that follows both the typographic grid, and also baseline grid

A web grid system designed by Joseph Silvashy and New Gold Leaf that allows designers to use the screen real estate on large monitors and retain great design on smaller ones. The Fluid Grid System combines the principals of the typographic grid and a baseline grid into one resolution-independent framework.

53

Pure CSS, flexible and gapless image gallery layout like Google Images and 500px.com

Pure CSS, flexible and gapless image gallery layout like Google Images and 500px.com

Flexbin Flexible and gapless image gallery layout like Google Images and 500px.com. Based on article of xieranmaya Pure CSS, no need for JavaScript or

54

🏢 CSS (SCSS) Grid based on CSS grid layout with @supports fallback to flexbox

🏢 CSS (SCSS) Grid based on CSS grid layout with @supports fallback to flexbox

Atomic Bulldog Grid 💥 🐶 CSS (SCSS) grid, based on CSS grid layout with @supports fallback to flexbox (partial support). Grid Demo Atomic Bulldog gri

55

Flurid – The Fluid CSS Grid Framework

Flurid is a cross-browser fluid width grid system optimized for flexibility (fluidity) and one of the only fluid width grid systems to work in Internet Explorer versions 5.0 and newer1 without hiding pixels in margins

56

A lightweight 12-column CSS grid system built with CSS Grid and LESS

A lightweight 12-column CSS grid system built with CSS Grid and LESS

Less Grid Boilerplate A lightweight 12-column CSS grid system built with CSS Grid and LESS. Installation Simply just clone this repo to get started! V

57

Proffy is an online study platform that helps people find professors online.

Proffy is an online study platform that helps people find professors online.

Next Level Week 2 - Proffy This is a web application developed at NLW 2. NLW is an online event with lots of code, challenges, networking, and a singl

58

A atom-style library of CSS atomic elements. To build app faster and more flexible

A atom-style library of CSS atomic elements. To build app faster and more flexible

atom.css A atom-style library of CSS atomic elements. To build app faster and more flexible! Installation Install via npm: $ npm i @matrixage/atom.css

59

A responsive CSS grid system. Part of the Formstone Library

Development of this plugin has ended. Please upgrade to the new Formstone. Gridlock A responsive CSS grid system. Part of the Formstone Library. Demo

60

eFrolicss - CSS framework which without using JavaScript is interactive and animated

eFrolicss - CSS framework which without using JavaScript is interactive and animated

🔔 eFrolicss | CSS framework which without using JavaScript is interactive and animated. This framework is based on being simple and modern to develop

61

Solutions to CSS Grid Garden

Solutions to CSS Grid Garden

Grid Garden Exercise 1 Exercise 2 Exercise 3 Exercise 4 Exercise 5 Exercise 6 Exercise 7 Exercise 8 Exercise 9 Exercise 10 Exercise 11 Exercise 12 Exe

62

sGrid - Flexbox Grid System for Stylus

sGrid is a Flexbox grid system built with Stylus CSS preprocessor. It is prepared to use with helper classes, like Bootstrap or Foundation does it, but also in a more semantic way by using special Stylus functions.

63

Marock Music Festival

Marock Music Festival

Marock Music Festival This project was built with a Mobile-first design perspective and it's mobile responsive. for the design, the main technologies

64

A project on CSS grid to showcase responsiveness on all devices and display pop-up modal on click of each image

grid-image-gallery This is a project on CSS grid to showcase responsiveness on all devices and display pop-up modal on click of each image. Project li

65

Profile Card Component Built with HTML5 CSS3 Flexbox

Profile Card Component Built with HTML5 CSS3 Flexbox

Profile Card Component Built with HTML5 CSS3 Flexbox

66

Making a Best Social Proof Webpage & Best Responsive Webpage Using Intermediate 😎👍✌️Level CSS & HTML

Making a Best Social Proof Webpage & Best Responsive Webpage Using Intermediate 😎👍✌️Level CSS & HTML

Frontend Mentor - Social proof section Welcome! 👋 Thanks for checking out this front-end coding challenge. Frontend Mentor challenges help you improv

67

"Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: - Make simple calculations. - Read a random math-related quote. Built with React and pure CSS

Math magicians "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: Make simple calculations

68

💫 ITCSS and BEM based Sass/CSS toolkit; extensible & scalable to any project size

Nebula CSS 6kb (gzip) with default settings. View the demo yarn add nebula-css / Get started Check out Nebula-CSS React Starter to see how this can be

69

Css framework with grid based on flexboxes

Css framework with grid based on flexboxes

EqualizeCSS EqualizeCss - is light-weighted css-grid built on the properties of flexboxes and written on the sass. Using it you can easily build adapt

70

Easily create Flexbox fallback for your CSS Grid!

Easily create Flexbox fallback for your CSS Grid!

Grid to flex CSS Grid minmax function is used to dynamically make a responsive layout with a specificed item width. On the left side, you can control

71

The Quickest & Easiest Way To Build Complex CSS Grid Layouts

CSS Grid Layout Generator The Quickest & Easiest Way To Build Complex CSS Grid Layouts https://css-grid-layout-generator.pw/ Roadmap Soon Auto-generat

72

Parasail is a minimalistic CSS framework from Parasail Health using SASS and Flexbox.

Parasail is a minimalistic CSS framework from Parasail Health using SASS and Flexbox.

Parasail is a minimalistic CSS framework from Parasail Health using SASS and Flexbox. It's main feature is a Flexbox based grid system which lets you create responsive layouts easily.

73

Lightweight, feature-rich, accessible front-end library

niui: mostly native front-end library A lightweight framework leveraging browsers' built-in capabilities, with subtle and powerful customisation. To u

74

Frow is an open source HTML and CSS framework for creating quick & responsive projects on the web, powered by Flexbox

Flexbox Toolkit & Grid Frow CSS Frow is an open source HTML and CSS framework for creating quick & responsive projects on the web, powered by Flexbox.

75

atom.css: A atom-style library of CSS atomic elements. To build app faster and more flexible

atom.css: A atom-style library of CSS atomic elements. To build app faster and more flexible

atom.css A atom-style library of CSS atomic elements. To build app faster and more flexible! Installation Install via npm: $ npm i @matrixage/atom.css

76

Flexgrid.css is a responsive, declarative grid system powered by flexbox.

Flexgrid.css is a responsive, declarative grid system powered by flexbox.

flexgrid.css A responsive, declarative grid system powered by flexbox. Demo at flexgrid.axiomzen.co Flexgrid.css is a responsive, declarative grid sys

77

Uimini - Lightweight, css only, responsive and powerful css framework for easier web development

Uimini - Lightweight, css only, responsive and powerful css framework for easier web development

Uimini Lightweight, css only, responsive and powerful css framework for easier web development. Explore Uimini docs » Report bug · Request feature · F

78

This repo contain Front-end chalenges, build with HTML and CSS

This repo contain Front-end chalenges, build with HTML and CSS

Front-End DevChalenges This repo contain front-end projects in HTML/CSS with responsive design Screenshot Live Demo 404 Not Found Built With HTML CSS

79

A practice for me to enhance my CSS knowledge, especially in Flexbox

A practice for me to enhance my CSS knowledge, especially in Flexbox

Learn Flexbox 💪 📦 This website was created as a practice for me to enhance my CSS knowledge, especially in Flexbox. Thanks to the Brad Traversy to g

80

Site feito com Flexbox, usado para prática e aprendizado

Site feito com Flexbox, usado para prática e aprendizado

Site Flexbox - Gabriel Nunca desista dos seus sonhos! 💪 🚨 Sobre O projeto "Site Flexbox - Gabriel" foi feito para aplicar os meus estudos em um site

81

Formulário de Login criado com o intuito de praticar conhecimentos em Flexbox CSS

 Formulário de Login criado com o intuito de praticar conhecimentos em Flexbox CSS

Formulário de Login Formulário de Login criado com o intuito de praticar conhecimentos em Flexbox CSS. Clique para visitar o projeto 💼 Tecnologias ut

82

Centurion is a web-based framework for rapid prototyping and building larger web projects.

Centurion Framework Centurion is a responsive framework built for speed, simplicity, and flexibility. Originally based loosely on the 960 grid built b

83

A bare bones responsive SCSS boilerplate for web designers

Motherplate: A Responsive SCSS Boilerplate for Web Designers Preview: https://leemunroe.github.io/motherplate/example.html What is this? This is a bar

84

Brings grid support to Tailwind CSS

CSS Grid Tailwind Plugin Configuration options grids for specifying all of the grid sizes you'd like to generate gaps for specifying the gap sizes you

85

This is a quick refresher of CSS concepts compiled from various articles online.

CSS Refresher Notes This is a quick refresher of CSS concepts compiled from various articles online. Contributions are always welcome :) I have linked

86

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

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. Table of Contents W3C Specificati

87

React primitive UI components built with Styled System

Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo

88

Solution to a Frontend Mentor challenge: creating a similar webpage as the design preview provided

Solution to a Frontend Mentor challenge: creating a similar webpage as the design preview provided

Frontend Mentor - Testimonials grid section solution This is a solution to the Testimonials grid section challenge on Frontend Mentor. Table of conten

89

Add more meaning and visual interest to your markdown documents by grouping sets of images, videos, or even audio tracks into grid layouts in Obsidian.

Add more meaning and visual interest to your markdown documents by grouping sets of images, videos, or even audio tracks into grid layouts in Obsidian.

Media Grid An Obsidian snippet Skip to installation instructions ↓ Note This is a generic snippet that I intended for use with any Obsidian theme. The

90

This project is related to the Frontend Mentor's challenge "NFT Preview Card Component". I used this challenge to practice CSS Flexbox concepts I just learned. Any contributions are very welcome!

This project is related to the Frontend Mentor's challenge

Frontend Mentor - NFT preview card component solution This is a solution to the NFT preview card component challenge on Frontend Mentor. Frontend Ment

91

🤓Aprendendo (ou tentando) responsividade🤓

🤓Aprendendo (ou tentando) responsividade🤓

Application: Este projeto faz parte da série de vídeos da Origamid Aqui Objetivo • Features • Tecnologia • Licença • Autor Objetivo Nesse repositório

92

Box - CSS Framework

Box - CSS Framework This solution is based on box-sizing: border-box and display:inline-block building principles. Box - CSS Framework: All CSS is abo

93

A useful list of must-watch talks about CSS

Must-Watch CSS This is a collection of well-received talks about CSS, covering topics such as CSS Grid, flexbox, frameworks, variables, Sass, SVG, per

94

A collection of best front-end frameworks for faster and easier web development.

Front-end Frameworks v2.6 A collection of best front-end frameworks for faster and easier web development. You can Compare all front-end frameworks he

95

One Line CSS Framework

1-line-CSS-Framework One Line CSS Framework Only CSS you need is this: .dp50 {width:50%; float:left;} Every column can be divided by two, becoming hal

96

The easiest Vanilla CSS Gallery in the world..

The easiest Vanilla CSS Gallery in the world..

Vanilla Gallery The simplest images gallery created with CSS Grid for those who want their website images gallery to be fast and simple because it's b

97

tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.

tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.

tb-grid Lightweight (1kb gzipped) 12 column grid system, built with css grid. 👉 Demos & Playground Have a look at those examples: Main Demo: https:/

98

Skelet.css a contemporary CSS framework. The basics to get started.

Skelet.3 Skelet. is a contemporary CSS framework which gives you the foundations to start building your next project right away. Skelet. provides a si

99

CSS layout components that (basically) horizontally and vertically stack anything.

🗄 HStack and VStack in CSS CSS layout components that (basically) horizontally and vertically stack anything. Usage ✌️ Check out the code here. Horiz

100
1 2 3