andri / fluidable

Standalone CSS grid system

Fluidable is a mobile-first responsive CSS grid system

Use standalone with your custom CSS, reset styles and mix-ins.

Docs

Read more at https://fluidable.firebaseapp.com/

License

http://creativecommons.org/publicdomain/zero/1.0/

fluidable's Issues

Template

Anyone here has a template model how this works in a real world example?

col-fixed-square (and probably others) do not work on iOS Devices

Hello,
the fixed aspect ratio col-fixed-square and probably the other ones as well do not work on iOS Devices. Instead they have the height of the content. See screenshot below and the following dev site https://www.dergepflegtemanndev.de/marken (problem appeaers on the brand boxes and the footer boxes). Tested with 2 different iOS Devices (iPad & iPad Air).

P.S. the docs have an misspelling as well, it should be called ".col-fixed-portrait", but on the current doc site it's ".col-portrait".

Kind regards,
Sebastian P.

Expand docs or examples to show FIXED ASPECT RATIO please

Hi,

I have been struggling to understand the purpose and display results of the FIXED ASPECT RATIO classes.

Would you be able to show them in the docs and/or provide sample code.

I haven't been able to get them working as I am unsure of the differences between each class.

Thanks Kat

Offset classes wrong in documentation?

On your website you show the offset classes as .offset-x and .offset-dt-x, however in fluidable.css I am seeing them as .col-offset-x and .col-dt-offset-x

Am I missing something here? So, the .col- prefix is missing, and the dt- part is in the wrong place.

Also, why is offset not available for .col-mb-x sizes?

IE8

Hi Andri,
I found a problem with ie8, it seems that is not rendering the grid properly.
You can check it on http://shared.topo.bz/ako-k/es/
If you need more info please get back to me.
Thanks!

Classic: Nested cols on mobile not flattening out

http://fluidable.com is down

http://fluidable.com isn't accessible anymore.

Sass

Would you be willing to port this to sass?

DOCs

In your DOCs you write using Offset like ".col-offset-dt-x" but seems to be ".col-dt-offset-x" ?
...
Just saw this was already mentioned - but still exists:

Modular features

Hi Andri!
I was thinking it would be interesting to include features such as “fixed aspect ratio” as modules with @import because it is something that is not used in all projects and keep the total weight of the grid to the minimum.
It's only a thought, thanks for this great Grid!

1.3.1 or 1.4.1

http://fluidable.com/ -> 1.3.1
Git -> 1.4.1

grid on print

Hello,

I decided to try out fluidable grid system and found it quite okay. However, I cannot make it work on printed documents. Is this by design that all columns gets displayed in separate rows or am I missing something?

Is this okay to expect fluidable grid to work on printed documents?

Cheers and congratulation on a good piece of work,
Maciej

Padding on mobil/tablet states

I've "downgraded" from bootstrap to fluidable and it's very suitable for the project I'm working on, very nice and lightweight :-) But I'm having an issue throughout the site, I've translated:

(bootstrap / fluidable)
col-xs-x -> col-mb-x
col-sm-x -> col-x
col-md -> col-dt-x
col-lg -> col-ld-x

That means in some places I'll have divs only adapted to the desktop-size. And that means any col-div in tablet and mobile views won't get gutter padding, see example: http://codepen.io/anon/pen/mEgmyY/
The first col-group's children won't be getting padding here.

I can't determine from the documentation that you need to use a specific min col? Only that it is mobile first.

margins

should .col-group have a margin-top margin-bottom of 16px like the col-* has the left and right ? just thinking of .. might be ok to be as a default.

Math needs parenthesis?

I'm giving the LESS version a try, and I suspect the margin and padding math needs to be wrapped in parenthesis

padding-left: @gutterWidth / 2;

should be
padding-left: (@gutterWidth / 2);

unless
padding-left: 10px / 2;

is some new syntax that i'm not familiar with and gives warnings in chrome dev-m.

Thanks for the cool grid!

Nested Col-groups

First of all I'm testing Fluidable and I love it!

Is posible when you have some nested col-groups like:
div.container
-div.col-group
--div.col-6
--div.col-6
-div.col-group
--div.col-9
---div.col-group
----div.col-12
----div.col-7
----div.col-5
-----div.col-group << the nested columns don't work properly (I need more col-group to make it work)
------div.col-4
------div.col-8
------div.col-4
------div.col-8
--div.col-3

Only works if I do this:
-----div.col-group
-------div.col-4
-------div.col-8
-----div.col-group
-------div.col-4
-------div.col-8

Don't know if this makes sense or I'm missing something…
Thanks.

Convert comments to inline

See this fork for more information. twekz@5a88018

Padding on col-group

When nesting columns, there is an issue with laying out content. The first and last cells in a column group still have left and right padding (respectively) which pushes content inside of the container.

Wouldn't it make more sense to eliminate these outside paddings on the first and last children of a col-group? I believe this is the default behavior of Bootstrap, for example.

Is there a specific reason you did not include this, and what do you think about the nested columns issue and aligning nested content with un-nested content?

horizontal scrollbars

great code !

removing the outer padding by doing a

.col-group { margin-right: @gutterWidth / -2; }


is causing horizontal scrollbars to appear in chrome (in certain circumstances). you could try something with :last-child, :first-child, but thats obviously less compatible. my design in fact needed the extra gutters, so I removed it.

Large screen left space to the right

Thanks for your job. I am using this for some time.

When used this on screen that have more that 1280px the container left some space to the right.. because having a max-width. I have to delete this line for smart-tv and other screens

@media (min-width: @screenLarge) {
.container {
max-width: @screenLarge - (@gutterWidth * 2);
.center-block();
}
....