Text Wrapping

[Talkpoppycock]

I had a need to have images respond to t=resizing at different screen widths and also have text wrap around the images. Being a fan of gridism I was well aware that it would satisfy my image requirement, but not the text wrapping. After some thought I came up with what seemed like a solution. It probably wouldn't work, but was worth try. It was simply to use gridism for the images and not for the text.

After unashamedly altering gridism, but keeping in the spirit of it's conception, that is to satisfy my thought process of what a grid should do, I cam up with the following.

CSS.

• Gridism
• A simple, responsive, and handy CSS grid by @cobyism
• https://github.com/cobyism/gridism */

/* Preserve some sanity */ .grid, .unit { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Set up some rules to govern the grid */ .grid { display: block; clear: both; } .grid .unit { float: left; width: 100%; padding: 10px; }

/* This ensures the outer gutters are equal to the (doubled) inner gutters. */ .grid .unit:first-child { padding-left: 20px; } .grid .unit:last-child { padding-right: 20px; }

/* Nested grids already have padding though, so let’s nuke it */ .unit .unit:first-child { padding-left: 0; } .unit .unit:last-child { padding-right: 0; } .unit .grid:first-child > .unit { padding-top: 0; } .unit .grid:last-child > .unit { padding-bottom: 0; }

/* Let people nuke the gutters/padding completely in a couple of ways */ .no-gutters .unit, .unit.no-gutters { padding: 0 !important; }

/* Wrapping at a maximum width is optional */ .wrap .grid, .grid.wrap { max-width: 978px; margin: 0 auto; }

/* Width classes */ .grid .w1-1 { width: 100%; } .grid .w1-2 { width: 50%; } .grid .w1-3 { width: 33.3333333332%; } .grid .w2-3 { width: 66.6666666667%; } .grid .w1-4 { width: 25%; } .grid .w3-4 { width: 75%; } .grid .w1-5 { width: 20%; } .grid .w2-5 { width: 40%; } .grid .w3-5 { width: 60%; } .grid .w4-5 { width: 80%; } .grid .w1-6 { width: 16.6666666667%; } .grid .w3-6 { width: 50%; } .grid .w5-6 { width: 83.3333333333%; } .grid .w1-8 { width: 12.5%; } .grid .w3-8 { width: 37.5%; } .grid .w5-8 { width: 62.5%; } .grid .w7-8 { width: 87.5%; }

/* Clearfix after every .grid / .grid { zoom: 1; } .grid:before, .grid:after { display: table; content: ""; line-height: 0; } .grid:after { clear: both; }

/* Utility classes */ .align-center { text-align: center; } .align-left { text-align: left; } .align-right { text-align: right; }

/* !important must be added to these floats */ .pull-left { float: left !important; } .pull-right { float: right !important; }

/* A property for a better rendering of images in units: in this way bigger pictures are just resized if the unit becomes smaller */ .unit img { max-width: 100%; }

/* 736px and less. */ @media screen and (max-width: 46em) { .medium_hide { display: none !important; visibility: hidden; }

.grid .wm1-1 { width: 100%; }
.grid .wm1-2 { width: 50%; }
.grid .wm1-3 { width: 33.3333333332%; }
.grid .wm2-3 { width: 66.6666666667%; }
.grid .wm1-4 { width: 25%; }
.grid .wm3-4 { width: 75%; }
.grid .wm1-5 { width: 20%; }
.grid .wm2-5 { width: 40%; }
.grid .wm3-5 { width: 60%; }
.grid .wm4-5 { width: 80%; }
.grid .wm1-6 { width: 16.6666666667%; }
.grid .wm3-6 { width: 50%; }
.grid .wm5-6 { width: 83.3333333333%; }
.grid .wm1-8 { width: 12.5%; }
.grid .wm3-8 { width: 37.5%; }
.grid .wm5-8 { width: 62.5%; }
.grid .wm7-8 { width: 87.5%; }

}

/* 560px and below */ @media screen and (max-width: 35em) { .small_hide { display: none !important; visibility: hidden; }

.grid .ws1-1 { width: 100%; }
.grid .ws1-2 { width: 50%; }
.grid .ws1-3 { width: 33.3333333332%; }
.grid .ws2-3 { width: 66.6666666667%; }
.grid .ws1-4 { width: 25%; }
.grid .ws3-4 { width: 75%; }
.grid .ws1-5 { width: 20%; }
.grid .ws2-5 { width: 40%; }
.grid .ws3-5 { width: 60%; }
.grid .ws4-5 { width: 80%; }
.grid .ws1-6 { width: 16.6666666667%; }
.grid .ws3-6 { width: 50%; }
.grid .ws5-6 { width: 83.3333333333%; }
.grid .ws1-8 { width: 12.5%; }
.grid .ws3-8 { width: 37.5%; }
.grid .ws5-8 { width: 62.5%; }
.grid .ws7-8 { width: 87.5%; }

/* Sometimes, you just want to be different on small screens */
.center-on-small { text-align: center !important; }
.hide-on-small { display: none !important; }

}

/* 400px 25em / @media screen and (max-width: 25em) { / Stack anything that isn’t full-width on smaller screens */ .grid .unit { width: 100% !important; padding-left: 10px; padding-right: 10px; }

.unit .grid .unit {
    padding-left: 0;
    padding-right: 0;
}

/* Sometimes, you just want to be different on small screens */
.center-on-mobiles { text-align: center !important; }
.hide-on-mobiles { display: none !important; }

}

