Grid centering

[halfempty]

@JShapland says:

On computer and on phone/tablet: grids are not centering in different size browsers, not centering at all on the phone. Can we get these to center?

[JShapland]

I sent this question to Ubergrid support as well, so far no response. Looking through the comments on their support page I found this answer to someone who wanted their grid to align to the left: "UberGrid does not have a built-in alignment option, but you can easily align it to the left by wrapping it into the div tag with a limited width. Also, you may want to enable “responsive cell size” UberGrid option." Does that mean more to you than it does to me? Is that a way to get the grids centered?

[halfempty]

@JShapland I was able to do a little bit via the theme's CSS, which has made some difference in some situations. Does the Genre grid, for instance, seem better now?

But there's a part of the problem that we're not going to be able to solve. When the Fiction/Not grid decides to stack the boxes vertically, we have no opportunity to intervene. This has to do with UberGrid's use of JavaScript, rather than CSS, to achieve its layout.

Could we potentially do something other than UberGrid for the Fiction/Not page? That is, design and build our own design for that page? Which might be appealing, as it's the homepage.

[JShapland]

That seems like a great solution, Marty.

Sent from my iPhone

On Jan 10, 2015, at 12:09 PM, Marty Spellerberg notifications@github.com wrote:

@JShapland I was able to do a little bit via the theme's CSS, which has made some difference in some situations. Does the Genre grid, for instance, seem better now?

But there's a part of the problem that we're not going to be able to solve. When the Fiction/Not grid decides to stack the boxes vertically, we have no opportunity to intervene. This has to do with UberGrid's use of JavaScript, rather than CSS, to achieve its layout.

Could we potentially do something other than UberGrid for the Fiction/Not page? That is, design and build our own design for that page? Which might be appealing, as it's the homepage.

— Reply to this email directly or view it on GitHub.

[jillameyers]

Hi, Marty—

Really appreciate your quick work on these questions Jenn has raised. This sounds like the right fix—building our own design for the homepage.

Could you give us a time estimate on this—number of hours—and the date by which you could complete the work? We aim to launch next Tuesday, January 20, and we don't have a lot of budget left for building out the site.

Thanks so much. Jill

On Sat, Jan 10, 2015 at 12:09 PM, Marty Spellerberg < notifications@github.com> wrote:

@JShapland https://github.com/JShapland I was able to do a little bit via the theme's CSS, which has made some difference in some situations. Does the Genre grid, for instance, seem better now?

But there's a part of the problem that we're not going to be able to solve. When the Fiction/Not grid decides to stack the boxes vertically, we have no opportunity to intervene. This has to do with UberGrid's use of JavaScript, rather than CSS, to achieve its layout.

Could we potentially do something other than UberGrid for the Fiction/Not page? That is, design and build our own design for that page? Which might be appealing, as it's the homepage.

— Reply to this email directly or view it on GitHub https://github.com/halfempty/coveredwithfur/issues/23#issuecomment-69465502 .

Jill Meyers Codirector A Strange Object astrangeobject.com

[halfempty]

Hi all,

What do you have in mind for the homepage? Do you want to do something based off the original wireframes? A re-engineered thing in the UberGrid style? Something original and new?

The most straightforward would probably be to do something based on the styles we're using elsewhere. For instance, it could be our title blocks, like so:

And then on the backend there'd be an interface to choose the stories you want on the homepage, and set their order?

Let me know the direction you're thinking! Thanks,

Marty

[cccallie]

Hi, y'all.

I think Jill and I would prefer to stick with something similar to what we have, something in the Ubergrid style. I really love the current design of the homepage—we were just frustrated that we couldn't get the grid to center on differently sized browsers. Personally, I'm kind of hoping there's an easy way to achieve a very similar design without actually using Ubergrid itself on the homepage. Is something like that possible?

C

On Mon, Jan 12, 2015 at 12:38 PM, Marty Spellerberg < notifications@github.com> wrote:

Hi all,

What do you have in mind for the homepage? Do you want to do something based off the original wireframes? A re-engineered thing in the UberGrid style? Something original and new?

The most straightforward would probably be to do something based on the styles we're using elsewhere. For instance, it could be our title blocks, like so:

[image: cwf-home1] https://cloud.githubusercontent.com/assets/775543/5708554/c3618960-9a57-11e4-9896-a001e7e5b4fc.jpg

And then on the backend there'd be an interface to choose the stories you want on the homepage, and set their order?

Let me know the direction you're thinking! Thanks,

Marty

— Reply to this email directly or view it on GitHub https://github.com/halfempty/coveredwithfur/issues/23#issuecomment-69620571 .

Callie Collins Codirector A Strange Object astrangeobject.com, @AStrangeObject

[halfempty]

Sure. Will it always be just the two items? One Fiction and one Not?

[cccallie]

Yep!

On Mon, Jan 12, 2015 at 12:43 PM, Marty Spellerberg < notifications@github.com> wrote:

