leejordan / reflex Goto Github PK

Is it possible to distribute cells vertically using grid steps?
I couldn't find anything about it on the docs.
Ex, something like:

<div class="grid">
  <div class="grid__row-2"></div>
  <div class="grid__row-6"></div>
  <div class="grid__row-4"></div>
</div>

Hi
Currently hidden-* classes hide only for certain screen size. It can become somewhat tedious for example to specify a hidden element for hidden-sm hidden-lg hidden-xlg. Also it is not consistent with say boostrap similar classes. My proposal is to replace current hidden-* classes with hidden-only-* and have change hidden-* to include stated and bigger screens, so hidden-sm will hide things for sm, lg, xlg etc.

Enhancement proposal:

I've been considering how grid systems like this can clutter the markup. My solution to avoid clutter and promote semantic markup is to use SCSS placeholders.

Currently we have (in _helpers.scss) various helper classes for alignment which we can use to position html elements. I think that we can achieve the same thing without breaking anything by making each of those classes an extension of a placeholder of the same name. This would allow us to write markup either as we do now with plenty of structural classes, or with far fewer classes because in our separate theme.scss files we can simply declare a class and then declare the extension.

I've created a gist to show what I mean https://gist.github.com/robballantyne/a08212f9beba1757ecefaa0815bb53a4

Hey @leejordan I noticed you set the box-sizing: border-box declaration for all elements with the * selector. I'm wondering if that should be defined only on the elements of the grid.
Is there a reason to set it to all elements?

I have just started using reflex. When using a responsive image with just grid__cell-img it always scales up (probably also when used inside a cell!). It can be more flexible to make the upscale an extra class. The classname I have used is just a suggestion.

.@{reflex-prefix}grid__cell-img {
display: block;
.display-flex-only();
.flex(0, 0, auto);
margin-left: 0;
margin-right: 0;
max-width: 100%;
height: auto;

    &.img-full-width{
        width: 100%;
    }
}

test-align-last is inherited down through all of the elements within, so even though IE11 does support flexbox, it does support that property. That hack causes the need to supplement every usage of text-align: right to also contain text-align-last: right and so on or it is broken which is a major pain throughout an entire app.

Hard to find/noise on Google, Twitter or Github.

I just counted, there is exactly one million and one project named Reflex on the whole internet, not counting the dark web (too scared to check).

You should change to yafl, encoreflex, suchflex, flexontheDOM, bootflexstrap, flexfoo or xelfer.

Also you need a cool logo, otherwise people won't know for sure you created the best flex grid out there.

I am not a designer but you probably need some cute animal wearing a too cool for school T-Shirt.

Hi,

This is my brothers account, plz can you tell me how I can use this to make a Facebook style social media site.

Thanks

So the column naming convention is:
.col-<breakpoint>-<n>

But the order and offset are:
.order-<n>-<breakpoint>
.offset-<n>-<breakpoint>

This creates confusion for us. We think they should be:
.order-<breakpoint>-<n>
.offset-<breakpoint>-<n>

I was just going to "fix" it in my fork, but then your nice documentation would no longer apply. What do you think about this issue? Any chance you may reconsider the naming for these?

Hey @leejordan ,

I added an -sx breakpoint at 640px in my build and discovered something unexpected. What i wanted to do was target <= 640px screens via .grid__col-sx-6. I figured that widths of 640px or less, would result in 6/12 cols (50%). However, the switchover only occurs at 639px due to the generated min-width media rule.

This behavior is counter-intuitive to me, with the fix being simply to add 1px to all breakpoints for the declared column count to match the <= breakpoint rather than < breakpoint.

Or is this simply an inversion of assumptions for mobile->desktop vs desktop->mobile structuring?

thanks!
Leon

Hello 👋

First of all, many thanks for your work ... I ❤️ this CSS library.
I used it a lot and still today in many projects in production 🚀

I have a question regarding media queries:

Is there a specific reason to use @media only screen and (min-width: $reflex-xs) for "reflex order helpers generation" instead of @media (min-width: $reflex-xs).

❔ I'm asking you this question because when we/you use a plugin like gulp-group-css-media-queries we have declacrations redundant @media only screen and (min-width... and @media (min-width... instead of letting the tool merge all into@media (min-width... due to the only screen and keywords.

