Jump to content


Photo
- - - - -

Using the New PL Grid System - Positioning Elements Correctly


  • Please log in to reply
11 replies to this topic

#1 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 June 2012 - 03:26 PM

Thanks to the tutelage from @beardedavenger I have created my first Grid system. I must say that it works quite well:

Please Login or Register to see this Hidden Content



Here is the code I have implemented:

Please Login or Register to see this Hidden Content


and associated CSS:

Please Login or Register to see this Hidden Content



Some questions:

1) I needed to move the curly bracket over to the left. So I used a negative margin. Not sure if this is the best way to accomplish things? What are my options?
2) I use these 2 properties for the image on the right:

Please Login or Register to see this Hidden Content

Should I be doing anything else?
3) Is there a way to set a maximum width of "
" (for example)?

Guys: This is very cool stuff. Great job!

#2 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 28 June 2012 - 07:17 PM

1) Negative margins are probably the best way to accomplish it. It's what I would do. 2) I don't think anything else is needed, unless you're looking for something responsive in which case @beardedavenger is the resident guru on that. (And even if that's what you want, your code still looks right.) 3) .span2 {max-width: 50px;} :)

#3 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 28 June 2012 - 08:51 PM

Thank you (again, and again & again) @simple_mama. I am happy with the code also. I do realize that more is needed to make the site responsive - just drag it over to the left and you will see what I mean. I am hoping that @beardedavenger will weigh in on this aspect of the discussion. I did find this great article by Chris Coyer:

Please Login or Register to see this Hidden Content

PS I understand your explanation on point number 3. The problem is what happens if I only want column 50pxs. wide?

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 June 2012 - 03:12 AM

For the column, are you asking for it to be 50px no matter what (whether the browser window is resized or not)?

#5 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 05 July 2012 - 03:41 PM

@catrina: I figured it out by approximating my columns widths, then using negative margins as suggested by @simple_mama:

Please Login or Register to see this Hidden Content

What do you think? I still need to handle the responsive stuff. But I am seriously thinking of using WP Touch Pro as there is just too much payload on some of our pages.

#6 Henry Perkins

Henry Perkins

    Friendly Contributor

  • Members

  • 198 posts
  • LocationAustin, TX
  • Country: Country Flag

Posted 05 July 2012 - 08:04 PM

@WebWerx Just a thought... It's hard to be responsive when you're setting margins with pixels and not percentages. I hope my random thoughts lead us to a solution somewhere over the rainbow. Cheers!

#7 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 05 July 2012 - 08:57 PM

Howdie @hperkins (Henry)! Good thought --- and I know you are 100% correct. Any tutelage you could provide on the topic would be great... It really would. I had tried to get Nick to weigh in as Jenny had mentioned he was the in-house responsive design person.... to no avail. Did you look at the CSS I implemented? I am hoping to make the site "responsive". But me thinks that I have too many assets to load anyways.

#8 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 05 July 2012 - 11:08 PM

Sup, So yeah your special background is gonna be tough to get right and responsive. But really, the negative margins are doing more harm than good here. I'd prolly put that bracket and that text as an image. Only cause when the grid goes responsive, each span goes 100%, which means that bracket glyph goes under. Unless we hack with some css foo. Wish I could have spent some more time on this but maybe this will get you going in the right direction. CSS resets your markup to be a bit better and more semantic. Queries to do some responsive tricks. You could probably center all that stuff on the query if you want, but gots to run.

Please Login or Register to see this Hidden Content

Replace all your custom content box stuff with above Nick

#9 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 06 July 2012 - 02:00 AM

Holy Moley @beardedavenger: I gotta look at this in detail. Putting the bracket as an image works for me. The text no as we would loose the SEO value on a page that is content scarce in the first place. I do appreciate the time you spent helping out though. What about @hperkins ' comments about percentages?

#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 July 2012 - 02:59 AM

Henry's right. Fixed numbers are contrary to the concept of responsiveness as they set a predetermined width or height to the element. In a mobile view, those fixed sizes remain static, while percentage sized things can grow, shrink or move as needed.

#11 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 06 July 2012 - 02:16 PM

I just wanted to add to this and give a little SEO insight. :) If you're worried about creating an image and ruining the SEO value, you can get around the system. Create the image and do what was mentioned above. Leave your text in there as is but add a

Please Login or Register to see this Hidden Content

to it. Google will still index this text, but it don't display on the page. :)

#12 beardedavenger

beardedavenger

    Unicorn Wrangler

  • Members

  • 1219 posts
  • Country: Country Flag

Posted 07 July 2012 - 01:55 PM

WebWerx, I have given you the solution to fix this, which I dont even see on your site. Henry is not a developer, so that was a complete guess. Percentages, fixed widths, whatever, your negative margins will not work with a responsive layout. Also, moving those 3 words, into an image, is not going to destroy your SEO joo joo, guaranteed.