kristoferjoseph/flexboxgrid

Grid based on CSS3 flexbox

Flexbox Grid

flexboxgrid.com

Grid based on the flex display property.

Install

npm

npm i flexboxgrid --save

bower

bower install flexboxgrid

cdn

CDNJS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css" >

css

• Development
• Production

Add the flexboxgrid.css development or flexboxgrid.min.css production to your html page.

<link rel="stylesheet" href="css/flexboxgrid.min.css" type="text/css">

Inspiration

• topcoat-grid
• flexbox-grid by @zeMicro
• ptb2.me/flexgrid
• codepen.io/marcolago/pen/lqGFb
• philipwalton.github.io/solved-by-flexbox/demos/grids
• davidwalsh.name/stylus-grid

flexboxgrid's Issues

cdnjs.com

Can you add Flexbox Grid to http://cdnjs.com/ ?

index.css vs index.min.css

Can you commit an unminimized version of index.css?

Firefox 34+ Breaks without min-width/height=0

https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

The initial value of min-width/height on flex items has been reverted to auto

Bug 984711 – Add back "min-width:auto" / "min-height:auto" for flex items
Bug 1015474 – Update min-width:auto/min-height:auto support to match updated flexbox spec language
Bug 1057683 – http://i100.independent.co.uk/ is broken in Nightly, due to the new "min-height:auto" flex item behavior (from flexbox spec change)

.row triggers scrollbars on body element

http://codepen.io/personable/pen/zxNqzQ

Absolutely love this grid -- great work @kristoferjoseph ! I'm just wondering if there's a workaround to this issue I keep bumping up against: If the .row element (or its parent[s]) is flush with the body element, the negative margins cause the body element to throw scrollbars.

Beyond setting overflow-x: hidden on the body or the .row's container, can this be avoided?

Nested Grid Sizing

Great work on this! By far my favorite grid system ever.

When nesting grids like so:

<row>
    <col sm-6>
        <row>
            <col sm-6></col>
            <col sm-6></col>
        </row>
    </col>
    <col sm-6>
        <row>
            <col sm-4></col>
            <col sm-4></col>
            <col sm-4></col>
        </row>
    </col>
</row>

It would be so nice for the sizing classes (xs, sm, etc...) of the smaller rows to be based off of the parent column width. Have you ever wondered the same?

This way, you can nest grids as deep as you want, and if a parent column ends up being too small, the nested rows (and their columns) would respond appropriately (almost as if each column becomes its own viewport size for nested rows to base themselves off of)

That's hard to explain, :) but this is mostly just a thought, not an issue.

Create Stylus version

Because for some reason people love complicating their build script. ;)

Allow for platform/browser specific overrides

We need to allow a way for users to add their platform / browser specific styles in order to support bassakwards browsers like old stock Android and IE.

The proposal is to add overrides to a directory structure so that people can contribute the fixes as they come across them. Eventually I will add a build step to compile to the desired platforms.

To add an override for a specific platform add a folder structure and drop your override file in it like so:

/src
| android/
  | 4.2.1/
    | overrides.css

Make a PR and I'll accept it.

display: table fallback for IE <= 9

Any chance of adding a fallback for older browsers using display: table? A quick check in JavaScript could add a class to to activate the fallback.

If you are open to the idea, I may just implement this myself and send a pull request.

How to use with Bootstrap

Thank you for your work on this project. Your implementation of the Flexbox grid system is fantastic. I am running into minor issues attempting to use it alongside Bootstrap. Any tips? Specifically, I think it's the row class which is conflicting.

Support old flexbox syntax?

Android stock browser still uses old syntax, as well as a few other randoms out there. With just a few tweaks to your css, you could support them. Do you guys want/plan that for this tool, or is this new syntax support only?

I found that box-pack and box-orient just needed to be changed, and all else seemed to work. Thought I'd throw this on the radar.

Grid broken in IE 10+