💡 The idea behind (if there is no specific reason), it would be to homogenize @media by removing only screen and (or addingonly screen and to all others) in order to have a lighter built CSS .

Best Regards
Yoann

Thrilled to see the scss version, thanks for that.

Now I would just like to see a media query setup that was less opinionated and more configurable. I really love the way gridlex tackles it.

https://github.com/devlint/gridlex/blob/master/src/gridlex-vars.scss

Of course I can go in and manually change Reflex to match our already established media queries and breakpoints – but breakpoints change in the development and testing – keeping them updated using the current approach would be a headache. Also, upgrading to future versions of Reflex is made more difficult.

I like this grid system - particularly that you can write semantic html rather than <div class="row"> etc.

However, I'm developing for a site using Concrete5 which has the capacity to do on-the-fly layouts but, to set this up, you have to provide "offset" classes. I suppose I could basically copy the bootstrap offset system, but there may be a better way to do it.

I realize including offset classes would go a good way to doubling the size of the file - but perhaps have it in a less file which could be commented out by default and included if wished ?

Is there a reason why .hidden-xlg is missing from utility classes? Right now, I have not found a consistent way to control the visibility of elements at xlg breakpoint. All other classes up to .hidden-lg work as expected.

I've read docs, and I didn't notice any *-visible / *-hidden classes.

Is using those are somewhat wrong and that is why You do not provide them?

Maybe this is a topic for PR?

Hi LeeJordan,
you still maintaining this project?
Greetings and thanks for this great work.

The CSS folder files have outdated version (1.2)

Example: class="block col-sm-12"

destroys my fonts within grid because on .col- the ^ is used and not *

When switching the class to class="col-sm-12 block" everything looks good but within CMS you sometimes have no direct possibility to change the class order.

Hello! I found bug on IE11 (11.420v) with IE9 emulation mode. display: inline-block override by display:flex. Here's screenshot

Hi, I'm really happy with this grid and I'm using it a lot, thank you!

I have an issue maybe because I'm totally dumb...

When using justify-centerin grid, every element inside it can't have different text align options:

<div class="container">
   <div class="grid justify-center">
      <div class="col-6">
         <p style="text-align:center>Hi</p>
      </div>
   </div>
</div>

I'm missing something?

P.D: I'm currently commenting these part of the code to work again with text-aligns:

.justify-center.grid [class^="col-"] {
  text-align: left;
  text-align: start;
  /*-moz-text-align-last: left;
  -moz-text-align-last: start;
  text-align-last: left;
  text-align-last: start;*/
}

Given you are using existing form element (like we do), this line produced some graphic glitches. Usually you work with content-box elements which means: Every button, input, checkbox, fieldset, ... has to be modified if you like to use reflex

Instead of

    // Reset the box-sizing so our grid works properly
    * {
        @include box-sizing(border-box);
    }

how about:

    // Reset the box-sizing so our grid works properly
    [class^="grid__"], [class*=" grid__"] {
        @include box-sizing(border-box);
    }

Could this work?

Option: Update User interface

Is it possible to use Reflex as a replacement for TABLE, so that colums are properly wrapped, and cells rearanged for responsive layout? Is there an example fir this available somewhere?

1 flexbox feature I can't seem to figure out with your lib is an auto column option.

Hello, is this refelex grid mobile first?
Are the cols stacked by default in mobile view <= 576px?

Thanks!

I'm pulling your project down, but since it's not checked into bower, I can't specify a version. Someone might want that one day.

Hi guys,

How should I use nesting? For example if I declared grid and grid__col-12 inside and I want to split col-12 into 3 cells for example. Should I include another grid inside col-12 or I can declare col-x directly in col-12?
Example:

<div class='grid'>
   <div class='grid__col12'>
       
       <div class='grid'> /* should I delcare this div? */
          <div class='grid__col-4'></div>
          <div class='grid__col-4'></div>
          <div class='grid__col-4'></div>
       </div>
   </div>
</div class='grid'>

Thanks

package.json is missing a "main" field. bower.json has

"main": "css/reflex.css",