Sure. Will it always be just the two items? One Fiction and one Not?

— Reply to this email directly or view it on GitHub https://github.com/halfempty/coveredwithfur/issues/23#issuecomment-69621466 .

Callie Collins Codirector A Strange Object astrangeobject.com, @AStrangeObject

[halfempty]

Hey all--

Some progress on our custom-built homepage grid: http://www.astrangeobject.com/cwf/

(Responsive and testing in various browsers remains.)

[JShapland]

Hey! It's looking very good in Chrome on the computer. Is there a way to size or format the titles of the pieces so they don't drop just one word to the second line? (On my browser, AWAY and ALISON are both on the second line.)

Also, can we try making FICTION and NOT bold or a bit heavier?

Thanks, Marty.

On Thu, Jan 15, 2015 at 1:30 PM, Marty Spellerberg <notifications@github.com

wrote:

Hey all--

Some progress on our custom-built homepage grid: http://www.astrangeobject.com/cwf/

(Responsive and testing in various browsers remains.)

— Reply to this email directly or view it on GitHub https://github.com/halfempty/coveredwithfur/issues/23#issuecomment-70146127 .

Jenn Shapland Digital Editor, Nonfiction www.astrangeobject.com http://www.astrangeobject.com/

[halfempty]

@JShapland Okay, slab font darkened.

For the line breaks, hmm... The titles are always going to be of varying lengths, so a simple font-size change or something like that might not cut it. On the other hand, if we think having just a bit more horizontal space would be helpful, we can make those boxes wider (on screens with the space, at least).

Otherwise, I could put in a field on the Edit screen, which would let you specify a custom title for use on the homepage only. This would allow you to use <br /> tags to manually break the line. Let me know!

[JShapland]

Nope, now the FICTION and NOT are too bold. I prefer it the other way. Thanks for messing with it.

I like your second idea:

Otherwise, I could put in a field on the Edit screen, which would let you specify a custom title for use on the homepage only. This would allow you to use
tags to manually break the line.

Can we do this? That way we can deal with each title individually.

Thanks!

On Thu, Jan 15, 2015 at 2:55 PM, Marty Spellerberg <notifications@github.com

wrote:

@JShapland https://github.com/JShapland Okay, slab font darkened.

For the line breaks, hmm... The titles are always going to be of varying lengths, so a simple font-size change or something like that might not cut it. On the other hand, if we think having just a bit more horizontal space would be helpful, we can make those boxes wider (on screens with the space, at least).

Otherwise, I could put in a field on the Edit screen, which would let you specify a custom title for use on the homepage only. This would allow you to use
tags to manually break the line. Let me know!

— Reply to this email directly or view it on GitHub https://github.com/halfempty/coveredwithfur/issues/23#issuecomment-70159897 .

Jenn Shapland Digital Editor, Nonfiction www.astrangeobject.com http://www.astrangeobject.com/

[halfempty]

@JShapland Okay, that's in.

[cccallie]

Hey—

The new grid looks super great. Thanks for working on it today, Marty.

I'm planning on sending out the link tomorrow to a select group of folks—a sneak peek type thing—and then launching officially on Tuesday. You're still working on the responsiveness, yeah? I'd love the mobile to look good before I send people to the site, cause I imagine folks might click on the link on their phones. Any idea how much more time that'll take to clean up? Is there anything else you're working on with the new grid?

C

On Thu, Jan 15, 2015 at 3:22 PM, Marty Spellerberg <notifications@github.com

wrote:

@JShapland https://github.com/JShapland Okay, that's in.

— Reply to this email directly or view it on GitHub https://github.com/halfempty/coveredwithfur/issues/23#issuecomment-70164179 .

Callie Collins Codirector A Strange Object astrangeobject.com, @AStrangeObject

[halfempty]

@cccallie Okay, I've put in some responsive breakpoints. Please take a look.

One thing I'm noticing on the phone is that the "Josefin Slab" font isn't coming through. This happens with the Ubergrid grids as well. iOS defaults it to a equally thin Helvetica.

[cccallie]

Wooo! Looks great on mobile. I love what the grid's doing. Jenn, does it look good to you?

Personally, I'm not worried about the Josefin Slab dropping out. I think the Helvetica looks nice and similar enough that it's not distracting.

C

On Thu, Jan 15, 2015 at 5:25 PM, Marty Spellerberg <notifications@github.com

wrote:

@cccallie https://github.com/cccallie Okay, I've put in some responsive breakpoints. Please take a look.

One thing I'm noticing on the phone is that the "Josefin Slab" font isn't coming through. This happens with the Ubergrid grids as well. iOS defaults it to a equally thin Helvetica.

— Reply to this email directly or view it on GitHub https://github.com/halfempty/coveredwithfur/issues/23#issuecomment-70182338 .

Callie Collins Codirector A Strange Object astrangeobject.com, @AStrangeObject