erwstout / ginger Goto Github PK

Needs to be added to _row.scss

Currently display classes are:

.sm-only{}
.md-only{}
.desktop-only{}

Changing desktop-only to lg-only will better follow the other naming conventions.

Would be nice to have a reverse option to flip the order of items in a row.

Adjusting block grids should/could be done with row helper classes but the block-grid properties override.

HTML

<div class="posts-container sm-block-grid-1 block-grid-3 row--justify-content-start"></div>

[class*=block-grid-] needs a width of 100%.

When using sm-col- the flex-basis value is added correctly, but since default columns have flex: 1 1 auto it doesn't apply correctly.

Block grid styles are applied with a css wildcard ([class*=block-grid-]) which can cause some conflicts in styles if you use a class name containing block-grid as a parent such as flexible--block-grid-lists

using the class flex-basis-# to make set flex-basis columns works, however there needs to be more classes applied to make it truly flex.

Would be nice to have go to classes for visibility, such as hide-mobile or show-mobile

.row should have a flex property of flex: 0 1 auto;

Would be nice to be able to easily change block-grid counts on small breakpoints.

<div class="sm-block-grid-1 block-grid-4">...</div>

Ginger has the following issue as pointed out by Phillip Walton

An explicit flex-basis value (i.e., any value other than auto) is supposed to act just like width or height. It determines the initial size of a flex item and then the other flexibility properties allow it to grow or shrink accordingly.

IE 10-11 always assume a content box model when using flex-basis to determine a flex item's size, even if that item is set to box-sizing:border-box. Demo 7.1.a shows that an item with a flex-basis value of 100% will overflow its container by the amount of its border plus its padding.

The fix should look something like this:

.col-4{
  width: 33.33%;
  flex-basis: auto;
}

Nested rows are inheriting the width: 100% from their parent .row, which causes an unexpected offset. Adding width: auto to the nested row (.row .row) resolves this.

The release branch release/2.0 is pretty much set but needs testing to verify it is ready for release. Still waiting on mixin options.

In some cases using desktop-only (which adds display: block) can break layouts that may be flex items. It would be nice to have a class such as desktop-only--flex to display the element as a flex element instead.

.desktop-only{
  display: block !important;
  &--flex{
    display: flex !important;
  }
}

Column Padding is not being compiled in ginger.scss

Add the ability to define a flex-basis

Firefox doesn't listen to flex-basis values, for instance if flex-basis: 50% and contains a large image, etc.. it expands. Adding overflow:hidden fixes the issue.

Point to gingergrid.com instead.

Might be helpful to have a .hide class to just hide something all together across all viewports.

.desktop-only--flex doesn't appear to be working correctly.

Would be nice to have a sm-text-left class available to override desktop styles in some cases.

Allow for easy to use block grid options that allow for grid items similar to foundation block grids. Normally would use:

<ul class="row">
  <li class="col-4">
    ...
  </li>
  <li class="col-4">
    ...
  </li>
</ul>

But would be rad to have it based on how many items in the grid instead.

scss mixin options would be great for those who want to have more semantic HTML.

y u no put docu?!

Should have an option for a max-width on containers.

Change to 43em to cover most smart phones in landscape mode.

In some cases it might be nice to collapse the padding on a column. .no-pad perhaps?

The .row options are missing a justify-content: flex-start option.

Would be nice to have column ordering to easily swap column orders. With breakpoint support as well (small, medium, standard)

// Sample of how it could work 
.col-order-first{
 order: -1;
}

.col-order-2{
  order: 2;
}

Small columns, or any element with classes that doesn't start with col- fail to get the default padding property from the ginger settings file.

*[class^="col-"]

Should be changed to:

*[class*=" col-"], *[class*=" sm-col-"]

Currently nested rows get indented. This is due to the padding that is set on the columns. Easy way to fix this is just to have any nested row have a negative margin that is equal to whatever the column padding is.

Missing from docs.

fixed in 1.1.4

.row--wrap should read .row--no-wrap

Adding col-centered options for sm-col-centered and md-col-centered would be beneficial.

By default columns have a flex property of flex: 0 1 $flex-basis;

In some cases when the columns wrap it may be nice for those to grow. Adding a .col-grow or something similar could possibly be a nice feature. Would possibly have to be added to as a row option.

In current project my override looks like this:

.row{
    max-width: 100%;
    flex-wrap: wrap;
    .col-4{
      background: white;
      flex: 1 1 33.333%;
      padding: 15px 6px;
      &:nth-child(1), &:nth-child(4){
        padding-left: 12px;
      }
      &:nth-child(3), &:nth-child(5){
        padding-right: 12px;
      }
      &:nth-child(4), &:nth-child(5){
        padding-top: 0;
      }
    }

settings.scss needs to have actual overrides not just the variable names.

.md-col-6

for breakpoints after small up to 1024px

May be a good idea to update the documentation to reflect the desktop down nature of the grid, and to make that a bit more clear.

To recap what I was showing you earlier, I wanted a column to be 12 columns up until the large breakpoint, and then 6 columns. I was not aware of the nature of the grid, and that I needed think of the grid as being 6 columns until it was down to medium (and then small), and then it would be 12 columns.

Since the medium breakpoint inherits the desktop column styles instead of the mobile column styles, this can be a point of confusion that could need clarification.

This should only apply for Factor1 projects but may be useful beyond. In particular, these older projects that are already using Foundation or Kube or whatever. These typically already have a container and row class assigned, so adding in Ginger doesn't always work out of the box. The same is true for some resets that use

*:before,
*:after {
    ...code...
}

or even

*:before,
*:after {
    content: ' ';
    display: table;
}

as Ginger has now inherited those styles and may lead to problems.

Maybe add default styles to counter this behavior, or consider namespacing the classes.

Should be similar to row override classes to have more control over columns.

Columns currently have no position declared, which can cause small issues if an element inside a column is position: absolute;

Need to implement quick and easy classes to make column offsets.