What are your thoughts about making package.json have the same? I'm using https://www.npmjs.com/package/resolve to resolve the location of the installed package and it relies on having a "main" field that points to a file (or index.js).

Hi,

reflex-grid/scss/includes/_mixins.scss
uses a slash for division calculations.
percentage(($index / $reflex-columns))

This will be deprecated in SCSS in the future
Please use: math.div($index, $reflex-columns)

See: https://sass-lang.com/documentation/breaking-changes/slash-div

As Reflex can be used as row based or column based, would it not make sense to rename col to item, which is a more generic term free from direction connotation?

Hey @leejordan,

I have noticed in v2 that all of the "!important" was dropped from the auto cols, the .grid class, and the .hidden helpers. I just want to confirm that this was intentional and that we aren't missing anything in v2?

https://github.com/leejordan/reflex/blob/master/scss/includes/_mixins.scss#L43-L49

Thanks!

In the compiled CSS, lines 142-145:

:root .reflex-grid__col-cell {
  width: 100%;
}

Hi @leejordan,

Thanks for sharing the reflex grid. Our project has benefited immensely from it. We want to upgrade to 2.0 but there are too many pages to regression to change the HTML.

I know you have thought over the BEM naming issue a bit. As some people have requested backward compatible version as well, would you entertain publishing an older version (e.g. v1.9) that has your 2.0 improvements with old BEM naming?

I understand that "support" isn't necessarily what you're doing this for. :) I'd be happy to work on this (with a few pointers, e.g. is "_grid.scss" the only place to change the naming of "col" --> "grid__col"?)

Thanks!

I see there is a sass version, but it doesn't come along when you download with npm. Could we get it published with npm as well?

Hello,

I tested your reflex demo with IE-Tester, but no inline-blocks with IE <=10? So just the flexbox native support for modern browsers?
What's about columns with IE 8/9 or 10?

Regards

Can you update your mixins?
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins

Text-align-last value "left | start" assumes that children aligns everything to the left.

Example: http://plnkr.co/edit/n1za5W?p=preview

Would you consider add them in so others who use the minified CSS can still reference the variables?

Something like this:

I see you are using inline-block on the grid with some negative letter-spacing stuff to remove extra space. Why not just use display:block? I have never seen this trick but, it seems to work fine. Can you point me to where you picked it up?

I might have set things up wrong but I'm getting an issue with the setupwhitespace mixin making all my inline-block items and all my text collapse on top of itself, as seen below.

I'm just wondering what I need to do to avoid this? I'm using @extend to pull the styles from reflex.scss... would that be the issue?

Hey, guys! Your fallback for older browsers that do not support flexbox is reliable. But this fallback make you include many redundant properties even we use reflex in the scope of modern browsers only. Using word-spacing and letter-spacing properties is great workaround to handle spaces between inline-block elements indeed. But these properties and many other make reflex solution overwhelmed in flexbox context. What about to provide sass (less) variable to handle legacy browsers? It will be make the final css smaller and more robust. What do you think?

Shouldn't it be:

.grid--justify-center .grid__cell { text-align: center; }

and

.grid--justify-end .grid__cell { text-align: right; text-align: end; }

I would like to see a breakpoint option for ordering grid elements.

.grid--order-<breakpoint>-<n>

Not possible by now, or am I missing something? Thx!

This was brought up in a previous issue, seemed like something had been merged but don't see any offset support in v2.

Is this something that is planned?

Doing col-offset-1 would be great versus rendering a new element of the offset size desired.

Hi,
I am just wonder if this feature already exist..
something like this:
https://codepen.io/dudleystorey/pen/Kgofa

And its not the same as grid__col-auto.

<div class="grid_auto">
<div>...</div>
<div>..</div>
</div>

I really like Reflex but have some issues with $reflex-grid-spacing adding vertical padding as well. I'm trying to position items accurately but having unwanted padding appear at the top and bottom of grid items is making it more difficult than necessary.

Could we have a $reflex-grid-spacing-vertical setting that would default to $reflex-grid-spacing?

hey @leejordan

is it possible to create a nested grid by simply adding .grid class to an existing .col* element and continue nesting more .col* directly within it?

i tried it with the nested example on the demo page but it didnt quite work.

thanks!