Tested in IE11 - (VM available from modern.ie)

.

Removing the padding from the column/offset classes corrects the grid, but clearly the padding is required for the gutters.

Need to add IE compatible percents

Due to the way IE rounds percentages we either need to add calc() or leave the long decimals.

Drop in bootstrap classes

If we wanted to use this on a Bootstrap project, it would require rewriting a grip of our HTML - any interest in having an alternate build that swaps "hand", "lap", "desk", "wall" class suffixes for "xs", "sm", "md", and "lg"?

This way a project could move smoothly between Bootstrap and Flexbox grids as browser support improves.

Add ability to customize number of columns

Add variables to define a custom column count.

Some child elements choose to fill the parent column instead of wrapping the child content

For instance if i have a row with 3 columns and in the first i have an a tag with an img inside the a will fill the column instead of being the height/width of the element

http://codepen.io/matt3224/pen/vEVwYW

Why is this?

Compatible columns cause wrapping behavior

I have two columns of 8 and 4 units in width. When I use them together inside a row, I expect them to appear side by side, but instead I notice that the last item wraps to the next line. I managed to prevent this by setting max-width: 66.59%; from the original 66.666666667% on the larger column. Not sure why this might be happening. I don't have any padding or margin on the columns –– only the padding inherent in the grid system, and removing that does not solve the problem.

Broken grid in Safari?

http://dev.notime.io/login

It looks like safari isn't picking up the width of the page.

Add bower support

Equal height columns

Would love to see a feature to make all the columns in a row equal height.

Alias "grid" to "container-fluid"

Following up after #16, Bootstrap uses .container-fluid instead of .grid. Happy to PR--I'm not sure if your preference is to just rename .grid entirely (as with the other class names) or to just have .grid, .container-fluid everywhere.

col-sm in combination with col-sm-offset, isn't setting the column width properly

see repro here: http://codepen.io/argyleink/pen/gauxb

`display: flex` on flex-items causes unpredictable and undesirable behavior on child elements

Based on my understanding of how flexbox is intended to work, the display: flex|inline-flex assignment is intended for the flexbox container (not the items themselves.)

The presence of the display: flex property on the col-* elements results in undesired behavior of child elements. We first encountered issues when svg elements in col-*'s could NOT be displayed inline; we later concluded that all inline elements in col-*'s were displayed as blocks (again, b/c of the display: flex on the col-* elements.)

Create LESS version

Because for some reason people love complicating their build script. ;)

What is the selector .grid good for

The selector .grid is nowhere in use and not documented. What is it good for?
https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css#L11

Add a prefix to CSS classes

Hello there,

It would be nice to have all CSS classes be prefixed with something like fbg- or any other prefix. The "problem" is that classes like container and row are pretty common across other libraries and so it's difficult to use them together.

Thanks!

Wrong definition?

.col-sm-offset-1 {
margin-left: 8.333333333%;
max-width: 8.333333333%;
}

.col-sm-offset-2 {
margin-left: 16.666666667%;
max-width: 16.666666667%;
}

shoud be
.col-sm-offset-1 {
margin-left: 8.333333333%;
}

.col-sm-offset-2 {
margin-left: 16.666666667%;
}

New version breaks design

it seems that the variables are supposed to be set before compiling to css,
this statement: "var(--screen-* " doesn't work and its probably just a bug..

Add 'main' property in bower json

Should reference the correct dist file like:

main: [
    "./dist/flexboxgrid.css"
]

not use var with space

Bad:

var ( --variable );

Good:

var (--variable);

see docs: https://www.npmjs.com/package/postcss-vars

package.json main = dist/flexbox.css

The file is named index.css

This stops me from using Duo to include this

Vertical and horizontal centering of an element

What is the best way to center an element vertically and horizontally using flexboxgrid?

Thank you!

Create SASS version

Because for some reason people love complicating their build script. ;)

release new npm version

