fclaussen / flexbox-framework

A simple and effective flexbox based framework.

Hello there, I'm Fernando

Director of Engineering at Trew Knowledge



My goal is to help make the developer experience a pleasant one.
I believe we can empower a whole generation of new developers by properly documenting our learnings and code.

🔭 I’m currently working on AI tools, processes and documentation

📝 I sometimes write articles on fernandoclaussen.com

Trophies

flexbox-framework's Issues

Two things to improve

Hi.
First of all thank you. I tried most of flexbox grids out of there and this is best (maybe cause i'm using Foundation for a while). But as i tried to make it work i had to fix 2 things.

I don't use compass so i got error that mixin for box-sizing is missing. Would be great if you add it since it's only 4 lines of code.

Also i found that my content overflow far away beyond viewpoint even if width was set. Simply changed width: grid-calc($i, $total-columns) part to max-width to fix that. Maybe it was something with my css (or rather lack of it) but still i think max-width is more reliable.

@up
Also a question. Can classes like large-middle be asigned to not only rows but also columns ? Since id doesn't seems to work now.

@up
And another thing (i will probably be editing this issue few more times...). Can you make off-canvas fixed and scrollable ? Thanks

@up
Also i don't really get how does "automatic" part work. Does each column need to have size class even if all of them doing the same ? Changed it for row class with i think is better :

.row.auto > * {
    flex: auto;
}

@up
And there's still more... I really liked how in Foundation you don't needed to specify all grid classes like (large-6 medium-4 small-12). You could skip small-12 because at default column was at 100% but using your grid if i miss it it overflow. Temporary fixed it using:

.row > * { max-width: 100%; }
or
.row > * { width: initial; }
or even
.row > * { min-width: 0; }

before generated size classes. I know i'm trying to make it working more like Foundation but i'm used to it already and it's easier to do this than getting used to anything new.

Once again thanks for great framework and keep it up !

Create bower package

xlarge and xxlarge missing ?

Hello,

I can not find the .xlarge and .xxlarge classes in your flexboxgrid.css ( https://github.com/fclaussen/Flexbox-Framework/blob/master/dist/css/flexboxgrid.css )

Two more things:

• Is it possible to have an human-readable CSS file ? :)
• Is it possible to mention when the classes .medium, .large, .xlarge and .xxlarge are applied (in pixels) ? I had to convert each "min-width" (64.0625em) to know the size in pixels ;(

Thanks a lot for your great job !

Create LESS Version

Add Offcanvas menu component