Todo: Pick a CSS grids framework

cised-ca / se-dir-frontend-react

GNU Affero General Public License v3.0

2 stars 1 forks source link

Todo: Pick a CSS grids framework #5

Closed chimo closed 8 years ago

chimo commented 8 years ago

We currently have rough implementations of:

chimo commented 8 years ago

What I like about "responsive grid system":

Doesn't include anything but grids.

What I like about bootstrap grids:

Easy to define different number of columns for different viewport sizes (ex: <div class="col-md-4 col-sm-2">)
With a custom, minimal build, we can get just the grids (almost... it still comes with normalize.css, changes the font, etc.)

What I like about flexbox grids:

We don't need to group cells into rows in the markup. Flexbox wraps automatically when necessary. Rows in this case are a visual implementation detail anyway, which should be CSS's job. This also allows us to use <ol>/<li> markup, which makes sense semantically since it's a list of results.

nsieber commented 8 years ago

Responsive grid system also wraps. Just omit the "row" div.

nsieber commented 8 years ago

After playing around with 4 columns, 3 columns, and 2 columns, I tend to think that the default single column layout work best on all screen sizes. Otherwise things look kind of cramped.

To see what I mean switch to branch 'responsive-grid-system.css' and type cycle into the search bar.

chimo commented 8 years ago

Ah yeah, I agree. A grid would look nice if the description was really, really short.

I think what was shown as a possibility at rhok was something similar to slide 4 in this PDF.

If that's the way they want to go, we could have a 'tagline' (or wtv) property on the 'enterprise'-type object that would hold a 5-words-max 'tagline'. Or something.

For now we can keep the description and single column setup and see what they say. What do you think?

nsieber commented 8 years ago

Yep sounds good. It's easy enough to change later.