the latest npm version is 1.1.1

Only works for col-xs

Looks like you didn't test responsive for anything other than col-xs?

On mobile resolutions, the other column sizes don't have padding and are crushed to the width of their content.

Colums are not floating next to each other despite percentage width

The example below in my browser doesn't place the columns next to each other. when I decrease the max-width of the first to 24.9% or decrease the flex-basis of the second to 74.9%, it starts to wrap. Is this a bug? Is there something in my css reset that could be affecting the flexbox model?

<div class="row">
    <div class="col-sm-3">
        <div>Hello</div>
    </div>
    <div class="col-sm-9">
        <div>Hello</div>
    </div>
</div>

Column display flex bug

%column {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  padding-right: $half-gutter-width;
  padding-left: $half-gutter-width;
}

It's a mistake to set display: flex; here. It will stretch inline-block's. This is semantically and logically incorrect

Unneeded horizontal scroll on all sites

I'm having a consistent issue on all sites using flexboxgrid where the padding on each .row element is causing a horizontal scroll on the page element. Any idea how I could fix this? Thanks so much!

Example: http://www.goodcorps.com/people

Fixed width column

Does current version support fixed width columns?

Add legacy browser fallback

Add an example that uses modernizr to supply a float based fallback grid with the same api.
OR finish flexbox polyfill.

[SASS] Mark variables as defaults

I think it would be beneficial to add !default as a suffix to all variables so they can easily be overwritten by loading a file prior to the flexboxgrid.scss in which the variables to be overwritten are defined.

Example:

$column-count: 24;
@import 'node_modules/flexboxgrid/src/sass/flexboxgrid';

rowspan

hello
Is there a way to make column with height of two rows using flexboxgrid?

Text alignment

Would love the ability to align column contents with specific classes, such as:

.right {
    text-align: right;
}

Did it manually for now and it's fandamntastic.

<3 u.

Remove gh-page specific files from master

Currently we add all of the files needed to for the gh-page as well as the grid in the master branch. After seeing a few projects that accidentally include the flexboxgrid.com code I am thinking only having the grid code in master is a better idea.

Since I have been the only person updating the site it makes sense to just pull in PRs by hand.

Not sure if it's useful to you, but you can have the npm package name flexgrid

I see you already have flexboxgrid and that's probably better, but if you're interested, I have flexgrid and can give it to you.

Column behaviour at various breakpoints

Just started playing with flexbox grid, and would like to make one thing clearer. For example, if I want one column to stay the same size on all breakpoints, it needs to be prefixed with xs, am I right?

Guess this is the mobile first approach at work. Honestly, never tried designing that way, although I see that it is advocated all over the web. Might try it now with flexbox grid.

6.0.0 breaks all old designs based on 5.0.0

Using Bower now and when 6.0 was released, it broke everything. I have absolutely not idea what I'm doing wrong but none of the usual classes I've been using for the past 6 months are working.

Example:

http://s.codepen.io/jeremypbeasley/debug/ogzqwd

This just broke 4 websites so any help would be much appreciated. Thanks!

PS. I know I can set bower to only use 5.0 but I still would like to know what the issue is here.

add prefix to source from variable

example

.flex-container-fluid

and etc

for use with bootstrap

Add 4.0.0 and 5.0.0 to jsdelivr

Both are not available — The readme suggests to use 5.0.0… but it 404s

Nest grid inside a block for each node

Thank you so much for all your hard work!
I'm trying to understand why must I add a containing element for each additional level of the grid?
The markup this creates is really... unusable.

Add offsets for all sizes

Update: My assumption was false.

The offsets are added, but e.g. with .off-8-sm instead of .off-sm-8

Same for md & lg.

Best regards, Patrick

---

Previous assumption:

Hi,
I've tested the new bootstraplike version. As I see the offsets are missing for sm, md and lg.

Intention? If so, why?

Best regards,
Patrick