Responsive grid about furtive HOT 4 CLOSED

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!

from furtive.

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?

from furtive.

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.

from furtive.

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

Thanks!
On Jan 9, 2015 1:19 PM, "John Otander" [email protected] 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.

from furtive.