kristoferjoseph / flexboxgrid Goto Github PK
View Code? Open in Web Editor NEWGrid based on CSS3 flexbox
Home Page: http://flexboxgrid.com
License: Other
Grid based on CSS3 flexbox
Home Page: http://flexboxgrid.com
License: Other
Because for some reason people love complicating their build script. ;)
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.
Both are not available — The readme suggests to use 5.0.0… but it 404s
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.
%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
Does current version support fixed width columns?
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.
Due to the way IE rounds percentages we either need to add calc() or leave the long decimals.
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?
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.
The file is named index.css
This stops me from using Duo to include this
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)
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';
It looks like safari isn't picking up the width of the page.
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.
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>
Add an example that uses modernizr to supply a float based fallback grid with the same api.
OR finish flexbox polyfill.
see repro here: http://codepen.io/argyleink/pen/gauxb
Because for some reason people love complicating their build script. ;)
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.
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
.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%;
}
Can you commit an unminimized version of index.css?
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.
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.
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?
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.
hello
Is there a way to make column with height of two rows using flexboxgrid?
What is the best way to center an element vertically and horizontally using flexboxgrid?
Thank you!
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.
Add variables to define a custom column count.
Should reference the correct dist file like:
main: [
"./dist/flexboxgrid.css"
]
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.)
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
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.
Can you add Flexbox Grid to http://cdnjs.com/ ?
Because for some reason people love complicating their build script. ;)
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..
the latest npm version is 1.1.1
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.
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
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.
Bad:
var ( --variable );
Good:
var (--variable);
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!
Would love to see a feature to make all the columns in a row equal height.
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.
example
.flex-container-fluid
and etc
for use with bootstrap
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.