HTML. <!DOCTYPE HTML>

The Last Temptation of Homer

Oh, I'm in no condition to drive. Wait a minute. I don't have to listen to myself. I'm drunk. Last night's "Itchy and Scratchy Show" was, without a doubt, the worst episode _ever._ Rest assured, I was on the Internet within minutes, registering my disgust throughout the world. Remember the time he ate my goldfish? And you lied and said I never had goldfish. Then why did I have the bowl, Bart? _Why did I have the bowl?_ Oh, everything looks bad if you remember it.

Mr. Plow

And the fluffy kitten played with that ball of string all through the night. On a lighter note, a Kwik-E-Mart clerk was brutally murdered last night. Homer no function beer well without. "Thank the Lord"? That sounded like a prayer. A prayer in a public school. God has no place within these walls, just like facts don't have a place within an organized religion. When I held that gun in my hand, I felt a surge of power…like God must feel when he's holding a gun. I'm allergic to bee stings. They cause me to, uh, die.

Life on the Fast Lane

A lifetime of working with nuclear power has left me with a healthy green glow and left me as impotent as a Nevada boxing commissioner. Beer. Now there's a temporary solution. Stan Lee never left. I'm afraid his mind is no longer in mint condition. I didn't get rich by signing checks. Aaah! Natural light! Get it off me! Get it off me! Inflammable means flammable? What a country.

Images.

To my complete amazement it does exactly what I require. Have I just reinvented the wheel?

[cobyism]

@Talkpoppycock Thanks for the issue—I’m having trouble working out from what you’ve posted here exactly what you’re suggesting adding to or changing about the project since there’s no diff. Would you be able to send a pull request for the changes you’re suggesting? Maybe using a gist or codepen or something similar might be a better way to visualise the use-case you’re talking about too.

[Talkpoppycock]

Hi Coby,

I’ve uploaded my code using gist. As I expect you realise by now I’m new to github and not sure of what I’m doing. Anyway the point I was making is not that your grid should be changed, simply that anyone can create a grid sizing to suite their own way of thinking, in fact I’ve now come up with something that suites my thinking even better and that is a percentage grid with 20 sizes in 5% steps i.e. w5 w10 w15 etc. Similarly my intermediate range is again simply personal taste. The main thing here is that your excellent concept can be customised to suite personal taste with ease. Very many thanks.

However the real reason for my post was the way I have used gridism to wrap text around an image that is contained in a grid and therefore the image is responsive to the grid with the text wrapping to suite. I was wondering if this was indeed a design feature or if I’ve invented a new use?

Kind Regards,

Chris Rogers

Email: talkpoppycock@yahoo.co.uk

Tel: 01299 879239

Mob: 07779 152130

PPlease consider the environment before printing this email

From: Coby Chapple [mailto:notifications@github.com] Sent: 23 June 2014 16:01 To: cobyism/gridism Cc: Talkpoppycock Subject: Re: [gridism] Text Wrapping (#27)

@Talkpoppycock https://github.com/Talkpoppycock Thanks for the issue—I’m having trouble working out from what you’ve posted here exactly what you’re suggesting adding to or changing about the project since there’s no diff. Would you be able to send a pull request for the changes you’re suggesting? Maybe using a gist https://gist.github.com/ or codepen http://codepen.io/ or something similar might be a better way to visualise the use-case you’re talking about too.

— Reply to this email directly or view it on GitHub https://github.com/cobyism/gridism/issues/27#issuecomment-46856627 . https://github.com/notifications/beacon/6225388__eyJzY29wZSI6Ik5ld3NpZXM6QmVhY29uIiwiZXhwaXJlcyI6MTcxOTE1NDg2OSwiZGF0YSI6eyJpZCI6MzM4MjE4NTJ9fQ==--eb6d23b823704d980fc4735c96b8937b4a5d10fd.gif

[cobyism]

Ah, yep I found your gist and I think I have a better idea of what you’re doing now. I think it’s great that you’ve been able to modify this grid to be something that matches your way of thinking better. That’s what open source is all about!

I have used gridism to wrap text around an image that is contained in a grid and therefore the image is responsive to the grid with the text wrapping to suite. I was wondering if this was indeed a design feature or if I’ve invented a new use?

This isn’t a use-case I intended for this grid, but it definitely looks like it can be used for that the way you’ve done it. Nice work :grin:

As for being new to :octocat:, that’s not a problem at all. If you ever did want to propose a change to this project and wanted some help working out how, feel free to open an issue explaining what you want to do and I can point you to some things that might help. Since I don’t think you’re suggesting any changes here though, I’m going to go ahead and close this issue. Thanks again for getting in touch! :+1: