All Projects → vladocar → Flexy

vladocar / Flexy

Licence: mit
Flexy is minimal CSS framework made with Flex

Projects that are alternatives of or similar to Flexy

Katana
Katana is CSS Layout System made with Flexbox
Stars: ✭ 57 (-50%)
Mutual labels:  flex, css3, flexbox, html-css, flexbox-grid
Lazy
Kule Lazy4 / CSS Framework
Stars: ✭ 147 (+28.95%)
Mutual labels:  framework, html5, css3
Flexible Grid
Flexible grid layouts to get you familiar with building within the flexible grid system.(HTML, CSS, SASS, SCSS)
Stars: ✭ 154 (+35.09%)
Mutual labels:  flex, flexbox-grid, flexbox
Vue Shiyanlou
😘基于vue2和vuex的复杂单页面应用,20+页面53个API(仿实验楼)✨✨
Stars: ✭ 342 (+200%)
Mutual labels:  flex, html5, css3
Construcao De Paginas Web
Desenvolvimento de páginas semânticas, acessíveis e responsivas. 🚀
Stars: ✭ 113 (-0.88%)
Mutual labels:  html5, css3, flexbox
Livecoding.tw
官網
Stars: ✭ 42 (-63.16%)
Mutual labels:  html5, css3, html-css
Infinity Css Grid
Fluid Flex Solution for making infinite grid columns.
Stars: ✭ 112 (-1.75%)
Mutual labels:  flex, flexbox-grid, flexbox
Responsive Grid Of Hexagons
CSS responsive grid of hexagons
Stars: ✭ 481 (+321.93%)
Mutual labels:  html5, css3, html-css
Gaintime
GainTime é um framework de HTML, CSS e JS para desenvolvimento de projetos responsivos, focado na simplicidade.
Stars: ✭ 19 (-83.33%)
Mutual labels:  framework, html5, css3
Waffle Grid
An easy to use flexbox grid system.
Stars: ✭ 602 (+428.07%)
Mutual labels:  flex, flexbox-grid, flexbox
Pure Css3 Animated Border
Pure CSS3 animated border for all html element.
Stars: ✭ 63 (-44.74%)
Mutual labels:  html5, css3, html-css
Awesome Flexbox
👓 A curated list of CSS Flexible Box Layout Module or only Flexbox.
Stars: ✭ 1,034 (+807.02%)
Mutual labels:  flexbox-grid, css3, flexbox
Neo
Create blazing fast multithreaded Web Apps
Stars: ✭ 1,219 (+969.3%)
Mutual labels:  framework, html5, css3
Mat Video
📺 mat-video is an Angular 8/9+ video player using Material!
Stars: ✭ 96 (-15.79%)
Mutual labels:  html5, css3
Varadbhogayata.github.io
My Portfolio - Personal Website
Stars: ✭ 95 (-16.67%)
Mutual labels:  html5, css3
Softuni
SoftUni Courses
Stars: ✭ 98 (-14.04%)
Mutual labels:  html5, css3
Gridlex
Just a CSS Flexbox Grid System
Stars: ✭ 1,328 (+1064.91%)
Mutual labels:  flexbox-grid, css3
Code Standards
Isobar Front-end development coding standards. Memorize them BY HEART.
Stars: ✭ 1,341 (+1076.32%)
Mutual labels:  html5, css3
Nukeviet
NukeViet CMS is multi Content Management System. NukeViet CMS is the 1st open source content management system in Vietnam. NukeViet was awarded the Vietnam Talent 2011, the Ministry of Education and Training Vietnam officially encouraged to use.
Stars: ✭ 113 (-0.88%)
Mutual labels:  html5, css3
Nodeppt
This is probably the best web presentation tool so far!
Stars: ✭ 9,589 (+8311.4%)
Mutual labels:  html5, css3

Flexy

Flexy is minimal CSS framework made with Flex

  • Minimal. It is only 0.33 KB minified + gzip.
  • Responsive.
  • No unnecessary nesting.
  • Fluid Column (even multiple times in one row)
  • Flexible the main width can be any number or uint ex: 960px, 90% or whatever you like.

https://vladocar.github.io/flexy/

Demo 1 - Katana

Demo 2 - Quotes

Code Demo

<div class="dp50">50%</div>
<div class="dp50">50%</div>

<div class="dp33">33,3%</div>
<div class="dp33">33,3%</div>
<div class="dp33">33,3%</div>

<div class="dp25">25%</div>
<div class="fluid">Fluid</div>
<div class="dp17">17%</div>
<div class="clear"></div> /* => Use clear when you have fluid column */

/* Multiple Fluid columns in one row */

<div class="fluid">Fluid</div>
<div class="dp25">25%</div>
<div class="dp25">25%</div>
<div class="fluid">Fluid</div>
<div class="clear"></div>

Install

You can simply download the library or:

$ npm i @vladocar/flexy

Browser Support

Use flexy-old.css for IE 10/11

License

This project is licensed under the MIT License

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