Responsive grid

[howardroark]

Hey!

I may not understand the "rework-flex-grid" properly.

.gridClass {
  /* ... */
}

.gridClass-rowClass {
  /* ... */
}

.gridClass-rowClass-columnClass {
  /* ... */
}

@media screen and (min-width: 32rem) {
  .gridClass-rowClass-columnClass--sm {
    /* ... */
  }
}

In this example where do the digits indicating the number of columns go?

[johno]

Ah, sorry. That's a poorly concocted example on my behalf. More thorough stubs look something like (straight from the Furtive source which was generated by rework-flex-grid):

.grd {}

.grd-row {}

.grd-row-col-1-6 {}

.grd-row-col-2-6 {}

.grd-row-col-3-6 {}

.grd-row-col-4-6 {}

.grd-row-col-5-6 {}

.grd-row-col-6 {}

/* ... */

.grd-row-col-3-6--sm {}

/* ... */

I kept the example in the rework-flex-grid documentation a bit ambiguous because things like columns, class names, and media query breakpoints are all configurable. When I get a chance, I will update the documentation a bit to make things more clear.

I hope this sufficiently answers your question!

[howardroark]

Totally! I think I am getting how this all joins together. I guess this is all so that you can render many grids to your CSS?

Is .grd-row-col-3-6--sm effectively equal to .grd-row-col-3-6?

Also I notice that furtive.co has no lg and md in the css... Is that something that has to be set?

[johno]

Yeah, pretty much. I use the rework-flex-grid lib in numerous projects so I can generate a particular grid with the classes/columns/breakpoints that are appropriate for a project (allowing me to maintain the grid in one central location). Since my primary intention is to keep Furtive lightweight, a flex grid is the perfect fit. Using rework-flex-grid means I don't have to write the CSS. I'm lazy, 😸 . Instead, all I have to do is configure a task:

gulp.task('rework-grid', function() {
  return gulp.src('scss/_grid.scss')
    .pipe(replace(/\.*/, ''))
    .pipe(clean())
    .pipe(rework(
      grid({
        numColumns: 6,
        classNames: {
          grid: 'grd',
          row: 'row',
          col: 'col'
        }
      })
    ))
    .pipe(gulp.dest('scss'));
});

This way, when there are updates to the grid system, I just need to upgrade the npm package and rerun the task. Down the road, I also intend on shifting all of furtive to a rework system with single use modules, I've begun some of the work already: https://github.com/furtivecss.

The furtive.co CSS has been run through gulp-uncss so those classes won't exist in the built CSS for the site. However, if you look in the main distribution CSS file, you will see all the grid classes.

[howardroark]

Got it! I was just using the furtive.co version when playing.

Thanks!
On Jan 9, 2015 1:19 PM, "John Otander" notifications@github.com wrote:

Yeah, pretty much. I use the rework-flex-grid lib in numerous projects so
I can generate a particular grid with the classes/columns/breakpoints that
are appropriate for a project (allowing me to maintain the grid in one
central location). Since my primary intention is to keep Furtive
lightweight, a flex grid is the perfect fit. Using rework-flex-grid means
I don't have to write the CSS. I'm lazy, [image: 😸] . Instead,
all I have to do is configure a task:

gulp.task('rework-grid', function() {
return gulp.src('scss/_grid.scss')
.pipe(replace(/.*/, ''))
.pipe(clean())
.pipe(rework(
grid({
numColumns: 6,
classNames: {
grid: 'grd',
row: 'row',
col: 'col'
}
})
))
.pipe(gulp.dest('scss'));
});

This way, when there are updates to the grid system, I just need to
upgrade the npm package and rerun the task. Down the road, I also intend on
shifting all of furtive to a rework system with single use modules, I've
begun some of the work already: https://github.com/furtivecss.

The furtive.co CSS has been run through gulp-uncss
https://github.com/ben-eb/gulp-uncss so those classes won't exist in
the built CSS for the site. However, if you look in the main distribution
CSS file
https://github.com/johnotander/furtive/blob/master/css/furtive.css, you
will see all the grid classes.

—
Reply to this email directly or view it on GitHub
https://github.com/johnotander/furtive/issues/39#issuecomment-69375020.