evgenyrodionov/flexboxgrid2

Modern 12 column grid system based on flex property

flexboxgrid2

Modern 12 column grid system based on flex property.

→ Documentation

Motivation

Forked from kristoferjoseph/flexboxgrid because original project seems abandoned (kristoferjoseph/flexboxgrid#236, kristoferjoseph/flexboxgrid#229, kristoferjoseph/flexboxgrid#211, etc).

Breakpoints

• xs: 0..575px
• sm: 576..767px
• md: 768..991px
• lg: 992..1199px
• xl: 1200px+
• .container padding: 8px
• .container width: $breakpoint - 16px
• .col-* padding: 8px

Install

yarn

yarn add flexboxgrid2

npm

npm i -S flexboxgrid2

Usage

webpack

import 'flexboxgrid2'
// or if you use airbnb-config-eslint which explicitly wants .css extension
import 'flexboxgrid2/flexboxgrid2.css'

unpkg.com CDN

<link rel="stylesheet" href="https://unpkg.com/flexboxgrid2@[version]/flexboxgrid2.css">

Replace [version] with current version, f.e. 7.2.1

flexboxgrid2's Issues

FEATURE REQUEST: Column/Vertical Helpers

Is it possible to add helper classes to allow the .container-fluid to be more powerful. Currently, .container-fluid isn't display flex and the .row class is less than ideal in some situations due to the negative margins causing overflow.

Ideally, .flex (direction: row, flex: 0 0 0, width 100%) and .flex-column (direction: column, flex: 0 0 0, width 100%) modifier classes would allow the use of existing classes to capture most layout needs.

Consider adding a dist folder to repo

Looking at the src folder, the flexboxgrid2.css file looks like it requires postcss to output a css file that is suitable for use in live production.

Am I just missing it? Apologies if so.

If not, I would suggest adding a dist folder to the repo, with a normal and minified CSS file inside. Please and thanks.

scroll issue without container

the horizontal scrolling issue originaly reported here kristoferjoseph#144 still appears if you dont use container or container-fluid around your row and cols. maybe write down this spec in the docs so everyone uses the grid in the correct way?

Why is there no .container or .container-fluid class?

Before I start, thumbs up for forking and maintaining this. Sadly, the first thing you find on google when searching for "flex css framework" is a dead open source project with no link to this repo (for whatever reason - no judgement involved :) ).

Now back to topic: Bootstrap has a .container and .container-fluid class to support things like a centered, responsive, layout with breakpoints for width and stuff like that.

I've wondered why this isn't a thing for flexboxgrid2, as well. Is there a reason for it or is it just not yet implemented?

FEATURE REQUEST: add visibility classes

flexboxgrid doesn't have visibility classes

Since flexboxgrid is used heavily used for responsiveness, I believe visibility classes should be a part of core library.

There's a PR at kristoferjoseph#211 maybe can merge on this repo?

FEATURE REQUEST: .col- with flex-grow: 0

Is is possible to get a .col- class that doesn't grow (flex-grow: 0) but inherits the other styles e.g flex-basis and max-width.

This enables us to have a .col- that doesn't grow past it's content when used in conjunction with the normal .col-.

Add visible-* classes

Briefly ( tweet size ) describe your issue and how you discovered it.

Can you add visible-* classes like:

.visible-xs
  display none !important
  @media (max-width 48em)
    display flex !important

`[class=^col-]` could be mismatch and won't be exported by css-loader

Hi, I believe using [class=^col-] will lead to some problems:

1. If col- is not at the start of a class name, like class=" col-md-6" or class="first-xs col-md-6", then it will mismatch the selector.
2. When using css-loader, [class=^col-] won't be exported, because css-loader's CSS Module only works with class name selector. A typical user is react-flexbox-grid. I just posted a related issue there.

I'm thinking that maybe we could keep [class=^col-] and add all the explicit class names back?

Thank you!

horizontal scroll issue with full width layout

still facing the horizontal scroll issue orignaly reported here: kristoferjoseph#144

using container-fluid around my row but removed the 16px padding to have a full width layout. without removing the padding of container-fluid, there is no horizontal scroll.

my code:

<div class="container-fluid">

<div class="row middle-sm">
  <div class="col-xs-12 col-sm-7">
    <div class="box spaced-default">
      <h2>Fühl dich wie Zuhause</h2>
      <p class="center">Dein Damen und Herren Coiffure in Wettingen. Geniesse das entspannte und lockere Ambiente bei einem Espresso und freue dich auf einen frischen und modischen Haarschnitt. Gianni arbeitet mit zusammen Trinity Haircare sowie Haarsana und gibt regelmässig Workshops in der Schweiz und im Ausland. Deine Haare - bei uns in guten Händen.
      </p>
    </div>
  </div>
  <div class="col-xs-12 col-sm-5">
    <div class="box">
     <img class="teaser" src="/assets/images/home_salon.jpg">
     <a class="btn btn-text btn-absolute" href="/produkte">
      <span class="center">Salon</span>
    </a>
  </div>
</div>

</div><!-- close container fluid -->

Request: Behavior change for `first-` and `last-` reordering

Briefly ( tweet size ) describe your issue and how you discovered it.

Request to change the functionality of the first-* and last-* modifiers to be more applicable.

...

Expected behavior

Reading the documentation, I would expect that using the first-* or last-* modifiers would actually rearrange the columns based on the viewport. So an element with first-xs would only be arranged first if the viewport matched the xs media query

...

Actual behavior

It appears that using first-* or last-* will always place those columns in that order, regardless of screen size. This isn't very useful to someone building more advanced responsive layouts.

...

Steps to reproduce behavior

• OS: All
• Browser: All
• code/fiddle/pen url: n/a

Provide easy way to customize variables without needing to rebuild

It would be super nice if there were a quick way to customize the grid's gutters, etc. without needing to clone/fork and rebuild the library. It looks like you're using native CSS variables in a preprocessed fashion, which is great, but none of the variables can be overridden after including flexboxgrid2 normally in projects.

Horizontal scroll flexboxgrid-1

Briefly ( tweet size ) describe your issue and how you discovered it.

When i trying to use the old version of flexboxgrid1 why theres a vertical scrolling effect and when i resize the browser theres a horizontal and vertical effect? but when i delete the negative margin on the row it fix magically , Is it right to delete the negative margin ?
...

Expected behavior

...

Actual behavior

...

Steps to reproduce behavior

• OS:
• Browser:
• code/fiddle/pen url:

SASS sources and wrappers

Excellent framework. Nice job.

It would be nice if SASS source files were available. I mention it because I'd like to wrap the whole thing in a wrapper class. Ex:

<div class="flexgrid2-wrapper">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        ...
      </div>
    </div>
  </div>
</div>

The reason is because I often like to link to small grid libraries when I work on existing sites that have lousy themes/no grids. It makes adding custom content quick and easy (especially with Magento sites - they almost always have no grid framework and a terrible - but I use it frequently with WordPress sites, too). However, I like to wrap it in a unique class so not to (potentially) collide with other classes similarly named (like .row, .container, etc - they are rather common names). I currently do this with bootstrap-grid-css, however, I am sick of maintaining it and I like your framework better.

Also, is there a reason that child elements like .row and .col-* aren't nested under the .container classes? Just curious.

Anyway, just throwing out some ideas. Keep up the good work.

Daniel

Could you add more explanation?

followed by a link from kristoferjoseph#292

I think it is good to have some explanation about .box, .box-row, .container, .container-fluid in the doco